开发步骤
主题框架
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 依赖树
开发说明
- 到 https://pan.baidu.com/s/1jHPtHLO 下载发布包并解压到项目根目录。双击后在浏览器中输入 http://localhost:5897
- 进入
theme
目录,安装依赖 npm install
- 按照
theme/x/Gina
结构在 theme/x
下新建一个皮肤目录 ThemeA
- 开发过程中修改 js,scss 文件需进行热编译,请运行
npm run dev
- 开发过程中可引入所需的 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'
- pjax 使用方式
<div id="pjax">
{{if .pjax}}{{noescape "<!---- pjax {#pjax} start ---->"}}{{end}}
...
{{if .pjax}}{{noescape "<!---- pjax {#pjax} end ---->"}}{{end}}
</div>
- 开发完成,请运行
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">
<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 |
标签列表 |
{{range .Tags}}{{.URL}}{{end}} |
标签链接 |
{{range .Tags}}{{.Title}}{{end}} |
标签标题 |
{{range .Tags}}{{.ArticleCount}}{{end}} |
标签文章数 |
主题
体验
Pipe
预览
加入开发
- 回贴提供皮肤下载及演示地址
- 官方进行测试及反馈
- 将皮肤链接加入本帖中
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于