高度な設定
Solitudeテーマの高度な設定方法を学びます。
文字数統計
# --------------------------- start ---------------------------
# Word count
# 単語数統計
# warning: Please install the hexo-wordcount plugin first.
# 警告: hexo-wordcount プラグインを先にインストールしてください。
wordcount: false
# --------------------------- end ---------------------------
hexo-wordcount
プラグインをインストール
npm
pnpm
bun
yarn
npm i hexo-wordcount
pnpm i hexo-wordcount
bun add hexo-wordcount
yarn add hexo-wordcount
数学数式
# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 数式サポート
katex:
enable: false
# Whether to load on each page
# 各ページで読み込むかどうか
per_page: false
# Whether to enable copy formula
# コピーボタンを有効にするかどうか
copytex: false
# --------------------------- end ---------------------------
hexo-render-marked
プラグインをアンインストール
npm un hexo-renderer-marked
hexo-renderer-markdown-it
katex
@renbaoshuo/markdown-it-katex
プラグインをインストール
npm
pnpm
bun
yarn
npm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex
pnpm i hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex
bun add hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex
yarn add hexo-renderer-markdown-it katex @renbaoshuo/markdown-it-katex
_config.yml
に以下の内容を追加
_config.yml
markdown:
preset: 'default'
render:
html: true
xhtmlOut: false
langPrefix: 'language-'
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
enable_rules:
disable_rules:
plugins:
- '@renbaoshuo/markdown-it-katex'
anchors:
level: 2
collisionSuffix: ''
permalink: false
permalinkClass: 'header-anchor'
permalinkSide: 'left'
permalinkSymbol: '¶'
case: 0
separator: '-'
images:
lazyload: false
prepend_root: false
post_asset: false
inline: false # https://markdown-it.github.io/markdown-it/#MarkdownIt.renderInline
設定項目を有効にする
# --------------------------- start ---------------------------
# Katex
# Latex formula support
# Latex 数式サポート
katex:
enable: true
# Whether to load on each page
# 各ページで読み込むかどうか
per_page: true
# Whether to enable copy formula
# コピーボタンを有効にするかどうか
copytex: false
# --------------------------- end ---------------------------
ウェブサイト検証
# --------------------------- start ---------------------------
# verification
# 検証
verify_site:
# - name: google-site-verification
# content: xxxxxx
# - name: baidu-site-verification
# content: xxxxxxx
# --------------------------- end ---------------------------
各プラットフォームの検証コードを追加
CSS プレフィックス
# --------------------------- start ---------------------------
# CSS Prefix
# CSS プレフィックス
# When turned on, it will automatically prefix the CSS (to get better browser support), but this will increase the size of the CSS file.
# 有効にすると、CSS に自動的にプレフィックスを付けます(より良いブラウザサポートを得るため)が、これは CSS ファイルのサイズを増やします。
css_prefix: false
# --------------------------- end ---------------------------
拡張
# --------------------------- start ---------------------------
# Extend
# 拡張
extends:
# Insert in head
# head に挿入
head:
# - <script src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js"></script>
# Insert in body
# body に挿入
body:
# - <script src="https://cdn.bootcdn.net/ajax/libs/pace/1.2.4/pace.min.js"></script>
# --------------------------- end ---------------------------
カスタムウェブサイトファイルを挿入できます
PWA
PWAはウェブ最適化の一つの手段ですが、テーマは一定の適応を行っていますが、依然として設定が必要です。設定方法は次のとおりです:
hexo-swpp
と swpp-backends
プラグインをインストール
ブログのルートディレクトリで実行
npm
pnpm
bun
yarn
npm i hexo-swpp
pnpm i hexo-swpp
bun add hexo-swpp
yarn add hexo-swpp
npm
pnpm
bun
yarn
npm i swpp-backends
pnpm i swpp-backends
bun add swpp-backends
yarn add swpp-backends
PWA 設定
テーマの pwa
設定を有効にし、Hexo 設定で swpp
を有効にします
_config.solitude.yml
# 773行あたり
# --------------------------- start ---------------------------
# PWA
# Progressive Web App
pwa:
enable: true
manifest: /manifest.json # manifest.json
theme_color: "#006a73" # Theme color
mask_icon: /img/pwa/favicon.png # Mask icon
apple_touch_icon: /img/pwa/favicon.png # Apple touch icon
bookmark_icon: /img/pwa/favicon.png # Bookmark icon
favicon_32_32: /img/pwa/favicon_32.png # 32x32 icon
favicon_16_16: /img/pwa/favicon_16.png # 16x16 icon
# --------------------------- end ---------------------------
Hexo の最下部に swpp 設定を追加
_config.yml
swpp:
# プラグインを有効にするかどうか
enable: false
# リリース前に自動実行するかどうか
# auto_exec: true
在 source
目录中创建 manifest.json
文件
{
"name": "ウェブサイト名",
"short_name": "ウェブサイト名の略称",
"theme_color": "#006a73",
"background_color": "#006a73",
"display": "fullscreen",
"scope": "/",
"start_url": "/",
"id": "/",
"icons": [
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_16.png",
"sizes": "16x16",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon_32.png",
"sizes": "32x32",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/img/pwa/favicon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "any"
},
{
"src": "/img/pwa/favicon.png",
"sizes": "180x180",
"type": "image/png",
"purpose": "maskable"
}
],
"splash_pages": null
}
ブログのルートディレクトリに sw-rules.js
ファイルを作成
module.exports.config = {
/** @type {?ServiceWorkerConfig|boolean} */
serviceWorker: {
escape: 1,
cacheName: 'SolitudeCache',
debug: false,
},
register: {
onsuccess: undefined,
onerror: () =>
console.error(
'Service Worker 注册失败!可能是由于您的浏览器不支持该功能!'
),
builder: (root, framework, pluginConfig) => {
const { onerror, onsuccess } = pluginConfig.register;
return `
<script>
(() => {
const sw = navigator.serviceWorker;
const error = ${onerror && onerror.toString()};
if (!sw?.register('${new URL(root).pathname}sw.js')
${onsuccess ? `?.then(${onsuccess.toString()})` : ""}
?.catch(error)
) error()
})()
</script>`;
},
},
/** @type {?DomConfig|boolean} */
dom: {
/** @type {?VoidFunction} */
onsuccess: () => {
caches
.match('https://id.v3/')
.then((res) => {
if (res)
res.json().then((json) => {
utils &&
utils.snackbarShow(
`已刷新缓存,更新为${json.escape + '.' + json.global + '.' + json.local
}版本最新内容`,
false,
2500
);
});
else console.info('未找到缓存');
})
.catch((error) => console.error('缓存匹配出错', error));
},
},
/** @type {?VersionJsonConfig|boolean} */
json: {
/** @type {number} */
maxHtml: 15,
/** @type {number} */
charLimit: 1024,
/** @type {string[]} */
merge: [],
exclude: {
/** @type {RegExp[]} */
localhost: [],
/** @type {RegExp[]} */
other: [],
},
},
/** @type {?ExternalMonitorConfig|boolean} */
external: {
/** @type {number} */
timeout: 5000,
/** 拉取文件时地并发限制 */
concurrencyLimit: 100,
/** @type {({head: string, tail: string}|function(string):string[])[]} */
js: [],
/** @type {RegExp[]} */
stable: [
/^https:\/\/npm\.elemecdn\.com\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
/^https:\/\/cdn\.cbd\.int\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
/^https:\/\/cdn\.jsdelivr\.net\/npm\/[^/@]+\@[^/@]+\/[^/]+\/[^/]+$/,
],
replacer: (srcUrl) => {
if (srcUrl.startsWith('https://cdn.jsdelivr.net/npm/')) {
const pathname = new URL(srcUrl).pathname;
return [
srcUrl,
`https://cdn.cbd.int/${pathname}`,
`https://npm.elemecdn.com/${pathname}`,
`https://fastly.jsdelivr.net/npm/${pathname}`,
];
} else {
return srcUrl;
}
},
},
};
module.exports.cacheRules = {
simple: {
clean: true,
search: false,
match: (url, $eject) =>
url.host === $eject.domain && ['/404.html'].includes(url.pathname),
},
cdn: {
clean: true,
match: (url) =>
[
'cdn.cbd.int',
'lf26-cdn-tos.bytecdntp.com',
'lf6-cdn-tos.bytecdntp.com',
'lf3-cdn-tos.bytecdntp.com',
'lf9-cdn-tos.bytecdntp.com',
'cdn.staticfile.org',
'npm.elemecdn.com',
].includes(url.host) &&
url.pathname.match(/\.(js|css|woff2|woff|ttf|cur)$/),
},
};
module.exports.getSpareUrls = (srcUrl) => {
if (srcUrl.startsWith('https://npm.elemecdn.com')) {
return {
timeout: 3000,
list: [
srcUrl,
`https://fastly.jsdelivr.net/${new URL(srcUrl).pathname}`,
],
};
}
};
module.exports.ejectValues = (hexo, rules) => {
return {
domain: {
prefix: 'const',
value: new URL(hexo.config.url).host,
},
};
};
module.exports.skipRequest = (request) => request.url.startsWith("https://i0.hdslb.com") ||
request.url.startsWith('https://meting.qjqq.cn') ||
request.url.startsWith('https://api.i-meto.com');
ファイル構造の参考
- ブログディレクトリ/
- source/
- manifest.json
- sw-rules.js
CDN
# --------------------------- start ---------------------------
# 不要変更してください
CDN:
internal: local # local / cdnjs / jsdelivr / unpkg / custom
third_party: custom # cdnjs / jsdelivr / unpkg / custom
version: true # バージョン番号を使用するかどうか
custom_format: https://fastly.jsdelivr.net/npm/${name}@${version}/${min_file} # カスタム形式
# デフォルトの CDN リンクを直接上書き(優先度が最も高い)
options:
# algolia_search:
# aplayer_css:
# aplayer_js:
# artalk_css:
# artalk_js:
# blueimp_md5:
# busuanzi_js:
# chart_js:
# color_thief:
# fancyapps_css:
# fancyapps_ui:
# fontawesome:
# instantsearch:
# katex:
# katex_copytex:
# lazyload:
# medium_zoom:
# mermaid_js:
# meting_js:
# pace_js:
# pjax:
# qrcode:
# snackbar:
# swiper_css:
# swiper_js:
# twikoo:
# typeit_js:
# valine:
# waline_css:
# waline_js:
# --------------------------- end ---------------------------