Hexo常用命令#
清除缓存
生成主题静态文件：
等价于hexo generate
启动本地服务：
等价于hexo server
部署到GitHub：
在博客根目录下cmd，执行以下命令，创建一篇新文章：
markdown#
示例-网站适配#
Typora中markdown的语法
正常 加粗 斜体 下划线 代码
内联公式：$np$ 删除线 ==高亮文字==
公式块：
$$
x
$$
行内公式：$E = mc^2$
块级公式：
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$
警告框：
[!NOTE]
提醒内容
[!TIP]
建议内容
[!IMPORTANT]
重要内容
[!WARNING]
警告内容
[!CAUTION]
注意内容
引用
脚注：
列表
Math数学公式#
卸载掉 marked 插件，安装 markdown-it
1
2
3
4
5
| npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载
npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件
|
在 hexo 的根目录的 _config.yml 中配置
1
2
3
4
| # markdown配置
markdown:
plugins:
- '@renbaoshuo/markdown-it-katex' # 数学公式插件
|
如需配置其它参数，请参考 katex 官网
文字高亮#
1
2
3
4
5
6
| # markdown配置
markdown:
plugins:
- '@renbaoshuo/markdown-it-katex' # 数学公式插件
- name: markdown-it-mark # 文字高亮插件
enable: true
|
画图Mermaid#
【config.yml】
1
2
3
4
5
6
7
8
| highlight:
enable: true
line_number: false # line_number改成false是开启代码自动换行?
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
exclude_languages: ['mermaid']
|
【config.butterfly.yml】
1
2
3
4
5
6
7
8
| # Mermaid # Mermaid 图表
# https://github.com/mermaid-js/mermaid
mermaid:
enable: true
code_write: true # 使用代码块编写 Mermaid 图表
theme: # built-in themes: default / forest / dark / neutral
light: default
dark: dark
|
参考Markdown常用 | Kkkika
思维导图插件#
hexo-simple-mindmap#
项目相对年久失修，可能存在与新版本Node.js或Hexo的兼容性问题。
1
| npm install hexo-simple-mindmap
|
1
2
3
| {% pullquote mindmap mindmap-md %}
{% endpullquote %}
|
用不了。
如何卸载插件：
卸载包（同时从 package.json 中移除）
1
| npm uninstall hexo-simple-mindmap
|
hexo-markmap#
1
| npm install hexo-markmap
|
在config.yml中添加这段配置：
1
2
3
4
5
6
7
| # 思维导图
hexo_markmap:
darkThemeCssSelector: "[data-theme='dark']" # Butterfly 主题的深色模式标记是 [data-theme='dark']
CDN: 'fastly' # 指定资源CDN: 'fastly', 'jsdelivr', 'unpkg', 'custom'
globalOptions:
colorFreezeLevel: 3 # 冻结颜色级别，此例中前n级节点颜色被固定
color: ['orange'] # 设置颜色数组
|
使用：
1
2
3
| {% markmap %}
{% endmarkmap %}
|
{% markmap %}
大厂怎么做AB测试试验#
第一步：判断测试必要性
不是所有需求都要做 AB 测试，以下三类可以除外：
政策性需求：比如 App 的老龄化改造（放大字体、简化操作），这类是必须上线的。
战略性需求：关注长期收益，不纠结于短期指标。
基础功能配备：完善基本用户路径，没有它用户就无法正常使用。
第二步：确定核心指标
第三步：计算三个前置参数
这是保证测试准确的关键。
预期提升值：结合前期调研（历史数据、竞品分析）设定一个最小预期提升，比如转化率提升5%。
最小样本量：根据指标方差、提升目标和置信度计算。公式为“16×指标方差÷最小预期提升²”。
实验时长：根据样本量和试验通过的比例计算，不能凭经验提前或延后结束。
第四步：配置实验
- 在 AB 平台上均匀分配流量，分组确认无误后上线，避免流量倾斜影响结果。
第五步：数据统计与决策
回收数据后，重点看核心指标和 P 值。
达标：全量上线。
不达标：优化后重新测试。
{% endmarkmap %}
如果想要提前看看，可以用vscode插件Markmap Universe
【设置】【在 settingsjson 中编辑】
1
2
3
4
5
| "markmap-universe.globalOptions": {
"color": [
"orange"
]
}
|
期待上线#
20260608
hexo-mindmap-svg 功能全覆盖测试 | Zerl’TA Blog
样式！！#
样式统一写在index.styl文件
C:\Code\KikaBlog\blog\themes\butterfly\source\css\index.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| if hexo-config('css_prefix')
@import 'nib'
@import '_third-party/normalize.min.css'
// project
@import 'var'
@import '_global/*'
@import '_highlight/highlight'
@import '_page/*'
@import '_layout/*'
@import '_tags/*'
@import '_mode/*'
// search
@import '_search/index'
// ======================================================================================
// 确保图标正常显示
// 全局：设置所有伪元素 :before 使用 FontAwesome 字体
*:before
font-family: FontAwesome !important
// ======================================================================================
// 背景统一半透明
// 文章阅读区域背景
html:not([data-theme='dark']) #post
background: rgba(255, 255, 255, .94)
html:not([data-theme='light']) #post
background: rgba(0, 0, 0, .7)
// 侧栏所有卡片
// 说明：匹配包含 .card-widget 的全部卡片类型
html:not([data-theme='dark']) #aside-content .card-widget
background: rgba(255, 255, 255, .94)
html:not([data-theme='light']) #aside-content .card-widget
background: rgba(0, 0, 0, .7)
// 首页的文章卡片
html:not([data-theme='dark']) #recent-posts .recent-post-item
background: rgba(255, 255, 255, .94)
html:not([data-theme='light']) #recent-posts .recent-post-item
background: rgba(0, 0, 0, .7)
// 卡片（分类页、标签页、链接页）
html:not([data-theme='dark']) #page
background: rgba(255, 255, 255, .94)
html:not([data-theme='light']) #page
background: rgba(0, 0, 0, .7)
// 归档页
html:not([data-theme='dark']) #archive
background: rgba(255, 255, 255, .94)
html:not([data-theme='light']) #archive
background: rgba(0, 0, 0, .7)
// ======================================================================================
// 顶部图片设置透明
// 将文章页头部的背景强制设为透明，避免使用封面图作为背景
#page-header.post-bg
background: transparent !important
// 分类页、标签页、归档页头部
#page-header.not-home-page
background: transparent !important
// ======================================================================================
// 顶部背景设置半透明并去掉黑罩
// 分类页、标签页、归档页头部
// 针对所有非首页的页面头部：去掉黑罩，隐藏了黑罩层
// #page-header.not-home-page
// &:before
// display: none !important
// ======================================================================================
// hexo-blog-encrypt 插件（Hexo 博客的文章加密插件）
// 插件主题修改
.hbe-input-field-blink
color: #d89f68 !important
.hbe-input-field-blink:focus
border-color: #d89f68 !important
.hbe-input-label-content-blink::after
color: #c97d3a !important
.hbe-input-field
margin 6px !important
|
悬浮栏#
https://kika2378.netlify.app/.netlify/functions/twikoo
Twikoo Netlify部署方法及操作流程，给博客网站添加评论功能
Hexo#
包管理器#
如何确定hexo的包管理器
方法1：
在终端运行
1
| ls | Where-Object { $_.Name -match "package-lock|yarn.lock|pnpm-lock" }
|
方法2：
更简单的方法：直接看文件是否存在
1
2
3
| Test-Path package-lock.json # 返回 True 或 False
Test-Path yarn.lock
Test-Path pnpm-lock.yaml
|
哪个返回 True，就是哪个包管理器。
【本博客】看到 package-lock.json → 锁定使用 npm，不要混用其他包管理器，避免 lock 文件冲突。
遇到的问题#
图片路径#
这样是无法显示的：
然后我去GitHub上看了，发现2025/04/11文件夹不存放图片，这一段路径是多余的
然后尝试直接打开图片：
所以，解决方法是去掉 http://localhost:4000/2025/04/11/pic/test1-2.png中的 2025/04/11
是因为我之前把marked插件换成markdown-it所以图片路径才会变吗？？？
修改 loadLightbox 函数
- 文件路径 :
C:\Code\KikaBlog\blog\themes\butterfly\source\js\utils.js - 修改内容 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| // 原代码
loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox
if (service === 'medium_zoom') {
mediumZoom(ele, { background: 'var(--zoom-bg)' })
}
if (service === 'fancybox') {
Array.from(ele).forEach(i => {
if (i.parentNode.tagName !== 'A') {
const dataSrc = i.dataset.lazySrc || i.src
const dataCaption = i.title || i.alt || ''
btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox':
'gallery', 'data-caption': dataCaption,
'data-thumb': dataSrc })
}
})
// 其他代码...
}
}
// 修改后
loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox
if (service === 'medium_zoom') {
mediumZoom(ele, { background: 'var(--zoom-bg)' })
}
if (service === 'fancybox') {
Array.from(ele).forEach(i => {
// 处理图片 src 属性，去除 ./../ 前缀
let imgSrc = i.getAttribute('src') || i.src
if (imgSrc.startsWith('./../')) {
imgSrc = imgSrc.substring(4) // 移除 ./../ 前缀
i.setAttribute('src', imgSrc)
}
if (i.parentNode.tagName !== 'A') {
// 获取原始的相对路径，而不是浏览器解析的绝对路径
let dataSrc = imgSrc
const dataCaption = i.title || i.alt || ''
btf.wrap(i, 'a', { href: dataSrc, 'data-fancybox':
'gallery', 'data-caption': dataCaption,
'data-thumb': dataSrc })
}
})
// 其他代码...
}
}
|
- 原因 :
- 使用
i.getAttribute('src') 获取原始的相对路径，而不是 i.src （浏览器解析的绝对路径，会包含日期前缀） - 去除路径中的
./../ 前缀，使路径更简洁（如将 ./../pic/test1-2.png 改为 pic/test1-2.png ） - 同时更新图片的 src 属性和包裹图片的
<a> 标签的 href 、 data-thumb 属性，确保所有路径都不包含日期前缀