飞鸟阅读 - 模板开发手册

前端默认模板开发指南与技术文档

📖 项目概述

模板系统介绍

飞鸟阅读采用基于ThinkPHP6的模板系统,支持PC端和移动端双端适配。模板系统具有以下特点:

  • 双端支持:独立的PC端和移动端模板
  • 模块化设计:组件化的模板结构
  • 继承机制:基于base.html的模板继承
  • 静态资源管理:规范的CSS/JS/图片管理
  • SEO优化:内置SEO功能支持

技术栈

技术 版本 用途 说明
ThinkPHP模板引擎 6.1 模板渲染 支持继承、包含、变量输出等功能
Bootstrap 5.x PC端UI框架 响应式布局与组件
BUI 1.x 移动端UI框架 移动端专用组件库
jQuery 3.6.2 JavaScript库 DOM操作与AJAX
Layui 2.x UI组件 弹层、表单等组件

模板类型

PCPC端模板

位于 /template/default_pc/,适配桌面端浏览器,使用Bootstrap框架

MOBILE移动端模板

位于 /template/default_mobile/,适配移动端浏览器,使用BUI框架

📁 目录结构

模板目录总览

template/ ├── default_pc/ # PC端模板 │ ├── common/ # 公共模板组件 │ │ ├── base.html # 基础模板 │ │ ├── header.html # 页头组件 │ │ ├── footer.html # 页脚组件 │ │ ├── comment.html # 评论组件 │ │ └── usermenu.html # 用户菜单 │ ├── index/ # 首页模板 │ │ └── index.html │ ├── book/ # 书籍相关页面 │ │ ├── detail.html # 书籍详情 │ │ ├── cate.html # 分类页面 │ │ ├── list.html # 书籍列表 │ │ ├── quanben.html # 完本专区 │ │ └── rank.html # 排行榜 │ ├── chapter/ # 章节页面 │ │ └── detail.html # 章节详情 │ ├── author/ # 作者页面 │ │ └── detail.html # 作者详情 │ ├── user/ # 用户中心 │ ├── search/ # 搜索页面 │ ├── login/ # 登录注册 │ ├── bookshelf/ # 书架 │ ├── info/ # 信息页面 │ ├── pages/ # 单页面 │ ├── article/ # 文章 │ ├── 404.html # 404错误页面 │ ├── copyright.xml # 版权信息 │ └── cover.jpg # 模板封面 └── default_mobile/ # 移动端模板 ├── common/ # 公共组件 ├── index/ # 首页 ├── book/ # 书籍页面 ├── chapter/ # 章节 ├── author/ # 作者 ├── user/ # 用户中心 ├── search/ # 搜索 ├── login/ # 登录 ├── bookshelf/ # 书架 ├── pay/ # 支付 ├── vip/ # VIP ├── 404.html # 404页面 ├── copyright.xml # 版权信息 └── cover.jpg # 模板封面

静态资源结构

public/static/ ├── assets/ # 公共资源 │ ├── init/ # 初始化资源 │ └── layui/ # Layui组件 ├── font-awesome/ # 字体图标 ├── bui/ # BUI框架(移动端) │ ├── css/ │ └── js/ ├── home/ # PC端资源 │ ├── style/ # 样式文件 │ ├── script/ # 脚本文件 │ ├── image/ # 图片资源 │ ├── fonts/ # 字体文件 │ └── js/ # 其他JS库 └── mobile/ # 移动端资源 └── default/ ├── css/ # 移动端样式 ├── js/ # 移动端脚本 └── image/ # 移动端图片
重要提示:模板中的public目录下的内容会复制到站点根目录的public目录下,用于可访问的静态资源。

⚙️ 模板引擎语法

基础语法

模板继承

{extend name="common/base"/}

所有页面模板都应继承自基础模板,实现统一的布局结构。

区块定义

{block name="title"}
<title>页面标题</title>
{/block}

{block name="style"}
<link rel="stylesheet" href="custom.css">
{/block}

{block name="body"}
页面主体内容
{/block}

{block name="script"}
<script>页面脚本</script>
{/block}

包含文件

{include file="common/header" nav='index' /}
{include file="common/footer" /}
{include file="common/comment" /}

变量输出

基本输出

{$book.title}           // 书籍标题
{$book.author}          // 作者名称
{$book.remark|raw}      // 原始HTML输出

函数调用

{:url('book_detail',['id'=>$book.id])}                    // URL生成
{:get_file($book.cover)}                              // 文件路径
{:time_format($book.create_time,'Y-m-d')}           // 时间格式化
{:wordCount($book.words)}                            // 字数统计
{:dsubstr($book.title,20)}                          // 字符串截取

SEO函数

{:get_seo_str('book','book_title','',['bookid'=>$bid])}        // SEO标题
{:get_seo_str('book','book_keywords','',['bookid'=>$bid])}    // SEO关键词
{:get_seo_str('book','book_description','',['bookid'=>$bid])} // SEO描述

条件判断

{notempty name="$book"}
    书籍存在时显示的内容
{else/}
    书籍不存在时显示的内容
{/notempty}

{eq name="$book.isfinish" value="2"}
    完结
{else/}
    连载
{/eq}

{if condition="$book.vip == 1"}
    VIP章节
{/if}

循环遍历

{volist name="$chapterlist" id="v"}
    <li>
        <a href="{:url('chapter_detail',['id'=>$v.id])}">{$v.title}</a>
    </li>
{/volist}

PHP代码块

{php}
$author = model('author')->where(['id'=>$book['authorid']])->find();
$chapterlist = model('chapter')->where(['bookid' => $book['id']])->select();
{/php}
注意:过多使用PHP代码块会影响模板的可维护性,建议在控制器中处理复杂逻辑。

系统常量

常量 说明 示例
{__STATIC__} 静态资源根路径 /static
{__ASSETS__} 公共资源路径 /static/assets
{__MOBILE__} 移动端资源路径 /static/mobile
{$version} 版本号(用于缓存控制) ?v=2.4.0

🎨 静态资源管理

资源引用规范

版本控制与缓存

缓存策略:所有静态资源都应该添加版本号参数 ?v={$version} 来控制浏览器缓存。
// PC端样式引用
{block name="style"}
<link rel="stylesheet" href="{__STATIC__}/home/style/book-detail.css?v={$version}">
{/block}

// 移动端样式引用
<link rel="stylesheet" href="{__MOBILE__}/default/css/style.css?v={$version}" />

核心样式文件

文件名 用途 平台
bootstrap.min.css Bootstrap框架样式 PC
style.css 主要样式文件 PCMOBILE
bui.css BUI框架样式 MOBILE

🧩 组件开发

基础模板组件

书籍卡片组件

<div class="book-card">
    <div class="book-cover">
        <a href="{:url('book_detail',['id'=>$book.id])}">
            <img src="{:get_file($book.cover)}" alt="{$book.title}">
        </a>
    </div>
    <div class="book-info">
        <h3 class="book-title">
            <a href="{:url('book_detail',['id'=>$book.id])}">{$book.title}</a>
        </h3>
        <div class="book-author">{$book.author}</div>
        <div class="book-status">
            {eq name="$book.isfinish" value="2"}完结{else/}连载{/eq}
        </div>
    </div>
</div>

搜索组件

<div class="search-box">
    <form action="{:url('search')}" method="get">
        <input type="text" name="q" placeholder="搜索书名、作者...">
        <button type="submit"><i class="bi bi-search"></i></button>
    </form>
</div>

📱 响应式设计

断点设置

/* Bootstrap 5 断点 */
@media (min-width: 576px) { /* 小屏设备 */ }
@media (min-width: 768px) { /* 平板设备 */ }
@media (min-width: 992px) { /* 桌面设备 */ }
@media (min-width: 1200px) { /* 大屏设备 */ }

移动端优化

/* 触摸优化 */
.btn {
    min-height: 44px;  /* 最小触摸目标尺寸 */
    padding: 12px 16px;
}

/* 移除点击高亮 */
.no-highlight {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

⭐ 最佳实践

SEO优化

<!-- 基础SEO标签 -->
<title>{:get_seo_str('book','book_title','',['bookid'=>$bid])}</title>
<meta name="description" content="{:get_seo_str('book','book_description','',['bookid'=>$bid])}">
<meta name="keywords" content="{:get_seo_str('book','book_keywords','',['bookid'=>$bid])}">

性能优化

安全考虑

注意:
  • 所有用户输入都应该进行XSS过滤
  • 使用 {$content|raw} 时要确保内容安全
  • 避免在模板中直接输出敏感信息

🚀 部署配置

模板安装

步骤:
  1. 将模板文件上传到 /template/ 目录
  2. 将静态资源复制到 /public/static/ 目录
  3. 在后台选择对应的模板
  4. 清除模板缓存

版权信息配置

<?xml version="1.0" encoding="utf-8"?> 
<config> 
    <name>模板名称</name> 
    <author>作者名称</author> 
    <ver>版本号</ver> 
    <price>价格</price>
    <url>官网地址</url>
    <platform>pc/mobile</platform>
</config>

注意事项

  • 确保文件权限正确设置
  • 测试不同浏览器的兼容性
  • 验证移动端显示效果
  • 检查所有链接和资源路径