本配置内容参考 ShokaX 使用指南,再加上我的踩坑形成

话不多说直接进入正题

# 配置文件

需要更改配置文件 _config.yml_config.shokax.yml

一下配置皆是经验主义,如果出现问题,哪里有问题就把配置放在两个配置文件里都试试。

# _config.yml

需要填写的地方皆用 {} 占位,需要更换 {} 为自己的内容

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/
# Site
title: {} #uyume 的记录本
subtitle: {} #' 没有记录的记录本'
description: {} #' 记录想法和闲言碎语'
keywords:
author: {} #uyume
language: zh-CN
timezone: 'Asia/Shanghai'
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: {} # http://yuan-uyume.github.io 你的部署地址
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks
# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date
# Category & Tag
default_category: uncategorized
category_map:
tag_map:
# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true
# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'
# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page
# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: shokax
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: {} # git@github.com: 用户名 / 仓库名.git
  branch: {} # master 分支名
  
algolia:
  appId: {} # 你的应用 id
  apiKey: {} # 你的 only search apiky
  adminApiKey: {} # 你的 adminApiKey
  chunkSize: 5000
  indexName: {} # 你的 index 名称
  fields:
    - title
    - path
    - categories
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags
markdown:
  render: # 渲染器设置
    html: true # 过滤 HTML 标签
    xhtmlOut: true # 使用 '/' 来闭合单标签 (比如 <br />)。
    breaks: true # 转换段落里的 '\n' 到 <br>。
    linkify: true # 将类似 URL 的文本自动转换为链接。
    typographer: 
    quotes: '“”‘’'
  plugins: # markdown-it 插件设置
    - plugin:
        name: markdown-it-toc-and-anchor
        enable: true
        options: # 文章目录以及锚点应用的 class 名称,shoka 系主题必须设置成这样
          tocClassName: 'toc'
          anchorClassName: 'anchor'
    - plugin:
        name: markdown-it-multimd-table
        enable: true
        options:
          multiline: true
          rowspan: true
          headerless: true
    - plugin:
        name: ./markdown-it-furigana
        enable: true
        options:
          fallbackParens: "()"
    - plugin:
        name: ./markdown-it-spoiler
        enable: true
        options:
          title: "你知道得太多了"
autoprefixer:
  exclude:
    - '*.min.css'
minify:
  html:
    enable: true
    exclude: # 排除 hexo-feed 用到的模板文件
      - '**/json.ejs'
      - '**/atom.ejs'
      - '**/rss.ejs'
  css:
    enable: true
    exclude:
      - '**/*.min.css'
  js:
    enable: true
    mangle:
      toplevel: true #如果 js 压缩错误请删除此行
    output:
    compress:
      ecma: 2018
    exclude:
      - '**/*.min.js'
feed:
  limit: 20
  order_by: "-date"
  tag_dir: false
  category_dir: false
  rss:
    enable: true
    template: "node_modules/hexo-theme-shokax/layout/_alternate/rss.ejs"
    output: "rss.xml"
  atom:
    enable: true
    template: "node_modules/hexo-theme-shokax/layout/_alternate/atom.ejs"
    output: "atom.xml"
  jsonFeed:
    enable: true
    template: "node_modules/hexo-theme-shokax/layout/_alternate/json.ejs"
    output: "feed.json"

# _config.shokax.yml

darkmode: true # 黑暗模式
auto_scroll: true # 自动滚动到上次浏览处
experiments:
  optimizeLongPosts: false # 长文章优化
alternate: {} # 'Yuan u Yume'
# category_map:
#   指北: zhibei
# categories:
# - [指北]
# 侧边栏
sidebar:
  position: right
  avatar: avatar.jpg # 头衔,位置为 /source/_data/assets/avatar.jpg
# 社交链接
social:
   #github: https://github.com/yourname || github || "#191717"
   #google: https://plus.google.com/yourname || google
   #twitter: https://twitter.com/yourname || twitter || "#00aff0"
   #zhihu: https://www.zhihu.com/people/yourname || zhihu || "#1e88e5"
   #music: https://music.163.com/#/user/home?id=yourid || cloud-music || "#e60026"
   #weibo: https://weibo.com/yourname || weibo || "#ea716e"
   #about: https://about.me/yourname || address-card || "#3b5998"
   #email: mailto:xxx@xx.com || envelope || "#55acd5"
   #facebook: https://www.facebook.com/yourname || facebook
   #  stackoverflow: https://stackoverflow.com/ || stack-overflow
   #youtube: https://youtube.com/yourname || youtube
   #instagram: https://instagram.com/yourname || instagram
   #skype: skype:yourname?call|chat || skype
   #douban: https://www.douban.com/people/yourname/ || douban
widgets: 
  random_posts: true  # 随机文章
  recent_comments: true  # 显示最近评论
# 页尾全站统计
footer:
  since: 2023  # 开始时间
  count: true  # 开启
# 文章界面统计
post:
  count: true   # 开启
performance:
  # 使用 preconnect 预加载的网址 (不建议超过三个)
  preConnect:
    - "https://lf9-cdn-tos.bytecdntp.com"
  # 使用 dns-prefetch 预解析的网址
  dnsPrefetch:
    - "https://cdn.jsdelivr.net"
    - "https://unpkg.com"
waline:
  enable: true # 是否启用 
  serverURL: {} #你部署 waline 服务的地址 例如 waline.vercel.app

# 评论系统

评论系统我觉得是要拿出来单独说说的

首先,waline 评论系统应该拆成两部分来理解。一是 waline 的功能服务。二是储存服务。

# waline 功能服务

将 waline 部署到 serverless 提供商,获取应用地址填入配置文件,即 waline.serverURL 处。

waline:
  enable: true # 是否启用 
  serverURL: {} #你部署waline服务的地址 例如 waline.vercel.app

网上的 serverless 服务提供商有很多,国内大牌的腾讯云、阿里云等都有提供该服务。不过咱们这里只说说免费的,也不用我说,直接参考 waline 的官方文档即可。waline 的官方文档

值得注意的是 waline 的官方文档中部署到 vercel 的文章默认使用的数据库是 LeanCloud,其中提到设置 Environment Variables 时所用变量皆为 LeanCloud 的配置。此处变量可填写其他数据库的配置。其他数据库的配置

# 储存服务

通过在服务提供商申请免费的云数据库来储存 waline 系统的评论。此处不提供服务提供商推荐,但可参考 waline 的官方部署文档

# 封面随机图片

/source/_data/images.yml

- https://tc.mwm.moe/i/1/2023/06/17/648d587d65182.jpg
- https://tc.mwm.moe/i/1/2023/06/17/648d5886e5359.jpg
- https://tc.mwm.moe/i/1/2023/06/17/648d588b262cb.jpg
- https://tc.mwm.moe/i/1/2023/06/17/648d588ede725.png
- https://tc.mwm.moe/i/1/2023/05/02/6450f81509438.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f8543a392.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f8559c343.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9bb27870.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9bae95f6.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9bc4db32.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9bd85e48.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9c10a4bb.jpg
- https://tc.mwm.moe/i/1/2023/05/02/6450f9c17a948.jpg
- https://tc.mwm.moe/i/1/2023/04/22/6443a7e74fc63.jpeg
- https://tc.mwm.moe/i/1/2023/05/11/645c70451a689.jpg
- https://tc.mwm.moe/i/1/2023/05/11/645c704765a26.jpg
- https://tc.mwm.moe/i/1/2023/05/11/645c704ad4dc3.jpg
- https://tc.mwm.moe/i/1/2023/05/11/645c70521331b.jpg
- https://tc.mwm.moe/i/1/2023/05/11/645c7057a99b8.jpg
- https://tc.mwm.moe/i/1/2023/07/30/64c63b0271100.jpg

通过随机图床 api 获取图片 @二次元随机图片 API随机图片列表
随机图片

# 网络问题可能会导致的问题

# 点击大图图标位置错位

点击大图图标位置错位

粗鄙的解决办法
网络css加载失败
将如上加载失败的 css 文件下载下来直接在主题文件夹 hexo-theme-shokax\source\css\app.styl 中引入

# 本站所用网站

  • github 部署 hexo、储存图片 (可能需要魔法)
  • vercel 部署 hexo、waline (可能需要魔法)
  • railway 部署数据库
  • algolia 搜索服务