Beex 定制模板和章节(Custom Templates and Sections) 9051 | 特厉害计划
  • Why Github?
  • Team
  • Enterprise
  • Explore
  • Marketplace
  • Pricing
Sign inSign up
Watch996
Star102.4k
Fork61.8k
Branch: beex.help
Switch branches/tags
Branches
Tags
  •  
K / Beex 定制模板和章节(Custom Templates and Sections).md
39 lines 2.28 KB
First commit on 22 Jun 2020
    • 说明

      本页面是给主题制作者看的,需要具备基本的 HTML、CSS、JS 编程能力,并了解 Tera 模板系统。

    每个页面都可以指定单独的页面模板,由于 Beex 没有内置章节索引,所以我们通过定制模板来显示自己的章节目录。

    演示

    这里有一个基本演示:Demo

    实现说明

    • 按下面的样子组织模板文件:

      注意 templates 是复数。

      _themes
          +---my_theme
              +---templates
              |   +---my-book.html
              \---archive.html
      
    • archive.html 中预留章节目录的 {% block %}

    • my-book.html 继承 archive.html,并实现这个 block,调整好 CSS。

      • 可以直接编写目录的 HTML,也可以通过编写 {% macro %} 实现代码复用(见文末的参考)。
      • 如果你希望在目录中高亮当前页,可以通过 JavaScript 判断当前 URL 来实现。
    • 在文章页的 BeexMeta 中增加 template 字段,注意这里是单数。

      template: my-book.html
      

    参考

    你可以参考本站的主题,在这个主题中我使用的是 {% macro %},由于 Tera 还不支持复杂的数据类型,所以我使用的是一维数组,并且数组角标也需要使用临时变量,不能直接使用 sections[i + 1] 这种形式。