# 背景音乐
参考 Yume 的官方文档：官方教程
我在 hexo-theme-shokax 文件夹下的 _config.yml 中设置如下，注意网易云若使用 “我喜欢的音乐” 链接，链接最后的 &userid= 部分需要去掉。
audio: | |
- title: QQ音乐 | |
list: | |
# - QQ 音乐连接 | |
- title: 网易云音乐 | |
list: | |
# - 网易云链接 |
# Algolia 搜索
参考 ShokaX 官方文档
- 前往 Algolia 官网，这里博主使用谷歌账号登录
- 进入 dashboard，依次点击 Search - Index - New - Index，填写 Index name（建议填写 shokaX）
- 点击左下角 Settings - API Keys，在博客根目录下的
_config.yml填写对应字段：
algolia: | |
appId: # Application ID | |
apiKey: # Search API Key | |
adminApiKey: # Admin API Key | |
chunkSize: 5000 | |
indexName: "shokaX" | |
fields: | |
- title #必须配置 | |
- path #必须配置 | |
- categories #推荐配置 | |
- content:strip:truncate,0,2000 | |
- gallery | |
- photos | |
- tags |
# 404 页面
ShokaX 并没有自动配置 404 页面，这里博主参考了原 Shoka 的代码
- 首先在
hexo-theme-shokax\layout\page.pug中，加入代码
block content | |
if page.type === 'categories' | |
div(class="collapse wrap") | |
h2(class="item title") | |
a(href=url_for(site.path)) | |
!= __('menu.home') | |
small | |
!= _p('counter.categories', site.categories.length) | |
!= _list_categories(3) | |
else if page.type === 'tags' | |
div(class="collapse wrap") | |
h2(class="item title") | |
a(href=url_for(site.path)) | |
!= __('menu.home') | |
small | |
!= _p('counter.tag_cloud', site.tags.length) | |
div(class="tag cloud") | |
!= tagcloud({min_font: theme.tagcloud.min,max_font: theme.tagcloud.max,amount: theme.tagcloud.amount,color: true,start_color: theme.tagcloud.start,end_color: theme.tagcloud.end}) | |
// 加入 404 页面代码 | |
else if page.type === '404' | |
div(class="page wrap") | |
div(class="notfound") | |
!= __('title.not_found') // 页面文字 | |
img(decoding="async" class="lostimg" itemprop="image" | |
src=url_for(theme.statics + theme.assets + '/'+ theme.pastlove)) | |
else | |
div(class="page wrap") | |
!= partial('_partials/post/post.pug', {post: page}) | |
+CommentRender |
- 然后在
hexo-theme-shokax/_config.yml中加入 theme 抛出的 404 图片：
pastlove: 404.png |
- 在
hexo-theme-shokax/source/css/_common/components/pages/pages.styl下进行样式编写：
.page { | |
.notfound { | |
text-align: center; | |
margin: 100px auto; | |
font-size: 30px; | |
font-style: italic; | |
font-weight: bold; | |
} | |
.lostimg{ | |
width: 70%; | |
display: block; | |
margin-top: 90px; | |
} |
- 新建 404 界面
地址重定向的要求即在 public 目录下包含 404.html ，这里我们可以在根目录的 source 文件夹下新建 md 文件：
--- | |
title: "404！" | |
description: "我们之间已经无话可说了，所有词语的组合已经用尽，原子不再把我们组合在一起" | |
type: "404" | |
--- |
保存，运行即可。
# 移除顶部模糊
同时在頂部以外的地方保留模糊效果
附上参考教程
在 shokax\scripts 下新建 removeTopBlur.js
hexo.extend.filter.register('theme_inject', function(injects) { | |
injects.style.push('views/removeTopBlur.styl'); | |
}); |
在根目录下新建 views 文件夹，并在其中新建 removeTopBlur.styl
#nav { | |
backdrop-filter: saturate(100%) blur(0px); | |
&.show { | |
backdrop-filter: saturate(180%) blur(20px); | |
} | |
} |
完成！
# CDN 加速
附上官方教程
statics: //cdn.jsdelivr.net/gh/<github用户名>/<仓库>@latest/ |
若 jsdelivr 被污染，则修改为：
statics: //fastly.jsdelivr.net/gh/liuxiaohanhanzi/liuxiaohanhanzi.github.io@latest/ |
# 评论区
博主选择了 twikoo+vercel 部署
下面是官方教程
