跳转到内容
ShokaX

主题配置

主题配置

基础配置

静态资源

statics: "/" # 静态文件根目录，可用于 CDN 加速
assets: "assets" # 图片资源存放目录
css: "css" # css 存放目录 (不建议改动)
js: "js" # js 存放目录 (不建议改动)

自定义网站图片

  • 不同的文件名称分别代表对应的图片。
    • avatar.jpg 默认情况下对应主页上的个人头像，可修改
    • favicon.ico 网站图标
    • apple-touch-icon.png 将网页链接添加到主屏幕时的图标
    • failure.ico 网站被隐藏时的网站图标
    • alipay.png 支付宝捐赠付款码
    • wechatpay.png 微信捐赠收款码
    • paypal.png PayPal 捐赠收款码
    • search.png 搜索下显示的图片

功能模块

此处指示 ShokaX 功能模块是否开启，在不使用的情况下建议关闭对应模块

modules:
  player: true # 启用音乐播放器
  fireworks: true # 启用鼠标点击烟花特效
  unlazyHash: false # 启用unlazy hash预览图支持
  visibilityListener: true # 启用可见度监听器
  tabs: true # 启用选项卡扩展支持，如需开启 summary 功能请一并开启
  quiz: true # 启用文章内问题扩展支持
  fancybox: true # 启用 fancybox 支持（不建议禁用）

部分配置的解释：

  • 如果需要使用 media tag，请开启 player 模块
  • 如果不喜欢切换标签页改变标题这个功能，请关闭 visibilityListener

主页配置

homeConfig:
  gradient: false # 使用CSS渐变作为文章封面
  # fixedCover 性能比默认的更好，且开启时将启用LCP优化和预加载
  fixedCover: "" # 主页面cover(为空则使用bing随机图片)

当 gradient 启用时，将使用渐变色封面代替_images.yml，渐变色集不可控制 当 fixedCover 启用时，上方的图片轮播集将被锁定为 fixedCover 配置的图片，_images.yml不再控制头图

导航栏、社交链接、侧边栏、大标题

导航栏

以下为菜单项的配置格式及参数说明：

menu:
  home: / || home          # 独立导航项 - 首页
  submenu:                 # 下拉菜单组
    default: /page/ || user  # 默认显示项
    link: /page1/ || cloud   # 子菜单项1
  link2: /page2/ || coffee  # 独立导航项 - 链接2

独立导航项

字段结构："菜单名称": "链接路径 || 图标代号"

  • 链接路径
    对应 HTML 中 <a href> 的值（如 / 或 /page2/）

  • 图标代号
    指定显示在文字旁的图标，可用图标见 _iconfont.styl 文件
    （示例中 home 和 coffee 均为图标代号）

  • 菜单名称
    支持国际化键值（如 home 可对应多语言配置），未配置时显示字段名称

  • 特殊符号
    通过双竖线 || 分隔链接路径和图标代号

下拉菜单组

配置规则：

菜单组名称:
  default: 链接路径 || 图标代号  # 默认显示的标题项
  子项1: 链接路径 || 图标代号
  子项2: 链接路径 || 图标代号

  • default 项

    • 显示为下拉菜单的标题（建议链接路径设为 / 避免无效跳转）
    • 仍需包含完整格式 路径 || 图标

  • 子菜单项
    配置方式与独立导航项相同，按需添加多个子项

配置示例解析

# 独立导航项：将在导航栏显示「首页」文字+小屋图标，点击跳转至 /
home: / || home


# 下拉菜单组：显示为带用户图标的「Page」下拉菜单
submenu:
  default: /page/ || user  # 下拉菜单标题
  link: /page1/ || cloud   # 子项1：云图标+跳转/page1/


# 独立导航项：显示咖啡图标+跳转/page2/
link2: /page2/ || coffee

社交链接

social:
  github: https://github.com/name || 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:foo@xxx.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

启用对应社交链接，只需要解除对应行注释即可。

格式：

social:
  keyname: link || logo || "color"
  • keyname：合法且不重复的 yaml 键；
  • link：社交网站链接；
  • logo：社交网站 logo；
  • color：社交网站 logo 颜色，选填（不填为字体颜色）；

侧边栏

sidebar:
  position: right # left/right分别对应左侧/右侧
  avatar: avatar.jpg

大标题

alternate: "foo" #站点大标题，（比 title 高一级，但仅在 index 显示）

页脚设置

底部设置

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

字数和阅读时间统计

# 页尾全站统计
footer:
  since: 2010 # 开始时间
  count: true # 开启
# 文章界面统计
post:
  count: true # 开启

预加载、解析地址设置

performance:
  # 使用 preconnect 预加载的地址 (不建议超过三个)
  preConnect:
    - "https://lf9-cdn-tos.bytecdntp.com"
  # 使用 dns-prefetch 预解析的地址
  dnsPrefetch:
    - "https://cdn.jsdelivr.net"
    - "https://unpkg.com"

preConnect 和 dnsPrefetch的区别： preConnect 选项会对链接进行预连接，这会极大加速 CDN 文件/评论系统的加载速度，但使用过多会影响首屏性能。

dnsPrefetch 适用于“不值得使用 pre-connect”的，此模式仅会优化 DNS 解析，适用于部分非关键站外链接（例如广告和站外视频）。

SEO 优化和访客优化

seo:
  bing:
  google:
  yandex:
  baidu:


visitor:
  clarity: false
  baiduAnalytics: false
  googleAnalytics: false

SEO 只需要在对应搜索引擎后填入验证码即可（域名验证 -> meta 验证 -> meta 标签的 content）。

visitor 需要填入对应项目的许可码，一般包含在 js 文件/script 标签中。例如，clarity 一般是 js 代码中 function 的第五个参数，百度统计是 ?hm= 后面的代码。

其他设置

夜间模式

darkmode: true # true/false分别对应打开/关闭夜间模式

默认情况下，是否开启夜间模式取决于（优先级从高到低）：

  • 访客点击头部自行选择
  • 浏览器设置主题色调
  • darkmode 配置

自动定位

auto_scroll: false

网站标题自定义

详细步骤：

  1. 进入 Hexo 的根目录下 source 文件夹中
  2. 进入_data 目录（如果没有则创建）
  3. 在下面创建文件 languages.yml
  4. 修改网站标题在不同语言情况下 favicon show 时，和隐藏呈现的文字
# language
zh-CN:
  # items
  favicon:
    show: 不负韶华
    hide: 以梦为马！


zh-HK:
  favicon:
    show: 不负韶华
    hide: 以梦为马！


zh-TW:
  favicon:
    show: 不负韶华
    hide: 以梦为马！


en:
  favicon:
    show: 不负韶华
    hide: 以梦为马！


ja:
  favicon:
    show: 不负韶华
    hide: 以梦为马！
  • 保存文件即可。

图片自定义

自定义网站轮播图

  • 在上面的 _data 目录下创建 images.yml；
  • 在文件内存入轮播图图片即可替换原本自带的轮播图；
  • 类似如下，可存入图床当中。
- https://i.imgtg.com/2023/03/09/YS2LU.jpg
- https://i.imgtg.com/2023/03/09/YSj7p.jpg
- https://i.imgtg.com/2023/03/09/YS6XY.jpg
- https://i.imgtg.com/2023/03/09/YSIlc.jpg
- https://i.imgtg.com/2023/03/09/YQSYM.jpg
- https://i.imgtg.com/2023/03/09/Y0xvg.jpg
- https://i.imgtg.com/2023/03/09/Y0iNK.jpg
- https://i.imgtg.com/2023/03/09/Y0zdB.jpg
- https://i.imgtg.com/2023/03/09/Y0kTl.jpg
- https://i.imgtg.com/2023/03/09/Y0hOs.jpg

自0.3.7版本开始，ShokaX 允许主页和文章使用不同的图片源： 以下文件中以_开头的为主题文件夹下，其他均为source/_data目录下：

  • images_index.yml为首页图片源文件，如果主题文件夹下存在_images_index.yml，则会使用主题文件夹下的文件，否则使用source/_data/images_index.yml
  • images.yml为通用图片源文件，作为首页的后备图片源和文章的图片源。如果未找到images.yml，则会使用主题文件夹下的_images.yml

首页精选与分类翻转块

1、修改站点配置，在 Hexo 根目录 /_config.yml 中找到 category_map，配置每个分类对应的英文映射。

category_map:
  计算机科学: computer-science
  C++: cpp
  郑莉老师C++语言程序设计: course-1
  Linux: Linux

2、设置文章所属的目录

/source/_posts 为上传文章的保存目录。

categories 的设置要根据上面的 category_map 以及文件顺序顺序书写。例如，某文件位于 计算机科学/C++/郑莉老师C++语言程序设计 目录下，根据上面的映射，在存储文件的 _posts 文件路径下就位于 /source/_posts 下 /computer-science/cpp/course-1 目录下。

categories:
  - [计算机科学, C++, 郑莉老师C++语言程序设计]

3、在最底部的文件目录放置 cover.jpg 文件，此图片将作为首页精选的图片。自此 文章精选 和 鼠标悬浮翻转 也将实现。

津 ICP 备2022001375 号
津公网安备 12011402001353 号