Skip to content

Latest commit

 

History

History
218 lines (145 loc) · 7.31 KB

expert.md

File metadata and controls

218 lines (145 loc) · 7.31 KB
Raw
title description permalink
进阶使用
以下部分可能影响到「Suka」主题的正常运作！
/expert/

「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@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

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