shokaX迁移避坑指南

公開日: 2026-03-19 20:29 431文字 3 min read ... ページビュー

この投稿は「日本語」では表示できません。元の投稿を表示しています。
ShokaX主题避坑指南

不蒜子统计无法居中

1.通过 pnpm 安装

pnpm install hexo-shokax-busuanzi --save

2.增加自定义 CSS

位于博客根目录 source_data 下创建 custom.styl

/* 一些自定义样式 */

/* 修复 busuanzi 不居中的问题 */
#busuanzi-wrap
  width: 100% !important
  text-align: center !important
  display: block !important

hexo-shokax-create-time

使用 github 内置的 readme 教程安装

重点:还需要再主题目录下的 config.yml 中配置

createTime: "2026/01/01 00:00:00"

hexo-renderer-aether

由于新版代码块渲染插件尚未支持展开和收起功能,导致如果长代码块影响预览,额外增加外部收起展开按钮。

  1. 增加:\themes\Shokax\scripts\generaters\code-collapse.js
'use strict';

const fs = require('fs');
const path = require('path');

hexo.extend.generator.register('code-collapse', function(locals) {
  const sourceFile = path.join(hexo.source_dir, '_data', 'code-collapse.js');
  const destPath = 'code-collapse.js';
  
  // 检查源文件是否存在
  if (!fs.existsSync(sourceFile)) {
    return [];
  }
  
  // 读取文件内容
  const content = fs.readFileSync(sourceFile, 'utf8');
  
  return {
    path: destPath,
    data: content
  };
});
  1. 末尾增加:\themes\Shokax\layout_partials\head\head_com.pug
// 在代码尾部增加
// 代码块折叠功能脚本
script(src=url_for('/code-collapse.js') defer)
  1. 增加样式:\source_data\custom.styl
/* 代码块折叠功能 */
.code-block-wrapper
  position: relative
  margin: 1rem 0
  border-radius: 0.25rem
  
  &.collapsed
    &::after
      content: ''
      position: absolute
      bottom: 0
      left: 0
      right: 0
      height: 3rem
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.3))
      pointer-events: none
      border-radius: 0 0 0.25rem 0.25rem

/* 折叠按钮 - 在代码块右上角 */
.code-toggle-btn-corner
  position: absolute
  top: 0.5rem
  right: 2.5rem
  background: rgba(0, 0, 0, 0.4)
  border: 1px solid rgba(255, 255, 255, 0.3)
  color: #fff
  padding: 0.35rem 0.5rem
  border-radius: 0.2rem
  cursor: pointer
  font-size: 0.85rem
  font-weight: bold
  transition: all 0.2s ease
  z-index: 10
  line-height: 1
  
  &:hover
    background: rgba(0, 0, 0, 0.6)
    border-color: rgba(255, 255, 255, 0.5)
  
  &:active
    transform: scale(0.95)

cateCards 首页精选分页

  • 由于这是升级版的 shoka,所以它不能像原版 shoka 直接在分类目录下创建 cover.jpg 就可以了
  • 主题根目录config.yml配置参考如下:
  cateCards:
    - slug: Study
      cover: Study/cover.jpg
    - slug: Life
      cover: Life/cover.jpg

気に入ったならばコメントを残してくださいね~

... ページビュー
© 2021 - 2026 Vullfin @VV
Powered by theme astro-koharu · Inspired by Shoka