• Why Github?
  • Team
  • Enterprise
  • Explore
  • Marketplace
  • Pricing
Sign inSign up
Watch996
Star102.4k
Fork61.8k
Tag: beex
Switch branches/tags
Branches
Tags
K / 主题:beex-theme-github.md
Go to Mobile Clone
加载中...
到移动设备上浏览
94 lines 11.88 KB
First commit on 3 Jul 2020

    随时更新: Updated frequently随时更新Updated frequently

    简介

    仿 Github 主题,下载包与本站正在使用的版本可能不同步,还在完善中。

    使用方法

    • 初次下载custom-default 文件夹重命名为 custom,之后可以按下面“自定义”章节编辑这个文件夹里的文件。
    • 更新
      • 升级时可能会新增一些可自定义文件,查看一下 custom-default,将新增的文件复制到 custom 中。
      • 新增过的文件有:
        • custom-default/head.html
        • custom-default/avatar.html
        • custom-default/pagehead_repo.html

    下载

    下载Beex 版本上次更新
    beex_github.7zBeex≥0.6.02020-07-23

    支持特性

    • 不需要评论的页面,可在 BeexMeta 中设置 template: no-comment.html
    • KaTeX 数学公式
    • 微博文章(例子:tweet):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.htmlheader_right.html,直接编辑其中的 HTML 代码。

    Watch Star Fork 的数字

    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> 信息。