Firekylin 支持主题切换功能，你完全可以自行开发一款自己喜欢的主题。下面就为大家讲解如何开发一款 Firekylin 主题。

文件结构

Firekylin 主题使用了 nunjucks 模板语法，可以在nunjucks 帮助文档中查阅语法。一款主题最基本的目录结构应该是这样的：

  1. - new_theme/
  2.   - screenshot.png
  3.   - package.json
  4.   - index.html
  5.   - post.html
  6.   - page.html
  7.   - tag.html
  8.   - search.html
  9.   - archive.html
  10.   - template/ ## 非必须存在 ##
  11.     - page_template.html

screenshot.png

固定名称，为该主题的预览图片，图片必须为 800x500 的 PNG 文件。

package.json

该文件用来存储主题的基本信息，其结构如下：

  1. {
  2.   "name": "new_theme",
  3.   "version": "0.0.1",
  4.   "description": "主题描述",
  5.   "url": "主题地址",
  6.   "preview": "主题预览地址",
  7.   "tags": ["主题关键词", "主题关键词1"], 
  8.   "configElements": [
  9.     {
  10.       "type": "选项类型",
  11.       "name": "选项名称",
  12.       "label": "选项标签",
  13.       "help": "选项描述"
  14.     },
  15.   ]
  16. }

name 和 version 分别对应主题的名称以及版本号，name 应尽量唯一。如果你想要像默认主题一样，为主题添加一些自定义配置的话，你需要配置 configElements 属性。该属性用来配置主题选项，用户可以在后台设置。

configElements 属性的值必须为数组，数组每个元素为一个对象，其中 name 为该选项的英文名称，需要唯一且不能有空格。label 为该选项的中文描述，help 为该选项的帮助内容。type 表示该主题选项的类型，支持 html, css, javascript, url, text, email, textarea, password, radio, checkbox, select 这些类型。

大部分的类型基本上只需要这四个属性就够了，但是 radio, checkbox 和 select 除外。他们额外需要增加 options 属性用来配置“单选/多选/复选”的选项，示例如下：

  1. {
  2.   "type": "radio",
  3.   "name": "random",
  4.   "label": "随机显示",
  5.   "help": "随机显示可以随机显示背景图片",
  6.   "options": [
  7.     {"label": "是", "value": 1},
  8.     {"label": "否", "value": 0}
  9.   ]
  10. }
  1. {
  2.   "type": "select",
  3.   "name": "show_num",
  4.   "label": "显示数目",
  5.   "help": "显示图片个数",
  6.   "options": [
  7.     {"label": "0", "value": 0},
  8.     {"label": "1", "value": 1},
  9.     {"label": "2", "value": 2},
  10.     {"label": "3", "value": 3},
  11.     {"label": "4", "value": 4},
  12.     {"label": "5", "value": 5}
  13.   ]
  14. }
  1. {
  2.   "type": "select",
  3.   "name": "show_link",
  4.   "label": "显示链接",
  5.   "help": "仅显示勾选的网站链接",
  6.   "options": [
  7.     {"label": "Twitter", "value": "twitter"},
  8.     {"label": "Github", "value": "github"},
  9.     {"label": "Facebook", "value": "facebook"}
  10.   ]
  11. }

设置好后，在主题内可以通过 {{themeConfig.你的选项英文名字}} 来获取用户设置的值。

index.html

网站首页模板，模板中可以使用的变量可参考默认模板。

post.html

文章详情页模板，模板中可以使用的变量可参考默认模板。

page.html

默认的页面详情模板，模板中可以使用的变量可参考默认模板。

tag.html

标签显示模板，模板中可以使用的变量可参考默认模板。

search.html

搜索页模板，模板中可以使用的变量可参考默认模板。

archive.html

归档页模板，模板中可以使用的变量可参考默认模板。

template/page_template.html

template 文件夹内可以放置自定义页面模板，放置后用户可以在后台新建页面中选择该模板。最终该页面会以该模板进行渲染，而非之前的模板页面详情模板。

Powered By Firekylin & ThinkJS.