Brown Lee的博客 — Web Developer
欢迎访问 Brown Lee 的个人博客，这里记录了我的学习和工作经历，分享了我的技术见解和实践经验，希望能为你提供一些启发和帮助。

Web Developer
欢迎访问 Brown Lee 的个人博客，这里记录了我的学习和工作经历，分享了我的技术见解和实践经验，希望能为你提供一些启发和帮助。

开发环境

键盘轻响夜微凉，终端一开万象昌。依赖不冲版本稳，热更新起页面香。

企业文化

灯火初明制度清，众志同心万事成。流程有序如江水，协作无声似雁行。

休闲时光

日影斜来风正柔，键盘暂歇意方休。一杯清茶消疲意，半卷闲书伴静幽。

画廊

只需要改变 2 个颜色就会让你的站点焕然一新

中文标题一

ENGLISH TITLE 1

披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。

中文标题二

ENGLISH TITLE 2

中文标题三

ENGLISH TITLE 3

中文标题四

ENGLISH TITLE 4

中文标题五

ENGLISH TITLE 5

中文标题六

ENGLISH TITLE 6

客户

我们的客户来自世界上最好的公司

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。
王勃，唐
庆历四年春，滕子京谪守巴陵郡。越明年，政通人和，百废具兴，乃重修岳阳楼，增其旧制，刻唐贤今人诗赋于其上，属予作文以记之。
范仲淹，宋
永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，修禊事也。群贤毕至，少长咸集。此地有崇山峻岭，茂林修竹，又有清流激湍，映带左右，引以为流觞曲水，列坐其次。
王羲之，魏晋

案例

实践见真知既是最好的解释

滕王阁序

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。

滕王阁序

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。

滕王阁序

豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。

新闻

汇聚热点话题打造创新思路

Step.2 基本配置

2023-11-12

Shona主题 & markdown使用手册

🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

# 站点别称

1	alternate: Yume Shoka

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

# 静态文件目录

1	statics: / #//cdn.jsdelivr.net/gh/amehime/shoka@latest/

默认值是 / ，指使用本地静态文件
可以修改成 //cdn.jsdelivr.net/gh/您的github用户名/您的项目名@latest/ 这种形式，以使用 jsDelivr 进行加速。
PS：jsDelivr 并不是实时更新，重新生成文件后需要耐心等待

1
2
3

css: css
js: js
images: images

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

# 夜间模式

1	darkmode: # true

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

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

# 自动定位

1	auto_scroll: # false

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

# 加载动画

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

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

# 页面特效

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

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` 图标

主题没有直接使用 Font Awesome，是因为用不到那么多 icon 感觉非常浪费，因此在 Iconfont 上重新建立了一个项目。
font-family 设为 ic ，所有字体样式前缀为 i- ，具体参见 <root>/themes/shoka/source/css/_iconfont.styl 。

1
2
3

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

如果需要添加或修改，请留言告诉我您的 Iconfont 用户名，我将把您添加到目前的项目中。

添加权限为 只读 ，此后您可以任意全选，批量保存到购物车中，添加至您自己的项目里，并将主题配置文件中的 iconfont 值改为您的项目。

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

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

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

# 菜单与社交按钮

menu:
  home: / || home
  about: /about/ || user
  posts:
    default: / || feather
    archives: /archives/ || list-alt
    categories: /categories/ || th
    tags: /tags/ || tags
  # friends: /friends/ || heart
  # links: /links/ || magic

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: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 。
十六进制颜色码需要 "" 包绕。

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

菜单显示文字可以在语言包中定义，具体请戳这里

# 边栏配置

边栏可以选择在左侧，或右侧
修改头像文件的地址，相对于静态文件目录 images 中配置的路径。

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

可以将自己的图片放在 <root>/source/_data/images/ 目录，甚至以同名覆盖主题内默认的头像图片，具体请戳这里

# 底部 widgets

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

1
2
3

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

# 字数及阅读时间统计

安装好 hexo-symbols-count-time 插件后，不需要修改站点配置文件，直接使用插件默认配置就行。

需要修改主题配置文件，找到两处 cout ，修改为 true ：

# 页尾全站统计
footer:
  since: 2010
  count: true

# 文章界面统计
post:
  count: true

# 文章评论

如何获取 LeanCloud 的 appId 和 appKey。

valine:
  appId: #Your_appId
  appKey: #Your_appkey
  placeholder: ヽ(○´∀`)ﾉ♪ # Comment box placeholder
  avatar: mp # Gravatar style : mp, identicon, monsterid, wavatar, robohash, retro
  pageSize: 10 # Pagination size
  lang: zh-CN
  visitor: true # 文章访问量统计
  NoRecordIP: false # 不记录IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  powerMode: true # 默认打开评论框输入特效
  tagMeta:
    visitor: 新朋友
    master: 主人
    friend: 小伙伴
    investor: 金主粑粑
  tagColor:
    master: "var(--color-orange)"
    friend: "var(--color-aqua)"
    investor: "var(--color-pink)"
  tagMember:
    admin:
      lth2508@outlook.com
    master:
      leetianhao@163.com
      # - hash of master@email.com
      # - hash of master2@email.com
    friend:
      1994756616@qq.com
      # - hash of friend@email.com
      # - hash of friend2@email.com
    investor:
      # - hash of investor1@email.com

tag 标签显示在评论者名字的后面，默认是 tagMeta.visitor 对应的值。
在 tagMeta 和 tagColor 中，除了 visitor 这个 key 不能修改外，其他 key 都可以换一换，但需要保证一致性。

举个栗子

tagMeta:
  visitor: 游客
  admin: 管理员
  waifu: 我老婆
tagColor:
  visitor: "#855194"
  admin: "#a77c59"
  waifu: "#ed6ea0"
tagMember:
  admin:
    # - hash of admin@email.com
  waifu:
    # - hash of waifu@email.com

在文章 Front Matter 中也可以配置上述参数，访问该文章页面时，将覆盖全局配置。
尤其可以用来配置一个特殊的 placeholder。

1
2
3

valine:
  placeholder: "1. 提问前请先仔细阅读本文档⚡\n2. 页面显示问题💥，请提供控制台截图📸或者您的测试网址\n3. 其他任何报错💣，请提供详细描述和截图📸，祝食用愉快💪"
---

评论通知与管理工具建议使用这个 Valine-Admin。
注意 SITE_URL 需要以 / 结尾。

如果某一篇文章需要关闭评论功能，则在文章 Front Matter 中配置：

---
title: 关闭评论
comment: false
---

# 背景音乐

在主题配置文件中，设置全局播放列表。
在文章的 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：
比如
1
image_server: "https://acg.xydwz.cn/api/api.php"

# 加载第三方组件

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

包括

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

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

主题版本升级的时候，可能会修改这里。
如果修改过主题默认 _config.yml ，记得更新主题时，末尾的 vendors 也要及时修改。

Ant Design Pro 安装

2023-10-20

antd 使用手册

ant design pro 提供了 pro-cli 快速初始化的脚手架

# Node 安装

# npm 安装

1
2
3

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

# yarn 安装

1
2
3

# 使用 yarn
yarn add global @ant-desgin/pro-cli
pro create myapp

# cnpm 安装

1
2
3

# 使用 cnpm
cnpm i @ant-design/pro-cli -g
pro create myapp

# Umi 安装

1
2
3

? 🐂 使用 umi@4 还是 umi@3 ? (Use arrow keys)
❯ umi@4
  umi@3

如果选择了 umi@4 版本，暂时还不支持全量区块。
如果选择了 umi@3，还可以选择 pro 的模板，pro 是基础模板，只提供了框架运行的基本内容，complete 包含所有区块，不太适合当基础模板来进行二次开发

1
2
3

? 🚀 要全量的还是一个简单的脚手架? (Use arrow keys)
❯ simple
  complete

安装依赖：

1
2
3

$ cd myapp && tyarn
// 或
$ cd myapp && npm install

# 开发

脚手架初始化成功之后就可以开始进行开发了，可以使用 @ant-design/pro 中提供的一些命令来辅助开发。

# start

运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。

# build

运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。

如果需要部署，可以查阅部署。

# analyze

analyze 脚本做的事情与 build 的相同，但是他会打开一个页面来展示你的依赖信息。如果需要优化性能和包大小，就推荐使用。

# lint

我们提供了一系列的 lint 脚本，包括 TypeScript，less，css，md 文件。你可以通过这个脚本来查看你的代码有哪些问题。在 commit 中我们自动运行相关 lint。

[height='100px']

# lint:fix

与 lint 相同，但是会自动修复 lint 的错误。

[height='100px']

# i18n-remove

这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

更多的命令，可以看这里 https://umijs.org/zh-CN/docs/cli#umi-build

Ant Design Pro 常见问题

2023-10-20

antd 使用手册

antd pro 官方文档介绍了动态切换主题的方法。但是并没有讲的特别清楚，而且编译主题的时间比较长，非常影响开发效率。下面介绍下我的解决办法。

# 自定义主题样式

# 动态主题切换原理

主题切换主要是通过 unm-plugin-antd-theme 插件实现的，unm-plugin-antd-theme 插件通过 antd-pro-merge-less 将 less 文件编译为一个主题 css 文件。
所以 unm-plugin-antd-theme 的配置文件就是定义的 antd-pro-merge-less (https://github.com/chenshuai2144/antd-pro-merge-less) 的参数，如下所示，要求是 json 文件，文件名 theme.config.json：

‘’ ‘’

{
	"theme": [{
      "key": "dark",
      "theme": "dark",
      "fileName": "dark.css",
      "modifyVars": {
        "@font-size-base": "12px",
        "@table-padding-vertical": "10px",
        "@link-color": "#0070cc"
      }
    },   
    {
      "key": "volcano",
      "fileName": "volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C",
        "@font-size-base": "12px",
        "@table-padding-vertical": "10px",
        "@link-color": "#0070cc"
      }
    },
    {
      "key": "volcano",
      "theme": "dark",
      "fileName": "dark-volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C",
        "@font-size-base": "12px",
        "@table-padding-vertical": "10px",
        "@link-color": "#0070cc"
      }
    }
  ],
  "min": true, 
  "isModule": true, 
  "ignoreAntd": false, 
  "ignoreProLayout": false, 
  "cache": true 
}

每种主题一个不同的文件，fileName 定义了文件名，theme 为 dark 表示暗黑主题（对应 antdpro 主题设置里面的 realDark），不写就是亮色主题（对应 antdpro 主题设置里面的 light 或 dark）。modifyVars 就是对 antd 默认变量的定制。

如果发现上面没有默认的亮色主题，因为这时不用单独的主题 css 文件，直接用默认的就好。
每次编译的时候 unm-plugin-antd-theme 插件会遍历上面定义的每个主题，编译为一个 css 文件，开发时位于 node_modules/.plugin-theme/theme 目录下，发布时位于 theme 目录下，每个主题文件编译都需要几秒钟，所以主题多了编译时间会比较慢，后面会讲怎么解决这个问题。
关于插件的使用，umi3 对于 umi-plugin 开头的插件是自动加载的，不需定义在 config 文件的 plugins 中，如果看到一些老的教程不要感到困惑。

好了，有了主题文件，接下来要解决怎么应用主题，其实很简单，就是重新加载新的 css 文件。antd pro 官方给了参考例子，也可以参考 SettingDrawer 源代码。

# 解决主题编译慢问题

开发期每次都编译主题是难以忍受的，所以我的办法是开发器能够配置是否编译主题，而发布时总是编译主题。可惜 unm-plugin-antd-theme 插件本身并没有提供这种配置能力。好在 umi 的扩展能力非常强，我写了一个插件来解决这个问题，其实非常简单，代码只有几行，插件名 umi-plugin-config。

也可以使用 umi 禁用插件的方法， unm-plugin-antd-theme 插件插件的 key 为 antdTheme，修改 config 文件如下：

‘’ ‘’

import { defineConfig } from 'umi';
const { REACT_APP_ENV } = process.env;
export default defineConfig({
	...
	antdTheme: REACT_APP_ENV !== 'dev',
 	...
});

# 主题配件文件优化

unm-plugin-antd-theme 插件的配置文件为 json 格式，很不方便，一来不好加入注释，二来不好共享一些变量，毕竟多个主题有一些一样的成分。为了解决这个问题，还是用到 umi 插件的扩展能力，在插件中将 js 定义转换为 json 定义，详见上述 umi-plugin-config 插件。

通过例子说明这样做的好处。你是否还记得默认的亮色主题没有编译为单独的主题 css，那么所有主题统一修改的变量如果做呢。

默认的主题还是可以通过 umi 的配置文件的 theme 配置：

theme.js theme.js

export default {
	...
  	"@font-size-base": "12px",
  	"@table-padding-vertical": "10px",
 	 "@link-color": "#0070cc",
 	 ...
};

config.ts config.ts

import { defineConfig } from 'umi';
import theme from './theme';
const { REACT_APP_ENV } = process.env;
export default defineConfig({
	...
    	theme,
	...
});

然后其他主题就需要在 unm-plugin-antd-theme 插件的 json 配置文件中，每个主题的 modifyVars 中都要加入，本文一开始已经给出了例子。

显而易见上面的统一变量修改需要烦人的重复，将 json 改成 js 后就能完美解决这个问题，theme.config.json 会变成如下，需要使用 CommonJS 规范定义模块：

‘’ ‘’

const theme = require('./theme').default;
module.exports = {
  "theme": [
    {
      "key": "dark",
      "theme": "dark",
      "fileName": "dark.css",
      "modifyVars": {
        ...theme
      }
    },   
    {
      "key": "volcano",
      "fileName": "volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C",
        ...theme
      }
    },
    {
      "key": "volcano",
      "theme": "dark",
      "fileName": "dark-volcano.css",
      "modifyVars": {
        "@primary-color": "#FA541C",
        ...theme
      }
    }
  ],
  "min": true, 
  "isModule": true, 
  "ignoreAntd": false, 
  "ignoreProLayout": false, 
  "cache": true 
};

这样就可以将统一的变量修改复用起来。umi-plugin-config 插件检测到 theme.config.js 文件就会自动转换为 theme.config.json 文件。

# 自定义主题注意事项

要支持动态切换主题，需要严格规范样式的定义方式。

不要使用固定的颜色，尽量使用 antd 已有变量，例如 @text-color，表示文字颜色，在亮色和暗黑模式下值是不一样的，antd-pro-merge-less 已经为我们自动处理了，我们只需要使用 @text-color
所有主题统一修改的变量定义在上述 theme.js 中，所有主题复用
主题不一样的变量修改在各自的配置中定义
所有主题统一修改的样式定义在 global.less 文件中，需要设置最高优先级
所有主题用的同一个变量但是值不一样（亮色和暗黑不一样），定义在组件 less 中，需要使用:global
如果无法通过 less 定义样式，可以通过 settings 获取主题后动态设置行内样式

# 启动项目失败

# Node 版本问题

这是因为安装 node 的版本过高导致项目无法正常启动
在项目中的 package.json 中，修改 dev 启动命令：

"scripts": {
    "analyze": "cross-env ANALYZE=1 umi build",
    "build": "umi build",
    "deploy": "npm run build && npm run gh-pages",
    "dev": "set NODE_OPTIONS=--openssl-legacy-provider && npm run start:dev",
    ...

如果遇到这种问题，推荐使用：

* Webpack █████████████████████████ building (10%)


node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at BulkUpdateDecorator.hashFactory (C:\Users\litianhao\Desktop\公司项目\fte_manage_antd\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:184161:18)
    at BulkUpdateDecorator.update (C:\Users\litianhao\Desktop\公司项目\fte_manage_antd\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:184062:50)
    at C:\Users\litianhao\Desktop\公司项目\fte_manage_antd\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:107101:9
    at C:\Users\litianhao\Desktop\公司项目\fte_manage_antd\node_modules\@umijs\deps\compiled\webpack\5\bundle5.js:33829:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.14.1
Done in 7.59s.

# Cannot find module ‘umi-build-dev/lib/routes

确认安装的 Umi 版本是否正确：首先，检查项目中 package.json 文件中的 umi 的版本号是否正确，确保版本号与项目所需的版本一致。
清除缓存并重新安装依赖：可以尝试使用以下命令清除 npm 缓存并重新安装依赖：
''
1
2
npm cache clean --force
npm install
确认 umi-build-dev 模块是否存在：在项目目录中，检查 node_modules 目录下是否存在 umi-build-dev 模块。如果不存在，可能是安装过程中出现了问题，可以尝试重新安装依赖。
更新 umi-build-dev 模块：如果 umi-build-dev 模块已经存在，但仍然出现错误，可以尝试更新该模块。使用以下命令更新 umi-build-dev 模块：

1	npm update umi-build-dev

或者使用 yarn 的命令：

1	yarn upgrade umi-build-dev

5. 如果以上方法仍然无法解决问题，可以尝试删除整个 node_modules 目录，并重新安装依赖。
如果问题仍然存在，可以查看 Umi 的官方文档、搜索相关问题的解决方案，或者在开发社区进行提问，以获取更准确的解决方法。

Step.3 界面显示

2023-10-12

Shona主题 & markdown使用手册

🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

# 首页置顶文章

在文章的 Front Matter 设置 sticky: true ，则该文章将显示在首页最上方的 置顶文章 列。
多篇文章按照发布时间倒序排列，不分页。

---
title: 置顶文章
sticky: true
---

# 首页精选分类

想要在首页显示分类翻转块，需要按照以下示例的方式，给需要显示的分类加上封面图。

首先，修改站点配置：
找到 category_map: ，配置每个分类对应的英文映射，比如：

category_map:
  计算机科学: computer-science
  Java: java
  C++: cpp
  二进制杂谈: note
  计算机程序设计（C++）-西安交通大学: course-1
  零基础学Java语言-浙江大学-翁恺: course-1
  面向对象程序设计-Java语言-浙江大学-翁恺: course-2

注意：hexo 会自动处理路径中的特殊字符，~`!@#$%^&*()-_+={}|\;:"'<>,.? 以及空格，这些全部会被替换成 -
所以避免在设置中使用上述字符，否则可导致无法抓取到目录下的 cover.jpg

在 <root>/source/_posts 文件夹相应的目录里，存放封面图
例子：如第 1 周计算这篇文章。
所处的分类是
1
2
categories:
- [计算机科学, Java, 零基础学Java语言-浙江大学-翁恺]
现在需要在首页显示 零基础学Java语言-浙江大学-翁恺 这个分类，翻转卡片后，显示这个分类下的文章们。
而该分类经过英文映射，它的路径将是 /computer-science/java/course-1/ 。
那么，请在 <root>/source/_posts/computer-science/java/course-1/ 的目录下放置 cover.jpg 文件。
只要 分类路径 对应的目录下存在 cover.jpg 文件，这个分类就会在首页显示。
在进行 hexo g 时，本分类的封面图会自动被复制到 public 目录里相应的位置。
事实上，为了方便文章管理，这个分类下所有文章的 md 文件，我都会放在 <root>/source/_posts/computer-science/java/course-1/ 这个目录下。
且站点配置文件里，永久链接设置如下
1
permalink: :title/
hexo g 后，文章的 html 文件们将全部生成到 <root>/public/computer-science/java/course-1/ 目录。
具体可以查看本博客的 github 仓库。
文章详情界面中的 系列文章 ，显示的是与当前文章同一分类的其他文章，并按照文章名正序排序。

o (*￣▽￣*) ゞ
其实，不设置 category_map 也可以，只要在分类路径对应的文件夹下存在 cover.jpg 文件就行。
现在，这项功能与 category_dir 的配置也无关， hexo g 生成后，图片会自动被转移到 category_dir 的相关子目录下。

# 文章封面图

如果文章的 Front Matter 设置了 cover: image path ，则封面会显示这张图片。
举个栗子
1
2
3
4
5
title: Images
cover: assets/wallpaper-2572384.jpg
# 或者写成
cover: http://placehold.it/350x150.jpg
---
这里 cover 的值可以是位于 source 目录里的图片文件，此处是 <root>/source/assets/wallpaper-2572384.jpg 文件，也可以是一个某网址。
如果文章是一个 gallery post ，即 Front Matter 设置了 photos ，则会封面会显示设置的第一张图片。
举个栗子
1
2
3
4
5
6
7
title: Gallery Post
photos:
- assets/wallpaper-2572384.jpg
- assets/wallpaper-2311325.jpg
- assets/wallpaper-878514.jpg
- http://placehold.it/350x150.jpg
---
此时默认会显示第一个图片，即位于 <root>/source/assets/ 目录里的 wallpaper-2572384.jpg 。
如果站点配置中设置了 post_asset_folder: true ，那么上述本地图片路径应为 <root>/source/_posts/文章同名的文件夹/assets/wallpaper-2572384.jpg ，当然此时 assets 目录可以省掉。
如果以上设置均不存在，将显示一张随机图片，随机图库配置戳此。

# 图片展示与相册

在文章的 Front Matter 设置 fancybox: false ，可以关闭文章页的图片展示功能。
使用 Justified-Gallery 对 Gallery Post 内图案进行排列。

下面介绍一些小技巧：

让图案下方显示 title 的 markdown 代码

1	![这里是alt](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "这里是title")

设置图片的大小

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度和高度"){height="100px" width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定宽度"){width="400px"}

![](https://tva3.sinaimg.cn/large/6833939bly1gicis081o9j20zk0m8dmr.jpg "定义图片大小-固定高度"){height="100px"}

除了在 Front Matter 里配置 photos 可以显示相册图案列表外，还可以这样写

## 图案列表No.1
![](https://tva3.sinaimg.cn/large/6833939bly1giclfdu6exj20zk0m87hw.jpg "这里是title")
![](https://tva3.sinaimg.cn/large/6833939bly1giclflwv2aj20zk0m84qp.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclg5ms2rj20zk0m8u0x.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclhnx9glj20zk0m8npd.jpg)
{.gallery}

## 图案列表No.2
![](https://tva3.sinaimg.cn/large/6833939bly1gicitht3xtj20zk0m8k5v.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1giclil3m4ej20zk0m8tn8.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gicljgocqbj20zk0m8e81.jpg)
![](https://tva3.sinaimg.cn/large/6833939bly1gipetfk5zwj20zk0m8e81.jpg)
{.gallery data-height="120"}

data-height 用来设置每行的高度，默认为 220

# 图案列表 No.1

# 图案列表 No.2

# 自定义页面配色

主题配色全部在 <root>/themes/shoka/source/css/_colors.styl 文件中，可以自行查看。

在 <root>/source/_data/ 目录新建文件 colors.styl ，在此文件中添改样式。

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

主题支持在 <root>/source/_data/ 目录建立三个自定义 styl 文件：

自定义文件名	对应默认样式文件	样式功能
`colors.styl`	`_colors.styl`	页面配色
`iconfont.styl`	`_iconfont.styl`	图标样式
`custom.styl`	-	任意自定义样式

# 自定义主题图片

如果想要修改主题的 <root>/themes/shoka/source/images/ 目录内的某张图片，请在 <root>/source/_data/ 目录新建目录 images ，并在这个文件夹中添加同名文件，部署时将自动覆盖主题内的默认图片。

可以用此方法自定义头像、打赏二维码等图片，并且避免覆盖更新主题时遗失自定义文件。

# 自定义语言包

本功能参考 NexT，主要可以用来定义菜单等处显示的文字，且可以方便主题无脑覆盖升级。

在 <root>/source/_data/ 目录新建文件 languages.yml 。

按照以下格式添加配置项：

# language
zh-CN:
  # items
  post:
    copyright:
      # the translation you perfer
      author: 本文博主
en:
  menu:
    travellings: Travellings

可以参考主题目录下的 example/source/_data 文件夹。

站点配置及文件的 Front Matter 中， language 项只支持 zh-CN 、 zh-HK 、 zh-TW 、 ja 、 en 。
类似写成 zh_CN 这样是不可以的。

Step.1 依赖插件

2023-10-08

Shona主题 & markdown使用手册

🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

请务必将 hexo-renderer-multi-markdown-it 升级到最新版，目前为 0.1.5

Theme Shoka 依赖以下 Hexo 插件

插件名称	npm 地址	功能	依赖程度
hexo-renderer-multi-markdown-it	链接	md 文件渲染器，压缩 css/js/html	必需
hexo-autoprefixer	链接	给生成的 css 文件们添加浏览器前缀	必需
hexo-algoliasearch	链接	站内搜索功能	搜索按钮失灵
hexo-symbols-count-time	链接	文章或站点字数及阅读时间统计	统计没有
hexo-feed	链接	生成 Feed 文件	Feed 文件没有

没有正确安装以上插件的话，本主题会报错 or 无法正确显示 or 部分功能失效。
hexo-renderer-multi-markdown-it 请注意升级到最新版

安装完以上插件后，修改站点配置文件，加入相关配置。

# multi-markdown-it 安装与配置

# 安装

安装前，记得务必卸载掉默认的 hexo-renderer-marked ，以及别的 markdown 文件渲染器。
1
2
3
npm un hexo-renderer-marked --save
# 或者
yarn remove hexo-renderer-marked

安装

1
2
3

npm i hexo-renderer-multi-markdown-it --save
# 或者
yarn add hexo-renderer-multi-markdown-it

如果安装缓慢，或者失败
如报错
1
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
因为有一步需要下载 puppeteer 里的 Chromium 内核，基于天朝内部网络现状，这一步能不能成功要靠科学和运气，所以为了避免安装失败，需要加上 --ignore-scripts 跳过 Chromium 内核的下载。
1
2
3
npm i hexo-renderer-multi-markdown-it --save --ignore-scripts
# 或者
yarn add hexo-renderer-multi-markdown-it --ignore-scripts
puppeteer 主要是用来渲染 mermaid 流程图，只要文章中不使用 mermaid 就没有任何问题，如果要使用 mermaid 建议还是想办法完全安装。

# 配置

加入 markdown 配置，用来渲染 md 文件

markdown:
  render: # 渲染器设置
    html: false # 过滤 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: "你知道得太多了"

加入 minify 配置，压缩 css/js/html

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
    output:
    compress:
    exclude:
      - '**/*.min.js'

停用默认代码高亮功能，否则代码块的 mac 样式不能正常显示。
找到 highlight 和 prismjs ，把 enable 改成 false 。

highlight:
  enable: false

prismjs:
  enable: false

# autoprefixer 配置建议

1
2
3

autoprefixer:
  exclude:
    - '*.min.css'

缺少这个插件，首页卡片翻转效果在部分浏览器中无法正确显示。

# algolia 配置建议

algolia:
  appId: #Your appId
  apiKey: #Your apiKey
  adminApiKey: #Your adminApiKey
  chunkSize: 5000
  indexName: #"shoka"
  fields:
    - title #必须配置
    - path #必须配置
    - categories #推荐配置
    - content:strip:truncate,0,2000
    - gallery
    - photos
    - tags

# feed 配置建议

keywords: #站点关键词，用“,”分隔

feed:
    limit: 20
    order_by: "-date"
    tag_dir: false
    category_dir: false
    rss:
        enable: true
        template: "themes/shoka/layout/_alternate/rss.ejs"
        output: "rss.xml"
    atom:
        enable: true
        template: "themes/shoka/layout/_alternate/atom.ejs"
        output: "atom.xml"
    jsonFeed:
        enable: true
        template: "themes/shoka/layout/_alternate/json.ejs"
        output: "feed.json"

Nodejs项目资源包

2023-10-04

项目压缩资源列表下载

Hexo主题Shoka & multi-markdown-it渲染器使用说明

2023-10-01

计算机科学►Shona主题 & markdown使用手册►Theme Shoka Documentation

跳票 N 久终于更新的简单的使用说明

hexo-theme-shoka ：本博客自用的主题
hexo-renderer-multi-markdown-it：配套的 markdown 渲染器

已经支持 hexo 5。

因博主被学业和工作掏空，本项目已停滞更新大半年，问题也无法及时回复大家，这个悲惨状态可能还要持续半年的样子。

有很多热心小伙伴在评论区或者项目 issue 帮忙回答问题，非常非常感谢！

本项目是完全开源的，也有做一些 example 示例，大家可以随便拿随便改。
但是很抱歉，博主我暂时不能提供更多的支持，这个写的乱七八糟的文档，暂时也没有时间把它写得更专业一些。
非常对不住大家！

iconfont 的添加申请，我看到留言后会尽快加上，希望各位小伙伴能看到。

当前版本更新至 0.2.5，更新记录点此

🚀快速开始 - 💌依赖插件 - 📌基本配置 - 🌈界面显示 - 🦄特殊功能

# 设计缘由

前几年在 Bear 和 Evernote 上整理了大量笔记，非常喜欢 Bear 默认的 markdown 渲染样式。
后来因为换了安卓手机，用不了 Bear，四处搜寻替代品，没有满意的。
然后阴差阳错知道了 Hexo，又得知 Github 也可以免费建私有仓库了，故再次转移阵地到了自建博客，并部署在 Github Pages。

因为这个博客是用来记笔记的，故起名 书架 。
对应的主题即 Theme.Shoka ，可以说是为了笔记阅读而生的主题。
样式严重参考 Bear，部分代码严重参考 NexT。

Hexo 的默认及常用渲染器均使用 highlight.js 进行代码高亮，而我喜欢 Prism.js ，故重写了一个渲染器配合主题食用。
渲染器取名 multi ，因为集成了很多很多很多 markdown-it 插件，以及压缩静态文件的功能。
（最新版的默认渲染器也支持 Prism.js 了，可喜可贺，但不想用，哈哈哈哈哈哈哈

墙内 Github Pages 访问速度时而感人，所以用了 jsDelivr 加速，主要是因为它可以按需合并依赖文件。

# 快速安装

1 2	# cd your-blog git clone https://github.com/amehime/hexo-theme-shoka.git ./themes/shoka

打开主题目录，内有 example 文件夹，提供了配置文件的 demo 供参考。

# 安装依赖插件

在应用主题之前，必须至少安装 hexo-renderer-multi-markdown-it 渲染插件和 hexo-autoprefixer。

插件安装与配置教程戳此

# 应用主题

# 修改站点配置

修改站点配置文件 <root>/_config.yml ，把主题改为 shoka

1	theme: shoka

# 修改主题配置

主题配置的所有参数在 <root>/themes/shoka/_config.yml 文件中。

为了方便主题升级，请在根目录新建一个 yml 文件，命名为 _config.shoka.yml 。
也就是说，所有主题的自定义配置均保存于 <root>/_config.shoka.yml 文件。

主题的基础配置可以参考这里
 界面显示相关的配置参考这里

# 更新记录

标签含义：
❗ 需要手动操作的更新信息
⚠️ 需要注意的更新信息
🔧 已修复的问题
⌛ TODO

# 0.2.4 👉 0.2.5

💡 避免直接修改主题文件，添加各种自定义：

样式：包括配色、icon、其他自定义样式
图片：包括主题图片、随机图库

🔧 修复一些 BUG

# 0.2.3 👉 0.2.4

⚠️ 评论功能更新

MiniValine 魔改版更新至 beta10，修改过主题默认 _config.yml 的同学，记得更新末尾的 vendors 到最新哦
❗ 评论相关的配置有更新，配置戳此
- 主要增加的 Tag 配置，现在可以各种自定义啦

⚠️ 配置新增

夜间模式 darkmode ，配置戳此
自动定位 auto_scroll ，配置戳此
图床 API 设置 image_server ，配置戳此

⚠️ 背景音乐功能增强，配置戳此

可以添加多个播放列表
加了一些控制按钮

⚠️ 增加 media 标签，在文章中插入音频和视频播放列表，方法戳此
⌛ 视频播放器有待增强（显示分段标签，字幕）

🔧 随机图库支持非渣浪图床的任意图片
🔧 还有许多小 BUG

# 0.2.2 👉 0.2.3

❗ 增加主题文件外自定义语言包的功能，配置戳此
🔧 提高低版本浏览器兼容性

# 0.2.1 👉 0.2.2

⚠️ 弃用 mediumzoom ，改成 fancybox ，配置戳此
💡 增加语言包： 繁体中文 和 日语
💡 quiz 功能优化，根据语言显示题型标签
🔧 修复评论功能中反复初始化 leancloud-storage
🔧 修复 audio: false 时不能隐藏播放按钮、停止播放

# 0.2 👉 0.2.1

⚠️ 配置文件添加 loader 参数，配置戳此
💡 二级 list 区别显示
🔧 修复浏览位置定位 BUG
🔧 修复 firework 动画延迟
🔧 优化评论功能

# 0.1.9 👉 0.2

⚠️ 评论功能大改

弃用不开源的 Valine，改用 MiniValine，并且进行了魔改，项目戳此
主要是大量压缩了代码，弃用一些花里胡哨的功能，又加了一些别的花里胡哨的功能。
为防止泄露用户邮箱、IP 等隐私信息，弃用 QQ 号获取昵称及头像。
❗ 同时需要手动进行一些迁移，具体步骤戳此
❗ 评论相关的配置亦有更新，配置戳此

⚠️ 增加单击页面烟花效果，配置戳此
💡 弃用 Velocity，改用 anime.js，方便未来添加更多花里胡哨的功能严重拖慢页面滑行速度
🔧 新增多枚 icon，包括豆瓣 i-douban 等
🔧 一些显示问题

→ 查看更多

Web Developer

开发环境

企业文化

休闲时光

画廊

中文标题一

中文标题二

中文标题三

中文标题四

中文标题五

中文标题六

客户

案例

新闻

# 站点别称

# 静态文件目录

# 夜间模式

# 自动定位

# 加载动画

# 页面特效

# 加载谷歌字体

# iconfont 图标

# 菜单与社交按钮

# 边栏配置

# 底部 widgets

# 字数及阅读时间统计

# 文章评论

# 背景音乐

# 随机图库

# 加载第三方组件

# Node 安装

# npm 安装

# yarn 安装

# cnpm 安装

# Umi 安装

# 开发

# start

# build

# analyze

# lint

# lint:fix

# i18n-remove

# 自定义主题样式

# 动态主题切换原理

# 解决主题编译慢问题

# 主题配件文件优化

# 自定义主题注意事项

# 启动项目失败

# Node 版本问题

# Cannot find module ‘umi-build-dev/lib/routes

# 首页置顶文章

# 首页精选分类

# 文章封面图

# 图片展示与相册

# 图案列表 No.1

# 图案列表 No.2

# 自定义页面配色

# 自定义主题图片

# 自定义语言包

# multi-markdown-it 安装与配置

# 安装

# 配置

# autoprefixer 配置建议

# algolia 配置建议

# feed 配置建议

# 设计缘由

# 快速安装

# 安装依赖插件

# 应用主题

# 修改站点配置

# 修改主题配置

# 更新记录

# 0.2.4 👉 0.2.5

# 0.2.3 👉 0.2.4

# 0.2.2 👉 0.2.3

# 0.2.1 👉 0.2.2

# 0.2 👉 0.2.1

# 0.1.9 👉 0.2

# `iconfont` 图标