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 目录
|  |  |  |- 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 依赖树

开发说明

安装依赖 npm install && npm install --global gulp
按照 theme/x/Gina 结构在 theme/x 下新建一个皮肤目录 ThemeA
开发过程中修改 js，scss 文件需进行热编译，请运行 gulp watch --theme=ThemeA
开发过程中可引入所需的 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'

开发完成，请运行 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 引入方式

<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 引入方式

<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>

底部请保留版权

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}}	标签文章数

主题

欢迎注册黑客派社区，开启你的博客之旅。让学习和分享成为一种习惯！

Pipe 主题开发指南

开发步骤

主题框架

开发说明

注意事项

模板变量

公共模板变量

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

主题

下载

体验

预览