Elmore Cheng

The whole problem with the world is that fools and fanatics are always so certain of themselves, but wiser people so full of doubts.

Inside 主题配置 - Misc

Feb 1, 2019

Overview

static_prefix:
data_prefix:
data_dir:
favicon:
ga:
structured_data:
cdn:
module_path_prefix:
expire:
name:
name:
strategy:
regex:
expire:
short_name:
name:
start_url:
theme_color:
background_color:
src:
sizes:
type:
plugins[]:

static_prefix

静态资源 URL 前缀,用于设置 CDN。

1
static_prefix: //cdn.jsdelivr.net/gh/ikeq/hexo-theme-inside@version/source

data_dir

设置 json 文件的目录,缺省值 api

1
data_dir: api

data_prefix

json 文件 URL 前缀,用于设置 CDN。

1
2
3
# 假如你的 json 文件放在 cdn.example.com,则设置
data_prefix: //cdn.example.com/path/to/path/your_json_dir
data_dir: your_json_dir

favicon

favicon,缺省值 favicon.ico

1
favicon: favicon.ico

ga

设置谷歌统计 ID。

1
ga: UA-00000000-0

seo

SEO 相关设置。

1
2
3
seo:
# 于页面头部添加 structured data 标签,默认禁用
structured_data: true

pwa

PWA 相关设置。

pwa.workbox

使用 workbox 来支持离线缓存,默认禁用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
pwa:
workbox:
# workbox 脚本 URL,缺省值 `https://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js`
cdn: https://g.alicdn.com/kg/workbox/3.6.3/workbox-sw.js
# workbox.modulePathPrefix
module_path_prefix: https://g.alicdn.com/kg/workbox/3.6.3/
# 过期时间(小时),缺省值 `4`,设置为 0 可持久缓存
expire:
# service worker 脚本名,缺省值 `sw.js`
name:
# 自定义缓存,注意是数组
rules:
-
# 缓存名称(主要用于区分)
name:
# workbox 的缓存策略,见 https://developers.google.com/web/tools/workbox/modules/workbox-strategies
strategy:
# 用于路由匹配的正则
regex:
# 过期时间(小时),缺省值 `4`,设置为 0 可持久缓存
expire:

举例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
pwa:
workbox:
# 使用 alicdn
cdn: https://g.alicdn.com/kg/workbox/3.6.3/workbox-sw.js
module_path_prefix: https://g.alicdn.com/kg/workbox/3.6.3/
name: sw.js
rules:
# 使用 staleWhileRevalidate 策略缓存 jsdelivr 请求
- name: jsdelivr
strategy: staleWhileRevalidate
regex: https://cdn\\.jsdelivr\\.net
# 使用 cacheFirst 策略缓存静态资源
- name: theme
strategy: cacheFirst
regex: /.*\\.(?:js|css|woff2|png|jpg|gif)$
# 使用 cacheFirst 策略缓存 json 文件
- name: json
strategy: cacheFirst
regex: your_data_prefix/.*\\.json

若启用了 workbox,则默认会对 HTML 页面请求进行拦截,以优化重定向问题(如 /path 会多一次重定向为 /path/),可通过配置 name: html覆盖此行为。

pwa.manifest

配置 manifest.json,默认禁用,详见 Web App Manifest

1
2
3
4
5
6
7
8
pwa:
manifest:
short_name:
name:
start_url:
theme_color:
background_color:
icons: []

plugins

于特定位置动态插入可执行的代码片段,或全局加载脚本/样式。

支持通过安装 html-minifier、babel 和 uglify-js 来实现代码压缩。
于项目根目录执行(Hexo 根目录,非 themes/inside):

1
npm install babel-core babel-preset-env html-minifier uglify-js --save
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
plugins:
# 动态插入可执行的代码片段
- position: # `sidebar` | `post` | `page` | `comments` | `avatar`, 支持数组

# HTML 片段
template:
# 也可以是相对于主题根目录的路径,例如:
template: snippets/template-1.html

# 全局加载脚本/样式
- xxx.css
- xxx.js

# 更灵活的用法

# <script src="//sample.com/api.php?format=jsonp" id="sample-api" defer></script>
- tag: script # html 标签, `script` | `style` | `link`
# Any possible attributes
src: //sample.com/api.php?format=jsonp
id: sample-api
defer: true

# <link rel="stylesheet" href="xxx.css" disable>
- tag: link
href: xxx.css
disable: true

# 内联脚本需指定 code
# <script type="text/x-mathjax-config">MathJax.Hub.Config({...})</script>
- tag: script
type: text/x-mathjax-config
code: |
MathJax.Hub.Config({
showProcessingMessages: false,
messageStyle: 'none',
tex2jax: { inlineMath: [['s;,'s;], ['\\(','\\)']] }
})
# 也可以是相对于主题根目录的路径,例如:
code: snippets/mathjax-config.js

# 内联样式
# <style>.mycss{...}</style>
- tag: style
code: |
.mycss {
color: rebeccapurple;
}
# 也可以是相对于主题根目录的路径,例如:
code: snippets/mycss.css

position 取值详细枚举:

position描述
sidebar于 sidebar 导航链接下方插入
post于 post 底部插入(tag 列表上方)
page于 page 底部插入
comments于评论位置插入,即 post/page 底部,可用于集成第三方评论系统
avatar自定义头像代码

示例 1:在 sidebar 展示谷歌广告。

_config.yml
1
2
3
4
5
6
7
8
plugins:
- position: sidebar
template: |
<ins class="adsbygoogle"
style="display:inline-block;width:250px;height:250px"
data-ad-client=""
data-ad-slot=""></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

示例 2:Valine 评论系统。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
plugins:
- //cdn1.lncld.net/static/js/3.0.4/av-min.js
- //unpkg.com/valine/dist/Valine.min.js
- position: comments
template: |
<div id="vcomment"></div>
<script>
new Valine({
el: '#vcomment',
appId: '<API_ID>',
appKey: '<API_Key>',
path: location.pathname
})
</script>

示例 3:Gitment 评论系统。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
plugins:
- //imsun.github.io/gitment/style/default.css
- //imsun.github.io/gitment/dist/gitment.browser.js
- position: comments
template: |
<div id="gitment"></div>
<script>
if (!window.__gitment) window.__gitment = new Gitment({
owner: 'Your GitHub ID',
repo: 'The repo to store comments',
oauth: {
client_id: 'Your client ID',
client_secret: 'Your client secret',
},
});
Object.assign(__gitment, {
id: decodeURIComponent(location.pathname),
title: document.title,
link: location.href,
});
__gitment.update();
__gitment.render('gitment');
</script>

示例 4:MathJax 数学公式。

_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
plugins:
- tag: script
type: text/x-mathjax-config
code: |
MathJax.Hub.Config({
showProcessingMessages: false,
messageStyle: 'none',
tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] }
})
- //cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML
- position: post
template: |
<script>window.MathJax && MathJax.Hub.Queue(['Typeset', MathJax.Hub, document.querySelector('main')])</script>

示例 5:方头像。

_config.yml
1
2
3
4
5
6
7
plugins:
- position: avatar
template: |
<img src="//www.gravatar.com/avatar/d2e25f51b78fbc6bed7db389f38631bc?s=160"
style="padding:2px;width:8rem;height:8rem;border:1px solid #bbb;vertical-align:bottom;margin-top:2.4rem"
draggable="false"
width="160" height="160">

See also

Buy me a cup of coffee ☕.

Load Disqus