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:
position:
template:

static_prefix

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

data_prefix

json 文件 URL 前缀。

假如你的 json 文件放在某个 CDN 服务器上,将 data_prefix 设置为 //cdn.com/path/to/path/your_json_dir,同时 data_dir 设置为 your_json_dir

data_dir

用于生成 json 文件的目录。

favicon

favicon,缺省值 favicon.ico

ga

设置谷歌统计 ID。

seo

SEO 相关设置。

seo.描述取值缺省值
structured_data于页面头部添加 structured data 标签booleanfalse

pwa

PWA 相关设置。

pwa.workbox

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

pwa.workbox.描述取值缺省值
cdnworkbox script URLstringhttps://storage.googleapis.com/workbox-cdn/releases/3.6.3/workbox-sw.js
module_path_prefixworkbox.modulePathPrefixstring
expire过期时间(小时),
设置为 0 可持久缓存
number4
name生成的 service worker 脚本名stringsw.js
rules自定义缓存规则array

rules 项设置:

{}描述取值缺省值
name缓存名称(主要用于区分)string
strategyworkbox 的缓存策略,见 Workbox Strategiesstring
regex用于路由匹配的正则string
expire过期时间(小时),
设置为 0 可持久缓存
number4

举例:

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,默认会对页面请求进行拦截,以避免重定向问题(可配置 name: html以覆盖默认设置)。

pwa.manifest

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

manifest.取值缺省值
short_namestringhexo.config.title
namestringhexo.config.title
start_urlstring.
theme_colornumber#2a2b33
background_colornumber#2a2b33
iconsarray

plugins

用来在特定位置插入代码片段。

1
2
3
plugins:
- position: # 插入位置
template: # 代码片段

position 取值详细枚举:

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

position 取值支持数组,如:

1
2
3
position:
- post
- page

若需要最新的 ES 语法支持及代码压缩,需要安装 html-minifier、babel 和 uglify-js。
于项目根目录执行(Hexo 根目录,非 themes/inside):

1
npm install babel-core babel-preset-env html-minifier uglify-js --save

示例 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 评论系统。

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

示例 3:Gitment 评论系统。

layout/index.ejs
1
2
3
4
5
6
<head>
...
<link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css">
<script src="https://imsun.github.io/gitment/dist/gitment.browser.js"></script>
...
</head>
_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
plugins:
- 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 数学公式。

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

See also

Buy me a cup of coffee ☕.

Load Disqus