Pipe 主题开发指南

发表于

56558533658d4f22a502a1714d2e8172-logo96.png

开发步骤

主题框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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 目录
|  |  |  |- article.js               // 文章页面需要用的 JS 文件，可按需引入 '../../../js/*'
|  |  |  |- article.min.js           // article.js 的压缩文件
|  |  |  |- article.min.js.map       // article.min.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. 安装依赖 npm install && npm install --global gulp
  2. 按照 theme/x/Gina 结构在 theme/x 下新建一个皮肤目录 ThemeA
  3. 开发过程中修改 js，scss 文件需进行热编译，请运行 gulp watch --theme=ThemeA
  4. 开发过程中可引入所需的 js 及 css
1
2
3
// css 引入示例
@import '../../../scss/basic';
@import '../../../scss/github';
1
2
3
4
5
// js 引入示例
import $ from 'jquery'
import QRious from 'qrious'
import {InitComment, InitToc, ShowEditor, InitHljs} from '../../../js/article'
import './common'
  1. 开发完成，请运行 gulp 进行打包

注意事项

  • 皮肤需满足自适应，以便移动端访问
  • 为保证文章或评论内容的展现，需在元素上添加 class="pipe-content__reset"
  • 定义模版时需带上皮肤名称，如 {{define “ThemeA/head”}}{{end}}
  • 使用模版时需带上皮肤名称，如 {{template “ThemeA/head” .}}
  • 使用模版时，支持多个参数传人，如：{{template “ThemeA/module-list” dict “List” .RecentComments “Title” .I18n.RecentComment “UserCount” 2}}

  • css 引入方式

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

  • js 引入方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script type="text/javascript"
    id="script"
    data-isLogin="{{if eq .User.URole 0}}false{{else}}true{{end}}"
    {{if .Article}}
    src="{{.Conf.StaticServer}}/theme/x/{{.Setting.ThemeName}}/js/article.min.js?{{.Conf.StaticResourceVersion}}"
    {{else}}
    src="{{.Conf.StaticServer}}/theme/x/{{.Setting.ThemeName}}/js/common.min.js?{{.Conf.StaticResourceVersion}}"
    {{end}}
    ></script>

  • 底部请保留版权

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

模板变量

公共模板变量

变量 说明
.I18n 多语言，可使用 i18n/zh_CN.json 中的 key。注：key 首字母大写
.Title 页面 title
.MetaKeywords 页面 keywords
.MetaDescription 页面 description
.FaviconURL favicon 地址
.BlogURL 博客地址
.Conf 配置项，具体属性参见 util/confs.go 中的 struct。注：属性首字母大写
.Setting 设置项，具体属性参见 model/setting.go。注：属性首字母大写
.Statistic.StatisticArticleCount 文章总数
.Statistic.StatisticCommentCount 评论总数
.Statistic.StatisticViewCount 浏览总数
.UserCount 博客用户数
.MostUseTags 使用最多的标签，有 URL 和 Title 属性
.MostUseCategories 使用最多的分类，有 URL 和 Title 属性
.Year 当前年份
.LogoURL Logo 地址
.Navigations 自定义导航
{{range .Navigations}}{{.URL}}{{end}} 导航地址
{{range .Navigations}}{{.OpenMethod}}{{end}} 导航打开方式
{{range .Navigations}}{{.IconURL}}{{end}} 导航图标地址
{{range .Navigations}}{{.Title}}{{end}} 导航标题
.User.URole 用户角色：0-未登录；1-超级管理员；2-博客管理员；3-普通用户；4-被禁用户
.User.AvatarURLWithSize n 当前登录用户头像地址，n 为头像大小
.RecentComments 最近评论，属性参见 define-module-list.html
.MostCommentArticles 评论最多的文章，属性参见 define-module-list.html
.MostViewArticles 访问最多的文章，属性参见 define-module-list.html

archive-articles.html

变量 说明
.Archive.Title 存档月份
.Archive.ArticleCount 存档月文章数

archives.html

变量 说明
.Archives 存档列表
{{range .Archives}}{{.URL}}{{end}} 存档文章列表地址
{{range .Archives}}{{.Title}}{{end}} 存档月份
{{range .Archives}}{{.ArticleCount}}{{end}} 存档月文章数

article.html

变量 说明
.PreviousArticle.Title 上一篇文章标题
.PreviousArticle.URL 上一篇文章链接
.PreviousArticle.Author.Name 上一篇文章作者姓名
.PreviousArticle.Author.AvatarURLWithSize n 上一篇文章作者头像地址，n 为头像大小
.NextArticle.Title 下一篇文章标题
.NextArticle.URL 下一篇文章链接
.NextArticle.Author.Name 下一篇文章作者姓名
.NextArticle.Author.AvatarURLWithSize n 下一篇文章作者头像地址，n 为头像大小
.Article 文章对象
.Article.Abstract 文章摘要
.Article.ThumbnailURL 文章配图
.Article.URL 文章地址
.Article.Topped 文章是否置顶
.Article.Title 文章标题
.Article.Author.URL 文章作者链接
.Article.Author.Name 文章作者姓名
.Article.Author.AvatarURLWithSize n 文章作者头像地址，n 为头像大小
.Article.CreatedAt 文章创建时间
.Article.ViewCount 文章浏览数
.Article.CommentCount 文章评论数
.Article.Editable 是否可以编辑文章
.Article.ID 文章 ID
.Article.Tags 文章标签
{{range .Article.Tags}}{{.URL}}{{end}} 标签链接
{{range .Article.Tags}}{{.Title}}{{end}} 标签标题
.Article.Content 文章内容
.RecommendArticles 推荐文章
{{range .RecommendArticles}}{{.ThumbnailURL}}{{end}} 推荐文章缩略图
{{range .RecommendArticles}}{{.URL}}{{end}} 推荐文章链接
{{range .RecommendArticles}}{{.Title}}{{end}} 推荐文章标题
{{range .RecommendArticles}}{{.Abstract}}{{end}} 推荐文章摘要
{{range .RecommendArticles}}{{.Author.AvatarURLWithSize n}}{{end}} 推荐文章作者头像地址，n 为头像大小
{{range .RecommendArticles}}{{.Author.URL}}{{end}} 推荐文章作者链接
{{range .RecommendArticles}}{{.Author.Name}}{{end}} 推荐文章作者姓名
{{range .RecommendArticles}}{{.CreatedAt}}{{end}} 推荐文章创建时间
{{range .RecommendArticles}}{{.CommentCount}}{{end}} 推荐文章评论数
.Toc 文章目录

author-articles.html

变量 说明
.Author.Name 作者名称
.Author.ArticleCount 作者所写文章数

authors.html

变量 说明
.Authors 作者列表
{{range .Authors}}{{.URL}}{{end}} 作者链接
{{range .Authors}}{{.AvatarURLWithSize n}}{{end}} 作者头像地址，n 为头像大小
{{range .Authors}}{{.Name}}{{end}} 作者姓名
{{range .Authors}}{{.ArticleCount}}{{end}} 作者文章数

categories-articles.html

变量 说明
.Category.Title 分类名称
.Category.ArticleCount 分类文章数

categories.html

变量 说明
.Categories 分类列表
{{range .Categories}}{{.URL}}{{end}} 分类链接
{{range .Categories}}{{.Description}}{{end}} 分类描述
{{range .Categories}}{{.Title}}{{end}} 分类标题
{{range .Categories}}{{.ArticleCount}}{{end}} 分类文章数
{{range .Categories}}{{.Tags}}{{end}} 分类标签列表，有 URL 和 Title 属性

define-article-list.html

变量 说明
.Articles 文章列表
{{range .Articles}}{{.ThumbnailURL}}{{end}} 缩略图
{{range .Articles}}{{.URL}}{{end}} 链接
{{range .Articles}}{{.Author.Name}}{{end}} 作者名称
{{range .Articles}}{{.Author.AvatarURLWithSize n}}{{end}} 作者头像地址，n 为头像大小
{{range .Articles}}{{.Author.URL}}{{end}} 作者链接
{{range .Articles}}{{.Topped}}{{end}} 是否置顶
{{range .Articles}}{{.Title}}{{end}} 标题
{{range .Articles}}{{.Tags}}{{end}} 标签列表，有 URL 和 Title 属性
{{range .Articles}}{{.CreatedAt}}{{end}} 创建时间
{{range .Articles}}{{.ViewCount}}{{end}} 浏览数
{{range .Articles}}{{.CommentCount}}{{end}} 评论数
{{range .Articles}}{{.Abstract}}{{end}} 摘要
{{range .Articles}}{{.ID}}{{end}} ID
.Pagination.PageNums 分页列表
.Pagination.PreviousPageNum 上一页页码
.Pagination.FirstPageNum 第一页页码
.Pagination.CurrentPageNum 当前页码
.Pagination.LastPageNum 最后一页页码
.Pagination.PageCount 总页数
.Pagination.NextPageNum 下一页页码

define-module-list.html

变量 说明
.Title 模块名称
.List 模块列表
{{range .List}}{{.Author.URL}}{{end}} 作者地址
{{range .List}}{{.Author.Name}}{{end}} 作者姓名
{{range .List}}{{.Author.AvatarURLWithSize n}}{{end}} 作者头像地址，n 为头像大小
{{range .List}}{{.URL}}{{end}} 链接
{{range .List}}{{.Title}}{{end}} 标题
{{range .List}}{{.CreatedAt}}{{end}} 创建时间

tag-articles.html

变量 说明
.Tag.Title 标签名称
.Tag.ArticleCount 标签文章数

tags.html

变量 说明
.Tags 标签列表
{{range .Tags}}{{.URL}}{{end}} 标签链接
{{range .Tags}}{{.Title}}{{end}} 标签标题
{{range .Tags}}{{.ArticleCount}}{{end}} 标签文章数

主题

下载

https://github.com/b3log/pipe-themes

体验

https://pipe.hacpai.com

预览