本站Hexo博客对NexT主题完整定制指南

发表于 分类于 阅读次数： 评论数：
完整记录本站对 NexT 主题的样式定制，包含字体、背景、卡片圆角、侧边栏、评论区等所有自定义细节

前言

这篇文章完整记录本站对 NexT 主题的样式定制，所有改动集中在 source/_data/styles.styl，零侵入主题源码，升级主题不会丢失自定义样式。
所有改动借助AI的力量~

定制目标总览

这篇文章完整记录本站对 NexT 主题的样式定制，所有改动集中在 source/_data/styles.styl，零侵入主题源码，升级安全；样式说明已在文末合并为单一代码块并以内联注释呈现。

环境与依赖

运行栈：
• Hexo 8.0.0 （主博客框架）
• NexT 8.25.0（Scheme: Gemini）
• Node.js ≥ 18.x（建议，提升构建性能与兼容性）
• hexo-renderer-stylus 3.0.1（启用 Stylus 处理自定义样式）

主要插件：
• hexo-generator-searchdb – 本地搜索索引
• hexo-abbrlink – 永久短链接生成

资源目录约定：
• 字体：source/fonts/
• 图片：source/images/
• 自定义样式入口：source/_data/styles.styl

核心理念

• 零侵入：不改主题源码，升级无痛。
• 单入口：所有自定义集中一个 Styles 文件，统一维护。
• 自描述：注释同步记录“目的 + 原则 + 修改点”。
• 变量化：圆角 / 阴影 / 字体集中可调，快速换肤。

快速上手

复制配置 → 安装依赖 → 放置资源 → 调整变量 → 本地预览 → 部署。若需深色模式或主题切换，可在末尾新增变量组并通过条件类名切换。

常见问题

样式不生效：确认 custom_file_path.style；清缓存；观察优先级。搜索空白：插件未安装或未生成索引。阴影/圆角失效：被主题层级覆盖，提升选择器或追加 !important。

全量自定义样式 (styles.styl)

点击展开 / 折叠：styles.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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
// ============================================================
// 设计系统变量（统一调整视觉基线）
// ============================================================
fontStack     = 'HYRunYuan', 'PingFang SC', 'Microsoft YaHei', sans-serif  // 字体栈：首选自定义，其次系统
radius        = 12px                                                       // 全局圆角半径
shadow        = 0 4px 14px rgba(0,0,0,.08)                                  // 默认卡片阴影（柔和）
shadowHover   = 0 10px 24px rgba(0,0,0,.12)                                 // Hover 阶段提升阴影层级

// ============================================================
// 字体引入（避免闪烁：使用 font-display swap）
// ============================================================
@font-face
  font-family 'HYRunYuan'
  src url('/fonts/HYRunYuan.woff2') format('woff2')
  font-weight normal
  font-style normal
  font-display swap

// 全局字体应用（含标题、正文、表单、摘要、元信息）
html, body, .menu, input, button, select, textarea,
.post-title, .site-title, h1, h2, h3, h4, h5, h6,
.posts-expand .post-excerpt, .post-excerpt, .posts-expand .post-body,
.post-body, .posts-expand .post-meta, .post-meta
  font-family fontStack

// ============================================================
// 背景：牛皮纸底色 + 轻量 SVG 纹理（Data URI 避免额外请求）
// ============================================================
body
  background-color #e0d8c0
  background-image url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><defs><pattern id='p' width='60' height='60' patternUnits='userSpaceOnUse'><circle cx='5' cy='5' r='1' fill='%23000000' fill-opacity='0.06'/><circle cx='25' cy='15' r='0.8' fill='%23000000' fill-opacity='0.05'/><circle cx='45' cy='35' r='1' fill='%23000000' fill-opacity='0.05'/><circle cx='15' cy='45' r='0.7' fill='%23000000' fill-opacity='0.04'/></pattern></defs><rect width='100%' height='100%' fill='url(%23p)'/></svg>")
  background-repeat repeat
  background-attachment fixed

// ============================================================
// 卡片化：文章 / 页面块 / 侧边栏部件 + 标题区背景图
// ============================================================
.posts-expand .post-block,
.page .post-block,
.post-block,
.sidebar-inner .widget,
.sidebar-inner .sidebar-panel
  background #fff
  box-shadow shadow
  overflow hidden
  transition box-shadow .2s ease, transform .2s ease
  &:hover
    box-shadow shadowHover

.header-inner,
.site-brand-container
  background #fff url('/images/header-bg.jpg') center / cover no-repeat
  box-shadow shadow
  overflow hidden

.headband
  display none // 去除顶部细线

// ============================================================
// 响应式布局：桌面留白 / 移动贴边 + 标题区圆角差异
// ============================================================
@media (min-width: 768px)
  .header-inner,
  .site-brand-container,
  .posts-expand,
  .main-inner.archive,
  .main-inner.category,
  .main-inner.tag,
  .main-inner.page,
  .posts-collapse
    margin-top 20px

@media (max-width: 767px)
  .header-inner,
  .site-brand-container,
  .posts-expand,
  .main-inner.archive,
  .main-inner.category,
  .main-inner.tag,
  .main-inner.page,
  .posts-collapse
    margin-top 0
  .header-inner,
  .site-brand-container
    border-radius 0 0 radius radius !important // 上直角，下圆角

// ============================================================
// 分页组件：按钮化（可触控优先）
// ============================================================
.pagination
  background transparent
  box-shadow none
  text-align center
  margin-top 20px
.pagination.animated.fadeIn
  background transparent !important
  box-shadow none !important
.pagination .page-number,
.pagination .extend,
.pagination .space
  display inline-flex
  align-items center
  justify-content center
  min-width 38px
  height 36px
  padding 0 14px
  margin 0 4px
  border 1px solid rgba(0,0,0,.08)
  border-radius 8px !important
  background-color transparent
  color #333
  transition all .2s ease
.pagination .page-number:hover,
.pagination .extend:hover
  background rgba(0,0,0,.06)
  border-color rgba(0,0,0,.12)
.pagination .page-number.current
  background rgba(0,0,0,.08)
  border-color rgba(0,0,0,.18)
  color #111
  font-weight 600

// ============================================================
// 文章信息块：元信息 / 标题 / 摘要 / 按钮 + 紧凑间距
// ============================================================
.posts-expand .post-meta
  color #999
  font-size 13px
  display flex
  flex-wrap wrap
  gap 10px
  justify-content flex-start
.post-meta-item--update,
.post-meta-item--updated,
time[itemprop='dateModified']
  display none !important // 隐藏更新时间
.posts-expand .post-title
  text-align left
  font-size 22px
  font-weight 600
  margin-top 8px
  transition color .2s ease
  a
    color inherit
    &:hover
      color #111
.main-inner.post .post-title
  font-size 28px // 详情页放大
.posts-expand .post-excerpt,
.post-excerpt
  font-size 15px
  line-height 1.7
  color #888
  overflow visible
  display block
  -webkit-line-clamp unset
  max-height none
  text-overflow clip
.posts-expand .post-button
  display flex
  justify-content flex-end
  margin-top 12px
.posts-expand .post-button .btn
  border-radius 8px !important
  padding 6px 14px
// 紧凑布局微调
.posts-expand .post-block
  padding 20px 24px
.posts-expand .post-header
  margin-bottom 8px
.posts-expand .post-title
  margin 0 0 6px
.posts-expand .post-meta
  margin 0 0 6px
  line-height 1.4
.posts-expand .post-body
  margin-top 6px
.posts-expand .post-excerpt
  margin 6px 0 10px
  line-height 1.6
  color #888
.posts-expand .post-excerpt p
  margin 0
.posts-expand .post-button
  margin-top 8px

// ============================================================
// 前后导航：方向清晰的两端对齐
// ============================================================
.post-nav
  display flex
  justify-content space-between
  gap 20px
.post-nav .post-nav-prev
  text-align left
.post-nav .post-nav-next
  text-align right

// ============================================================
// 搜索弹窗：移动端非全屏居中
// ============================================================
.search-pop-overlay
  display flex
  align-items center
  justify-content center
.search-popup
  width 90vw
  max-width 600px
  height 80vh
  max-height 80vh
  border-radius radius !important
  margin 10vh auto
  top auto
  left auto
  right auto
  bottom auto
  overflow auto
  -ms-overflow-style none
  scrollbar-width none
  &::-webkit-scrollbar
    width 0
    height 0

// ============================================================
// 侧边栏：作者区与目录区差异圆角策略
// ============================================================
.header-inner,
.site-brand-container,
.site-nav,
.posts-expand .post-block,
.page .post-block,
.post-block,
.sidebar-inner .widget
  border-radius radius !important
  overflow hidden
  background-clip padding-box
.sidebar-inner .site-overview-wrap.sidebar-panel
  background transparent !important
  box-shadow none !important
.sidebar-inner .site-overview-wrap.sidebar-panel > .site-author
  background #fff
  border-radius 12px 12px 0 0
  padding 20px
  overflow hidden
.sidebar-inner .post-toc-wrap.sidebar-panel
  border-radius 0 !important
  background #fff
  box-shadow none !important
  background-clip padding-box
  outline none
.sidebar-inner .post-toc-wrap,
.sidebar-inner .post-toc,
.sidebar-inner .post-toc .nav,
.sidebar-inner .post-toc .nav > li,
.sidebar-inner .post-toc a
  text-align left
  display block
@media (max-width: 991px)
  .sidebar
    background #fff
    border-radius radius !important
    overflow hidden
    box-shadow shadow
  .sidebar-panel-container
    background transparent
.sidebar-inner.sidebar-overview-active,
.sidebar-inner.sidebar-nav-active,
.sidebar-inner.sidebar-toc-active
  border-radius radius !important
  background #fff
  box-shadow shadow
  overflow hidden
  background-clip padding-box
.sidebar-toggle,
.back-to-top
  border-radius radius !important
  overflow hidden

// ============================================================
// 评论区：统一圆角与裁剪策略
// ============================================================
.comments,
.comments.animated.fadeIn
  border-radius radius !important
  overflow hidden
  background-clip padding-box

// ================= END styles.styl ===========================

文件清单与资源准备

完成本站样式定制需要准备以下文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
myblog/
├── _config.next.yml                    # NexT 主题配置文件
├── _config.yml                         # Hexo 站点配置文件
├── package.json                        # 依赖管理
├── source/
│   ├── _data/
│   │   └── styles.styl                 # 自定义样式（核心文件）
│   ├── fonts/
│   │   └── HYRunYuan.woff2             # 自定义字体
│   ├── images/
│   │   ├── header-bg.jpg               # 标题区背景图
│   │   ├── avatar.png                  # 作者头像
│   │   ├── favicon-16x16-next.ico      # 16×16 Favicon
│   │   ├── favicon-32x32-next.ico      # 32×32 Favicon
│   │   ├── apple-touch-icon.png        # iOS 图标
│   │   └── favicon.svg                 # Safari 固定标签图标
│   └── _posts/
│       └── *.md                        # 文章 Markdown 文件
└── themes/
    └── next/                           # NexT 主题目录（不建议直接修改）

资源准备清单

  1. 自定义字体：

    • 格式：WOFF2（推荐，压缩率高）
    • 路径：source/fonts/HYRunYuan.woff2
    • 获取方式：字体官网或字体转换工具

  2. 背景图：

    • 格式：JPG/PNG/WebP
    • 路径：source/images/header-bg.jpg
    • 尺寸建议：1920×400 像素（宽屏适配）

  3. 头像图片：

    • 格式：PNG/JPG（支持透明背景推荐 PNG）
    • 路径：source/images/avatar.png
    • 尺寸建议：256×256 像素

  4. Favicon 图标：

    • 推荐工具：RealFaviconGenerator
    • 上传一张 PNG/JPG，自动生成多尺寸图标
    • 将生成的文件放入 source/images/ 目录

必装插件列表

在项目根目录执行以下命令安装依赖：

1
2
3
npm install hexo-renderer-stylus --save
npm install hexo-generator-searchdb --save
npm install hexo-abbrlink --save

参考资料

总结

本站样式定制遵循”零侵入”原则，所有修改分为两部分：

样式定制（styles.styl）

  1. 变量化：定义全局变量（字体、圆角、阴影），便于统一调整
  2. 卡片化：统一白底圆角卡片设计，营造现代简洁感
  3. 响应式：桌面端与移动端差异化处理（留白、圆角、弹窗）
  4. 细节优化：分页按钮化、紧凑布局、侧边栏分区圆角

功能配置（_config.next.yml）

  1. 内容增强：本地搜索、标签图标、代码复制按钮
  2. 交互优化：返回顶部、滚动百分比、头像旋转
  3. 视觉统一：Favicon、头像、导航菜单图标

核心优势

  • ✅ 零侵入：不修改主题源码，升级无忧
  • ✅ 可维护：所有自定义集中在两个文件
  • ✅ 可复用：复制 styles.styl 和配置文件即可迁移
  • ✅ 可扩展：基于变量的设计便于后续调整

快速上手指南

  1. 克隆配置：复制本站的 _config.next.yml 和 styles.styl
  2. 安装依赖：运行 npm install 安装必需插件
  3. 准备资源：替换字体、背景图、头像、Favicon
  4. 调整变量：修改 styles.styl 顶部的全局变量（字体、圆角、颜色）
  5. 本地预览：运行 npm run server 查看效果
  6. 构建部署：运行 npm run build 生成静态文件

如有疑问或需要进一步定制，欢迎在评论区留言交流！