搬家到Hexo的记录

发表于 分类于 评论： 阅读次数：

因为之前用WordPress太臃肿了，别说别人访问，连我自己访问和管理都要等系统反应很久。本来还有考虑Typecho和Hugo，但最终选择了Hexo。

所以记录一下在使用Next主题的情况下我进行的比较大的修改，如果你也有类似的需求就可以照着修改了。

-更改网站字体

创建目录my-blog/source/fonts/​ 然后把你要用的字体文件放在这个目录下

创建自定义样式文件（根目录）

在 my-blog/source/_data/​ 目录下创建三个文件：

文件 1：​​variables.styl​

1
2
3
4
5
6
7
8
9
10
11
// 网站标题字体
$font-family-title = "你的字体文件", cursive

// 全局字体（包括正文和标题）
$font-family-base = "你的字体文件", "PingFang SC", "Microsoft YaHei", sans-serif

// 代码字体
$code-font-family = "你的字体文件", Consolas, Monaco, Menlo, monospace

// 字体大小设置
$font-size-base = 16px

文件 2：​​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
/* 手写字体声明 */
@font-face {
  font-family: '你的字体文件';
  src: url('/fonts/你的字体文件.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 思源黑体声明 */
@font-face {
  font-family: '你的字体文件';
  src: url('/fonts/你的字体文件.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

// 添加其他字重（根据你实际拥有的文件）
@font-face {
  font-family: '你的字体文件';
  src: url('/fonts/你的字体文件-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '你的字体文件';
  src: url('/fonts/你的字体文件-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: '你的字体文件';
  src: url('/fonts/你的字体文件-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

// 应用字体
.site-title {
  font-family: $font-family-title !important;
}

body {
  font-family: $font-family-base;
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-family-base;
}

code, pre {
  font-family: $code-font-family;
}

文件3：​head.njk​

1
2
<link rel="preload" href="/fonts/你的字体文件.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/你的字体文件.woff2" as="font" type="font/woff2" crossorigin>

修改主题配置文件themes/next/_config.yml​

找到 custom_file_path​ 部分，取消注释并修改为：

1
2
3
4
5
6
7
8
9
10
11
12
custom_file_path:
  head: source/_data/head.njk  # 取消注释这行
  #header: source/_data/header.njk
  #sidebar: source/_data/sidebar.njk
  #postMeta: source/_data/post-meta.njk
  #postBodyStart: source/_data/post-body-start.njk
  #postBodyEnd: source/_data/post-body-end.njk
  #footer: source/_data/footer.njk
  #bodyEnd: source/_data/body-end.njk
  variable: source/_data/variables.styl  # 取消注释这行
  #mixin: source/_data/mixins.styl
  style: source/_data/styles.styl        # 取消注释这行

找到 font​ 部分，修改为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
font:
  enable: true
  host:   # 留空表示不使用CDN

  # 禁用所有外部字体
  global:
    external: false
    family:  # 留空，使用自定义样式
  title:
    external: false
    family:  # 留空，使用自定义样式
  headings:
    external: false
    family:  # 留空，使用自定义样式
  posts:
    external: false
    family:  # 留空，使用自定义样式
  codes:
    external: false
    family:  # 留空，使用自定义样式

验证字体路径：在浏览器中访问：http://localhost:4000/fonts/你的字体文件.woff2​ 应该能直接下载字体文件

-文章添加精选 缩略图片

现在我使用的Next主题8.23.1版本是不支持头图的，所以我就只能自己添加这些东西

修改themes/next/layout/_macro/post.njk

找到下方代码

1
2
{%- if post.header !== false %}
  <header class="post-header">

在这下面添加。

1
2
3
4
5
6
7
8
9
10
11
    {%- if post.header !== false %}
      <header class="post-header">
  {# ===== 添加精选图代码开始 ===== #}
{% if post.featured_image and is_index %}
  <a href="{{ url_for(post.path) }}" class="featured-image-link">
    <div class="post-featured-image">
      <img src="{{ post.featured_image }}" alt="{{ post.title }}">
    </div>
  </a>
{% endif %}
  {# ===== 添加精选图代码结束 ===== #}

​修改主题配置文件my-blog/source_data/styles.styl​

添加以下CSS 样式

#我上面已经在custom_file_path​ 部分开启了​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
// 精选图链接样式
.featured-image-link {
  display: block;
  text-decoration: none;
  color: transparent;
  transition: all 0.3s ease;

  &:hover, &:focus {
    text-decoration: none;
    outline: none;
  }

  // 继承父容器最大宽度限制
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;

  // 移动端适配
  @media (max-width: 767px) {
    max-width: 100%;
  }
}

// 调整精选图容器样式
.posts-expand .post-header .post-featured-image {
  margin-bottom: 25px;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  position: relative;

  // 添加点击指示器
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.03);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s ease;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}

// 悬停效果转移到链接上
.featured-image-link:hover {
  transform: translateY(-5px);

  .post-featured-image {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);

    &::after {
      opacity: 1;
    }

    img {
      transform: scale(1.03);
    }
  }
}

// 焦点效果
.featured-image-link:focus {
  .post-featured-image {
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
  }
}

// 粘性文章特殊样式
.post-sticky .post-featured-image {
  border: 2px solid #ffc107;

  &::before {
    content: "精选";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ffc107;
    color: #333;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    z-index: 2;
  }
}

// 移动端适配
@media (max-width: 767px) {
  .posts-expand .post-header .post-featured-image {
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

    img {
      aspect-ratio: 4/3;
    }
  }
}

// 响应式高度控制
@media (min-width: 992px) {
  .post-featured-image img {
    max-height: 400px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .post-featured-image img {
    max-height: 320px;
  }
}

@media (max-width: 767px) {
  .post-featured-image img {
    max-height: 240px;
  }
}
// 删除精选图链接下划线
.featured-image-link {
  text-decoration: none !important; // 强制去除下划线
  border: none !important; // 防止边框样式干扰
  outline: none !important; // 去除焦点轮廓

  // 确保没有任何文字装饰
  &:hover, &:focus, &:active, &:visited {
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
  }

  // 防止伪元素干扰
  &::before, &::after {
    content: none !important;
  }
}

// 修复图片底部的额外空间
.post-featured-image {
  line-height: 0; // 消除行高影响
  display: block; // 确保块级显示
}

最后在写文章的时候只要添加这一行就可以了

1
2
3
4
---
title: 缩略图
featured_image: /images/图片.jpg
---

-嵌入B站视频

虽然有很多插件可以支持外部网站的关联，但是我这种需求比较少，所以就选择了手搓

​修改主题配置文件my-blog/source_data/styles.styl​

添加以下CSS 样式

#我上面已经在custom_file_path​ 部分开启了​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
// Bilibili容器样式
.bilibili-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin: 2rem 0;
  background: #f1f2f3; // 加载背景色

  // 使用固定高度代替百分比
  height: 0;
  padding-bottom: 56.25%; // 16:9比例

  // 强制iframe填满整个容器
  iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
  }

  // 隐藏Bilibili添加的多余容器
  .video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

.md的书写格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: B站视频嵌入测试
---

# Bilibili视频嵌入演示

<div class="bilibili-container">
  <iframe 
    src="//player.bilibili.com/player.html?bvid=BV1tb411k7X7&page=1&high_quality=1&autoplay=0"
    frameborder="no" 
    scrolling="no" 
    allowfullscreen="true"
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts allow-popups">
  </iframe>
</div>

参数组合说明

​bvid=BV1tb411k7X7

作用：指定要播放的视频（BV号）

​page=1​

作用：播放视频的第1个分P
效果：对于多P视频有效，单P视频无影响

​high_quality=1​

作用：强制高清播放
效果：通常能提升到720P画质（取决于视频源）

​autoplay=0​

作用：禁止自动播放