以下配置皆在文件 <root>/_config.shoka.yml 修改。大部分摘录自:https://shoka.lostyu.me/computer-science/note/theme-shoka-doc/config/

# 站点名称

alternate: Yume Shoka

这里设置的名称代替 Logo,显示在页面顶部,以及页尾 ©️ 处。

# 资源文件

支持本地静态文件跟 cdn 加速,默认值是 / ,指使用本地静态文件。

# local static
statics: /
or
# jsdelivr cdn
statics: //cdn.jsdelivr.net/gh/Arachnid-97/arachnid@latest/

当然,也可以修改成 //cdn.jsdelivr.net/gh/您的github用户名/您的项目名@latest/ 这种形式,以使用 jsDelivr 进行加速。

PS:jsDelivr 并不是实时更新,重新生成文件后需要耐心等待(更新于 2022.05.25),目前 jsDelivr 对于大陆已经失效,部署后需要使用魔法才能访问,至于为啥,就不多说了。

css: css
js: js
images: images

静态文件所处目录的实际目录名,这些一般不改。

# 夜间模式

darkmode: # true

默认情况下,是否开启夜间模式取决于(优先级从高到低):

  1. 访客点击页面头部切换按钮的自行选择
  2. 访客切换了浏览设备的主题色调
  3. 您的 darkmode 配置项

# 自动定位

auto_scroll: true

默认情况下,再次打开页面时,会自动滚动到上次浏览的位置。
这个选项设为 false 时将停用此功能。

# 加载动画

# 是否显示页面加载动画 loading-cat
loader:
  start: true # 当初次打开页面时,显示加载动画
  switch: true # tab 切换到其他页面时,显示加载动画

注:tab 切换后只是显示 loading 动画,实际并未重新加载页面。

# 动画替换

CSS 样式对应修改的文件位置: <root>/themes/shoka/source/css/_common/components/third-party 中的 loading.styl 文件。

//css
//\themes\shoka\source\css\_common\components\third-party\loading.styl
// 保留下面这几行,其余删除后写入新样式
#loading {
  @extend $fix-fullscreen;
  background-color: var(--grey-1);
  if(!hexo-config('loader.start')) {
    display: none;
  }
}
//
	你的CSS样式代码
//

html 对应修改的文件位置: <root>/themes/shoka/layout/_partials 中的 layout.njk 文件。

//HTML
//\themes\shoka\layout\_partials\layout.njk
<body itemscope itemtype="https://schema.org/WebPage">
  <div id="loading">
		//此处删除并重新写入css样式对应的html代码
  </div>
  <div id="container">

# 烟花效果

单击页面的烟花效果配置如下:

fireworks:
  enable: true # 是否启用
  color: # 烟花颜色
    - "rgba(255,182,185,.9)"
    - "rgba(250,227,217,.9)"
    - "rgba(187,222,214,.9)"
    - "rgba(138,198,209,.9)"

# 加载谷歌字体

font:
  enable: true
  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: x.x`. Use `em` as unit. Default: 1 (16px)
  # Global font settings used for all elements inside <body>.
  global:
    external: true
    family: Mulish
    size:
  # Font settings for alternate title.
  logo:
    external: true
    family: Fredericka the Great
    size: 3.5
  # Font settings for site title.
  title:
    external: true
    family: Noto Serif JP
    size: 2.5
  # Font settings for headlines (<h1> to <h6>).
  headings:
    external: true
    family: Noto Serif SC
    size:
  # Font settings for posts.
  posts:
    external: true
    family:
  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: Inconsolata

此功能基本参考 NexT。
加粗标题的字体总是使用 Noto Serif ,为了正确友好的显示日文中的汉字,会先后加载 headingstitle 的字体设置。

# iconfont 图标

对应文件位置: <root>/themes/shoka/source/css 中的 _iconfont.styl 文件。

font-family 设为 ic ,所有字体样式前缀为 i- ;具体参见 <root>/themes/shoka/source/css/_iconfont.styl

# 自定义图标

如果需要添加或修改,需要找 shoka 主题的博主姐姐添加您的 Iconfont 用户名到项目中,此后您可以任意全选项目文件,批量保存到购物车中,添加至您自己的项目里,并将主题配置文件中的 iconfont 值改为您的项目。

注意,您的项目应设置 FontClass/Symbol 前缀 为 i-

<root>/source/_data/ 目录新建文件 iconfont.styl ,把新增或修改的图标样式复制到这个文件中。

自定义 iconfont.styl 文件将覆盖主题默认样式,为了避免出错,请保证原有样式名均存在,在原有样式基础上进行增删改。

最后,在配置文件中更改你的 iconfont 项目名:

# project of https://www.iconfont.cn/
# //at.alicdn.com/t/font_1832207_c8i9n1ulxlt.css => 1832207_c8i9n1ulxlt
iconfont: "1832207_igi8uaupcus"

# 菜单

menu:
  home: / || home
  posts:
    default: / || feather
    archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags
  friends: /friends/ || heart

menu 支持一级子目录,子目录设置中的第一项必须为 default ,用来定义父级按钮的样式。

# 社交按钮

# Social Links
# Usage: `Key: permalink || icon || color`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink,
# secend value is the name of Font icon.
social:
  github: https://github.com/amehime || github || "#191717"
  #google: https://plus.google.com/yourname || google
  twitter: https://twitter.com/amehime || twitter || "#00aff0"
  zhihu: https://www.zhihu.com/people/rurismzk || zhihu || "#1e88e5"
  music: https://music.163.com/#/user/home?id=12886823 || cloud-music || "#e60026"
  weibo: https://weibo.com/amehime || weibo || "#ea716e"
  about: https://about.me/amehime || address-card || "#3b5998"
  #email: mailto:yourname@mail.com || envelope || "#55acd5"
  #facebook: https://www.facebook.com/yourname || facebook
  #stackoverflow: https://stackoverflow.com/yourname || 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

如上,使用 || 作为分隔符,依次为 链接 || 图标 || 颜色
注意,只需要写图标名称,如 github ,则会自动转换为 ic i-github
十六进制颜色码需要 "" 包绕。

# 边栏配置

边栏可以选择在左侧,或右侧。

sidebar:
  # Sidebar Position.
  position: left
  #position: right
  # Replace the default avatar image and set the url here.
  avatar: avatar.jpg

修改头像文件的地址,相对于静态文件目录 images 中配置的路径。

可以将自己的图片放在 <root>/source/_data/images/ 目录下并保持同名,甚至以同名覆盖主题内默认的头像图片。

# 底部 widgets

目前页面底部可以显示两个小部件,即 随机文章最近评论

widgets:
  random_posts: true # 显示随机文章
  recent_comments: true # 显示最近评论

# 打赏功能

# Reward (Donate)
reward:
  # If true, reward will be displayed in every article by default.
  enable: true
  account:
    wechatpay: /wechatpay.png
    alipay: /alipay.png
    # paypal: /paypal.png

默认打开,对应的奖赏图片在 <root>/themes/shoka/source/images 中找到对应的名称图片。

# 标签显示

# TagCloud settings for tags page.
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 16 # Minimun font size in px
  max: 22 # Maxium font size in px
  start: "#72cecf" # Start color (hex, rgba, hsla or color keywords)
  end: "#ffbac3" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

# 背景音乐

在主题配置文件中,设置全局播放列表。
在文章的 Front Matter 中,设置文章专有播放列表,访问该文章页面时,将覆盖全局配置。

audio:
  - https://music.163.com/song?id=1387098940
  - https://music.163.com/#/playlist?id=2088001742
  - https://www.xiami.com/collect/250830668
  - https://y.qq.com/n/yqq/playsquare/3535982902.html

如上,可以直接使用网易云、虾米、QQ 音乐的播放列表、单曲,可以同时填写多个。

audio:
  - title: 列表1
    list:
      - https://music.163.com/#/playlist?id=2943811283
      - https://music.163.com/#/playlist?id=2297706586
  - title: 列表2
    list:
      - https://music.163.com/#/playlist?id=2031842656

如果需要自定义媒体文件,可以按照以下格式填写:

audio:
  - name: "曲目1"
    url: "播放地址"
    artist: "艺术家"
    cover: "封面"
    lrc: "歌词"
  - name: "曲目2"
    url: "播放地址"
    artist: "艺术家"
    cover: "封面"
    lrc: "歌词"
audio:
    - title: 列表1
      list:
        - name: "曲目1"
          url: "播放地址"
          artist: "艺术家"
          cover: "封面"
          lrc: "歌词"
        - name: "曲目2"
          url: "播放地址"
          artist: "艺术家"
          cover: "封面"
          lrc: "歌词"
    - title: 列表2
      list:
        - https://music.163.com/#/playlist?id=2031842656

如果要关闭当前页面的背景音乐播放器,则在文章 Front Matter 中配置:

---
title: 关闭背景音乐
audio: false
---

# 随机图库

  • 默认的图片列表位于 <root>/themes/shoka/_images.yml 中。
    使用了渣浪图库,使用一些上传工具,比如这里
    上传后图片的链接是 http://wx4.sinaimg.cn/large/6833939bly1gicmnywqgpj20zk0m8dwx.jpg
    只需要新一行写上 - 6833939bly1gicmnywqgpj20zk0m8dwx.jpg

    如果想要自定义,则在 <root>/source/_data/ 目录新建一个 images.yml 文件,这个文件中的图片至少 6 枚,将完全覆盖默认的图片列表。

  • 也可以直接在图片列表 yml 文件中,写上任意外链图片地址

- https://i.loli.net/2020/10/30/qAMYEFXxJcKRsiG.gif
- https://i.loli.net/2020/10/30/rjdhcSgEN8COBPA.jpg
- https://i.loli.net/2020/10/30/HKyzSd7NI3mlBpt.jpg
- https://i.loli.net/2020/10/30/Y1CBXqgeokEs457.jpg
- https://i.loli.net/2020/10/30/Z5W6r2BSoiThHG1.jpg
  • 也可以在主题配置文件中,设置图床 API:
image_server: "https://acg.xydwz.cn/api/api.php"

# 网页标题栏签名

原样式:

  • (●´3`●)やれやれだぜ

  • (´Д`)大変だ!

对应修改文件位置: <root>\themes\shoka\languages 中对应语言中的 favicon 元素:

favicon:
  show: # 切换回来的提示语
  hide: # 退出页面的签名

# 加载第三方组件

vendors:
  css:
    # 略略略
  js:
    # 略略略

包括:

pace加载进度条全局
pjax页面无刷新加载全局
animejs 动画效果全局
algolia instantsearch基于 algolia 的站内搜索全局
lazyload图片懒加载全局
quicklink链接资源预加载全局
fetch获取播放列表全局
katex copy_tex数学公式显示及复制按需
fancybox图片放大显示及排列按需
valine基于 LeanCloud 的评论系统及文章阅读次数统计按需
chart图表显示按需

以上文件加载全部基于 jsDelivr,并对全局加载的组件进行了文件合并。
如果不明白啥意思,则不要轻易修改。

更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

夏沫の浅雨 微信支付

微信支付

夏沫の浅雨 支付宝

支付宝