以下配置皆在文件
<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 |
默认情况下,是否开启夜间模式取决于(优先级从高到低):
- 访客点击页面头部切换按钮的自行选择
- 访客切换了浏览设备的主题色调
- 您的
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
,为了正确友好的显示日文中的汉字,会先后加载 headings
和 title
的字体设置。
# 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 | 页面无刷新加载 | 全局 |
anime | js 动画效果 | 全局 |
algolia instantsearch | 基于 algolia 的站内搜索 | 全局 |
lazyload | 图片懒加载 | 全局 |
quicklink | 链接资源预加载 | 全局 |
fetch | 获取播放列表 | 全局 |
katex copy_tex | 数学公式显示及复制 | 按需 |
fancybox | 图片放大显示及排列 | 按需 |
valine | 基于 LeanCloud 的评论系统及文章阅读次数统计 | 按需 |
chart | 图表显示 | 按需 |
以上文件加载全部基于 jsDelivr,并对全局加载的组件进行了文件合并。
如果不明白啥意思,则不要轻易修改。