# 背景音乐

参考 Yume 的官方文档:官方教程

我在 hexo-theme-shokax 文件夹下的 _config.yml 中设置如下,注意网易云若使用 “我喜欢的音乐” 链接,链接最后的 &userid= 部分需要去掉。

audio:
  - title: QQ音乐
    list:
#      - QQ 音乐连接
  - title: 网易云音乐
    list:
#      - 网易云链接

# Algolia 搜索

参考 ShokaX 官方文档

  1. 前往 Algolia 官网,这里博主使用谷歌账号登录
  2. 进入 dashboard,依次点击 Search - Index - New - Index,填写 Index name(建议填写 shokaX)
  3. 点击左下角 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 部署

下面是官方教程