Pipe 主题开发指南

开发步骤

主题框架

pipe/theme                           // 主题目录
|- comment                           // 评论组件目录
|- head                              // head 组件及第三方统计
|- images                            // 通用图片目录
|- js                                // JS 通用方法目录
|  |- article.js                     // 文章页面
|  |- common.js                      // 所有页面
|  |- manifest.json                  // 清单
|  |- symbol.js                      // svg 图标
|- scss                              // 通用样式目录
|- x                                 // 主题页面目录
|  |- theme-name                     // 单个主题目录
|  |  |- css                         // CSS 目录
|  |  |  |- common.scss              // 主题样式，可按需引入 '../../../scss/*' 下的样式 
|  |  |  |- common.css               // 主题 css 文件
|  |  |- js                          // JS 目录
|  |  |  |- common.js                // 页面需要用的 JS 文件，可按需引入 '../../../js/*'
|  |  |  |- common.min.js            // common.js 的压缩文件
|  |  |  |- common.min.js.map        // common.min.js 的调试文件
|  |  |- archive-articles.html       // 存档文章列表页面
|  |  |- archives.html               // 存档页面
|  |  |- article.html                // 文章页面
|  |  |- author-articles.html        // 作者文章列表页面
|  |  |- authors.html                // 作者页面
|  |  |- categories.html             // 分类页面
|  |  |- category-articles.html      // 分类文章列表页面
|  |  |- define-article-list.html    // 定义文章列表
|  |  |- define-footer.html          // 定义底部
|  |  |- define-head.html            // 定义 head
|  |  |- define-header.html          // 定义头部导航
|  |  |- define-module-list.html     // 定义模块列表
|  |  |- define-side.html            // 定义侧边栏
|  |  |- index.html                  // 首页
|  |  |- tag-articles.html           // 标签文章列表页面
|  |  |- tags.html                   // 标签页面
|  |  |- thumbnail.jpg               // 皮肤预览图
|- .eslintrc.js                      // js 语法校验  
|- gulpfile.js                       // 开发、打包 gulp 脚本
|- halt.html                         // 网站不可以用时展现的页面
|- package.json                      // 项目信息及依赖
|- package-lock.json                 // npm 依赖树   
|- sw.js                             // service worker 实现
|- sw.min.js                         // sw.js 压缩文件
|- themes.go                         // 皮肤加载
|- yarn.lock                         // yarn 依赖树

开发说明

1. 到 https://pan.baidu.com/s/1jHPtHLO 下载发布包并解压到项目根目录。双击后在浏览器中输入 http://localhost:5897
2. 进入 theme 目录，安装依赖 npm install
3. 按照 theme/x/Gina 结构在 theme/x 下新建一个皮肤目录 ThemeA
4. 开发过程中修改 js，scss 文件需进行热编译，请运行 npm run dev
5. 开发过程中可引入所需的 js 及 css

// css 引入示例
@import '../../../scss/basic';
@import '../../../scss/github';

// js 引入示例
import $ from 'jquery'
import QRious from 'qrious'
import {InitComment, InitToc, ShowEditor, InitHljs} from '../../../js/article'
import './common'

6. pjax 使用方式

<div id="pjax">  
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} start ---->"}}{{end}}  
        ...
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} end ---->"}}{{end}}  
</div>

7. 开发完成，请运行 npm run build 进行打包

注意事项

• 皮肤需满足自适应，以便移动端访问
• 为保证文章或评论内容的展现，需在元素上添加 class="pipe-content__reset"
• 定义模版时需带上皮肤名称，如 {{define "ThemeA/head"}}...{{end}}
• css 及 manifest.json 引入方式

<link type="text/css" rel="stylesheet"
      href="{{.Conf.StaticServer}}/theme/x/{{.Setting.ThemeName}}/css/common.css?{{.Conf.StaticResourceVersion}}"/>
<link rel="manifest" href="{{.Conf.Server}}/theme/js/manifest.json">

• js 引入方式

<script type="text/javascript"
        id="script"
        data-blogurl="{{.BlogURL}}"`
        data-isLogin="{{if eq .User.URole 0}}false{{else}}true{{end}}"
        src="{{.Conf.StaticServer}}/theme/x/{{.Setting.ThemeName}}/js/common.min.js?{{.Conf.StaticResourceVersion}}"
></script>

• 使用 pjax 时应保证 JS 对公共 DOM 部分的一次或多次操作保持唯一性
• 底部请保留版权

 Powered by <a href="http://b3log.org/" target="_blank">B3log 开源</a> • <a href="https://hacpai.com/tag/Pipe" target="_blank">Pipe</a>

模板变量

公共模板变量

archive-articles.html

archives.html

article.html

author-articles.html

authors.html

categories-articles.html

categories.html

define-article-list.html

define-module-list.html

tag-articles.html

tags.html

主题

体验

Pipe

预览

• Littlewin 缩略图

• Fara 缩略图

• 9IPHP 缩略图

• Medium 缩略图

• Next 缩略图

• Koma 缩略图

• Gina 缩略图

新主题推荐

加入开发

1. 回贴提供皮肤下载及演示地址
2. 官方进行测试及反馈
3. 将皮肤链接加入本帖中