Pipe 主题开发指南

本贴最后更新于 1571 天前,其中的信息可能已经事过境迁

56558533658d4f22a502a1714d2e8172-logo96.png

开发步骤

主题框架

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'
  1. pjax 使用方式
<div id="pjax">  
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} start ---->"}}{{end}}  
        ...
    {{if .pjax}}{{noescape "<!---- pjax {#pjax} end ---->"}}{{end}}  
</div>
  1. 开发完成,请运行 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>

模板变量

公共模板变量

变量 说明
.I18n 多语言,可使用 i18n/zh_CN.json 中的 key。注:key 首字母大写
.Title 页面 title
.MetaKeywords 页面 keywords
.MetaDescription 页面 description
.FaviconURL favicon 地址
.BlogURL 博客地址
.BlogAdmin.Name 博客管理员名称
.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 文章创建时间
.Articles.CreatedAtYear 文章创建时间中的年份
.Articles.CreatedAtMonth 文章创建时间中的月份
.Articles.CreatedAtDay 文章创建时间中的天
.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}}{{.CreatedAtYear}}{{end}} 创建时间中的年份
{{range .Articles}}{{.CreatedAtMonth}}{{end}} 创建时间中的月份
{{range .Articles}}{{.CreatedAtDay}}{{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

预览

新主题推荐

加入开发

  1. 回贴提供皮肤下载及演示地址
  2. 官方进行测试及反馈
  3. 将皮肤链接加入本帖中
1 操作
Vanessa 在 2019-11-29 23:43:28 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...