进阶使用

以下部分可能影响到「Suka」主题的正常运作!

在 GitHub 上编辑

「Suka」除了提供基本的主题设置和第三方服务以外,还提供了一些进阶的设定,让「Suka」更具定制性。 请注意,这些设定可能影响到「Suka」的正常运作,请务必先了解这些设定背后的相关知识。

使用 Git 管理 Hexo

正如在 开始使用 中所说,为了避免冲突,「Suka」中只有 _config.example.yml主题配置文件 需要将 _config.example.yml 复制一份并重命名为 _config.yml

为了防止开发中 _config.yml 被推送进 Repo 中,我们将 _config.yml 写入了 .gitignore。这意味着在使用 Git 管理 Hexo 站点文件时,主题配置文件 并不会被 Push 到 Repo 中。此时你需要将 _config.yml.gitignore 中删除,注意这有可能会造成使用 git pull 更新「Suka」时造成冲突。

添加自定义代码

「Suka」支持在 </head> 之前添加自定义 font face,统计代码等自定义代码,也支持在站点的 </body> 之前添加自定义代码。

需要在站点目录下的 source 文件夹内创建一个名为 _data 的文件夹,并在文件内分别创建名为 head.yml footer.yml 的文件,并在其中加入你的自定义代码。head.yml 中的代码将被添加在 </head> 之前,footer.tml 中的代码将被添加在 </body> 之前。

代码格式是:

custom_head_1: '<!-- 一行自定义代码 -->'
custom_head_2:
  - '<!-- 多行自定义代码 -->'
  - '<!-- 第二行 -->'
  - '<!-- 第三行 -->'
custom_head_3:
  - '<!-- 这还是一行自定义代码 -->'

上述自定义代码的配置的渲染成 HTML 会像这样:

<!-- 一行自定义代码 -->
<!-- 多行自定义代码 --><!-- 第二行 --><!-- 第三行 -->
<!-- 这还是一行自定义代码 -->

使用 CDN

文档中我们会提供以下三种公共 CDN 库的地址:

  • jsDelivr:在全球范围内都有良好的速度,包括中国大陆地区
  • cdnjs:在除中国大陆地区外的全球范围内速度优秀
  • css.net:在中国大陆地区速度优秀,其它地区速度良好

当然,你也可以用你自己的私有 CDN 加载它们;如果你不想使用 CDN、直接从你的站点加载,只需将相关配置留空即可。

主题配置文件 中,找到 vendors

注意,在这里为代码高亮主题配置了 CDN 会覆盖前面你对代码高亮主题的设置!

Suka Theme 1.3.0

https://theme-suka.skk.moe https://github.com/SukkaW/hexo-theme-suka

jsDelivr

style_css: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/css/style.min.css
local_search_js: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/js/local-search.min.js
hanabi_browser_js: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/js/hanabi-browser.min.js
highlight_theme: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/css/highlight/[theme-name].min.css
gallery_css: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/css/gallery.min.css
gallery_js: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@1.3.0/source/js/gallery.min.js

Spectre.css 0.5.3

https://picturepan2.github.io/spectre/

jsDelivr

spectre_css: https://cdn.jsdelivr.net/npm/spectre.css@0.5.3

cdnjs

spectre_css: https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.5.3/spectre.min.css

css.net

spectre_css: https://cdnjs.loli.net/ajax/libs/spectre.css/0.5.3/spectre.min.css

Prism 1.15.0 & Prism Theme 1.1.1

https://github.com/PrismJS/prism/ https://github.com/PrismJS/prism-themes

jsDelivr

theme: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@latestsource/lib/prism/prism-{theme-name}.css
line_number: https://cdn.jsdelivr.net/npm/prismjs@1.15.0/plugins/line-numbers/prism-line-numbers.min.css

cdnjs

theme: https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-{theme-name}.min.css
line_number: https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.css

css.net

theme: https://cdnjs.loli.net/ajax/libs/prism/1.15.0/themes/prism-{theme-name}.min.css
line_number: https://cdnjs.loli.net/ajax/libs/prism/1.15.0/plugins/line-numbers/prism-line-numbers.min.css

Vanilla-Lazyload 8.9.0

https://github.com/verlok/lazyload

jsDelivr

lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload@8.9.0

cdnjs

lazyload: https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/8.9.0/lazyload.min.js

css.net

lazyload: https://cdnjs.loli.net/ajax/libs/vanilla-lazyload/8.9.0/lazyload.min.js

不蒜子

https://busuanzi.ibruce.info

默认从不蒜子官方 CDN 加载

jsDelivr

busuanzi: https://cdn.jsdelivr.net/gh/sukkaw/busuanzi@2.3/bsz.pure.mini.js

Hanabi

https://github.com/egoist/hanabi

jsDelivr

hanabi: https://cdn.jsdelivr.net/npm/hanabi@0.4.0

Prettify 0.1.0

注意!这不是 run_prettify.js

Prettify Theme

jsDelivr

prisim_theme: https://cdn.jsdelivr.net/npm/color-themes-for-google-code-prettify@2.0.4/dist/themes/{prettify-theme-name}.min.css

Fragment Cache

Hexo 从 3.0 开始引入了 Fragment Cache 选项,可以加速 Hexo 站点构建的速度,但是可能会导致一些问题。
「Suka」主题在 1.3.0 版本之前均强制开启 Fragment Cache,从 1.3.0 版本开始「Suka」提供了可配置选项 theme.fragment_cache,默认为 false

fragment_cache: false # true | false

PWA Manifest

如果你的站点启用了 HTTPS,并启用了 Service Worker,你就可以为你的站点启用 Progressive Web App(PWA)支持。
要启用 PWA 首先需要一个 manifest.json 文件。你可以在 MDN 关于 Web App Manifest 的文档上找到相关资料。你还可以在 Web App Minifest Generator 上快速生成一个 manifest.json

manifest.json 放置在站点的 source 目录中,并在 主题配置文件 中找到 pwa_manifest,配置你的 manifest.json 的地址:

head:
  ......
  pwa_manifest: path/to/manifest.json

Open Search

「Suka」的本地搜索功能支持通过搜索串搜索,在使用本地搜索时可以启用 Open Search。

你可以在 MDN 上或者 OpenSearch 的项目主页 中了解更多关于 OpenSearch。

在这里提供了一份最基础的 Open Search 的定义文件以在大部分浏览器中启用 Open Search:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>[[Your Site Name]</ShortName>
    <Description>[[Your Site Description]]</Description>
    <Url type="text/html" template="[[Your Search Page URL]]?s={searchTerms}" />
</OpenSearchDescription>

将上述内容中修改成你的站点信息,保存为 opensearch.xml 后放置在站点的 source 目录中,并在 主题配置文件 中找到 open_search,配置你的 opensearch.xml 的地址:

head:
  ......
  open_search: path/to/opensearch.xml