仿 Github 风格的博客主题,下载包与本站正在使用的版本可能不同步,还在完善中。
custom-default
文件夹重命名为 custom
,之后可以按下面“自定义”章节编辑这个文件夹里的文件。custom-default
,将新增的文件复制到 custom
中。custom-default/head.html
custom-default/avatar.html
custom-default/pagehead_repo.html
下载 | Beex 版本 | 上次更新 |
---|---|---|
beex_github.7z | Beex≥0.6.0 | 2020-07-23 |
template: no-comment.html
。tags
包含 tweet
的文章不显示在首页列表中,并且在标签页以帖子列表的形式展示。如果内容较长或内容需要渲染为 HTML,可在文章结尾添加 <!-- more -->
。tags
包含 todo
,则页面会输出两个彩色徽标:可自定义的部分以 {% macro %}
的形式保存在 beex_github/custom
目录中。
SVG 小图标保存在 beex_github/macros/octicon.html
中,名字可以参考 Octicons,不全的可以自己补充。
打开 comments.html
,你会看到:
{%- macro comments() -%}
{%- endmacro -%}
根据你使用的评论系统的文档插入代码,这段代码会在文章底部调用,类似这样:
{%- macro comments() -%}
<div id="artalk"></div>
<link rel="stylesheet" href="comments/Artalk.css">
<script src="comments/Artalk.js"></script>
<script>new Artalk({ el: '#artalk' })</script>
{%- endmacro -%}
打开 avatar.html
,在 {% macro %}
内插入图片代码,参数 size
用于不同位置的缩放,类似这样:
{%- macro avatar(size=40) -%}
<img src="your-donmain.com/images/author.jpg" width="{{ size }}">
{%- endmacro -%}
顶栏分成两部分,分别是 header_left.html
和 header_right.html
,直接编辑其中的 HTML 代码。
pagehead_actions.html
,可以改成你喜欢的数字。
pagehead_nav.html
,修改下面的部分:
{%- set nav = [
octicon::code(), 'Code', 0, '/',
octicon::issue_opened(), 'Issues', 42, '',
octicon::git_pull_request(), 'Pull requests', 73, '',
octicon::play(), 'Actions', 0, '',
octicon::project(), 'Projects', 0, '',
octicon::book(), 'Wiki', 0, '',
octicon::shield(), 'Security', 0, '',
octicon::graph(), 'Insights', 0, '',
] -%}
这是一个一维数组,每四个元素一组,第一个是图标,第二个是标题文字,第三个是标题后面数字(为 0
则不显示),第四个是链接地址。
使用一维数组只是因为 Tera 模板不支持多维数组的字面量写法。
file_nav_actions.html
,可以显示到移动设备上浏览的二维码,你也可以自己修改为普通超链接。
在第二行 {%- set base_url = '' -%}
中设置你的网址,不要带尾斜线,比如这样:
{%- set base_url = 'http://www.example.com' -%}
footer.html
,代码很简单所以也是直接编辑 HTML。
content_tips.html
,默认代码的意思是:
如果 archive.tags
里存在名称包含 todo
的 tag,则显示两个彩色小徽标
,你可以自己修改这个逻辑和样式。默认在文章页的内容顶部调用它。
如果你不想要任何提示,保留第一行 {%- macro content_tips(archive) -%}
和最末行 {%- endmacro -%}
,中间内容可以删掉。
彩色小徽标使用的是 shields.io 提供的 API,可以让你的主题更像 GitHub,你可以在合适的位置插入如下代码:
<img src="https://img.shields.io/badge/powered_by-Beex-blue">
效果:
更多语法参考官网的介绍:shields.io
可以在 head.html
中插入需要额外引入的 .js
或 .css
文件,不需要侵入 layout.html
。
这段代码会在 HTML 的 <head>
中调用,所以你也可以在这个文件里自定义一些 <meta>
信息。