以下部分可能影响到「Suka」主题的正常运作!
「Suka」除了提供基本的主题设置和第三方服务以外,还提供了一些进阶的设定,让「Suka」更具定制性。 请注意,这些设定可能影响到「Suka」的正常运作,请务必先了解这些设定背后的相关知识。
正如在 开始使用 中所说,为了避免冲突,「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 加载它们;如果你不想使用 CDN、直接从你的站点加载,只需将相关配置留空即可。
在 主题配置文件
中,找到 vendors
。
注意,在这里为代码高亮主题配置了 CDN 会覆盖前面你对代码高亮主题的设置!
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
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
https://github.com/PrismJS/prism/ https://github.com/PrismJS/prism-themes
jsDelivr
theme: https://cdn.jsdelivr.net/gh/sukkaw/hexo-theme-suka@latest/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
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
默认从不蒜子官方 CDN 加载
jsDelivr
busuanzi: https://cdn.jsdelivr.net/gh/sukkaw/busuanzi@2.3/bsz.pure.mini.js
https://github.com/egoist/hanabi
jsDelivr
hanabi: https://cdn.jsdelivr.net/npm/hanabi@0.4.0
注意!这不是
run_prettify.js
!
jsDelivr
prisim_theme: https://cdn.jsdelivr.net/npm/color-themes-for-google-code-prettify@2.0.4/dist/themes/{prettify-theme-name}.min.css
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
如果你的站点启用了 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
「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