网站基本介绍

我的这个网站是基于Hexo框架，使用的是Hexo上的一款主题：hexo-theme-reimu
然后经过自己的一些修改，成了现在这个样子。
本文主要以hexo-theme-reimu为例进行讲解。
为什么叫从1到2呢？因为从0到1网上已经有很多参考的文章了。
本文主要讲安装完主题后，会遇到的一些问题，以及怎么做一些小小的修改。
毕竟你可能不是对这个主题的每个部分都很喜欢。
有些地方原作者@拔剑Sketon在他的食用指南里有提到
可能会有所重复。

准备工作

首先，打开心爱的vscode，在vscode中打开blog文件夹，然后我们就可以开始了，下面提到的文件除特殊说明外，均指 reimu 里的文件。
温馨提示：文中代码注释我习惯性用//,但是请不要在你的代码里这么写，不然会报错。

头像问题

一开始安装完主题时是没有头像的，此时如果你往themes\reimu\source\images里存入一张图片，然后修改_config.yml文件里的avatar文件名。
那么恭喜你！头像依旧没有显示正确！
avatar: "OIP-C.webp" # source/_data/avatar/avatar.webp
看这段代码的注释，头像应当存放在 source/_data/avatar/ （这里的source是外面的source），如果没有找到对应的文件夹就自己创建。

文章封面的问题

文章存放在 source/_posts目录下，直接举例，新建一个 .md 文件，在开头放入这一段：

1
2
3
4
5
---
title: 从1到2搭建一个自己的博客网站   //这里就是你的标题
cover: /images/p0.webp             //这里就是你的文章封面，放在 themes\reimu\source\images 下
sticky: true                       //这里表示文章置顶
---

about和friend没有任何显示的问题

在_config.yml文件里有这样一段代码：

1
2
3
4
5
menu:
  Home: /
  Archives: /archives
  About: /About
  Friend: /Friend

所以我们只需在source（外面那个）下新建一个 About.md文件，然后输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
---
title: 
date: 2024-11-29 12:00:00
type: "page" # 这将帮助Hexo识别页面类型
comments: true # 如果你希望关于页面有评论功能，设置为true
---

# 作者简介
- ~~来自某著名末流985大学软件学院~~
- 邮箱：2726688921@qq.com
-       13060626770@163.com
- 立志做一个全栈~~牛马~~工程师

Friend界面同理

如何修改顶部导航栏和侧边导航栏

先说说侧边导航栏的位置问题：
在_config.yml下搜索 sidebar ，把它的值修改为 left 导航栏就会显示在左边。

侧边栏的样式修改问题：
找到这个文件：themes\reimu\layout_partial\sidebar\common-sidebar.ejs 最后一段代码是这样的：

1
2
3
4
5
6
7
8
9
<div class="sidebar-menu">
  <% for (var i in theme.menu) { %>
    <div class="sidebar-menu-link-wrap">
      <a class="sidebar-menu-link-dummy" href="<%- url_for(theme.menu[i]) %>" aria-label="<%= __(i) %>"></a>
      <!--<div class="sidebar-menu-icon icon-taichi"></div>-->  //这一行是那个太极图像，我不喜欢，所以注释掉了，你也可以换成别的
      <div class="sidebar-menu-link"><%= __(i) %></div>
    </div>
  <% } %>
</div>

找到sidebar-menu，sidebar-menu-link-wrap，sidebar-menu-link-dummy的定义。
找到这个文件 themes/reimu/source/css/_partial/sidebar.styl
搜索menu，找到这部分代码：

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
.sidebar-menu
  margin: 20px 0
  width: 100%
 

.sidebar-menu-link-wrap
  margin: 8px 50px
  display: flex
  position: relative

  justify-content: center
  border: 5px var(--color-red-3-shadow) solid   
  transition: border .5s
  border-radius: 5px
  &:hover
    border: 5px var(--color-h2-after) solid

  &:hover .sidebar-menu-icon:before
    transform: rotate(90deg) scale(1.1)

    
.sidebar-menu-icon
  @extend $menu-link
  &:before
    font-size: 24px
    font-weight: 400
    transform: rotate(90deg)
    transition: transform .3s
    will-change: transform

  pointer-events: none
  padding: 5px
  display: flex
  align-items: center

.sidebar-menu-link-dummy
  position: absolute
  width: 100%
  height: 100%
  top: 0
  left: 0

.sidebar-menu-link
  @extend $menu-link
  pointer-events: none

通过修改这里的代码你可以把它改成自己喜欢的样子，具体怎么改就不赘述了，不会可以问GPT

顶部导航栏的修改：找到这个文件：
themes\reimu\layout_partial\header.ejs
开头部分的代码是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="header-nav">
  <nav id="main-nav">
    <% for (var i in theme.menu) { %>
      <span class="main-nav-link-wrap">
        <!--<div class="main-nav-icon icon-taichi"></div>-->      //这里是那个太极图案，我不喜欢，注释掉了，你可以改成自己喜欢的
        <a class="main-nav-link" href="<%- url_for(theme.menu[i]) %>"><%= __(i) %></a>
      </span>
    <% } %>
    <a id="main-nav-toggle" class="nav-icon"></a>
  </nav>
  <nav id="sub-nav">
   <!-- <% if (theme.rss) { %>
      <a id="nav-rss-link" class="nav-icon" href="<%- url_for(theme.rss) %>" title="<%= __('rss_feed') %>" target="_blank"></a>
    <% } %>-->       //这里是rss,我用不到，所以注释掉了

如果你想修改其他地方，步骤是一样的，在 themes\reimu\layout 下找找看（见名知意），你要修改侧边栏，就找到 sidebar。
然后看你要修改的那部分在哪里修饰的，看看都用了哪些class，然后再到 themes\reimu\source\css 下找到对应的比如说侧边栏sidebar.styl 然后搜索关键字，很快就可以找它们的具体定义，然后就可根据自己的喜好修改了，遇到看不懂的代码或者不知道怎么改，可以问一下GPT。

主题色怎么改的问题

这一点原作者有说，找到 themes\reimu\source\css_variables.styl 这个文件，
修改以下颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
:root
  --red-0: hsl(0, 100%, 50%)
  --red-1: hsl(0, 100%, 66%)
  --red-2: hsl(0, 100%, 74%)
  --red-3: hsl(0, 100%, 84%)
  --red-4: hsl(0, 100%, 91%)
  --red-5: hsl(0, 100%, 95%)
  --red-5-5: hsl(0, 100%, 96%)
  --red-6: hsl(0, 100%, 98%)

  --color-red-6-shadow: hsla(0, 100%, 65%, 0.6)
  --color-red-3-shadow: hsla(0, 100%, 65%, 0.3)


[data-theme="dark"]
  root
    --red-4: hsla(0, 100%, 91%, 0.5)
    --red-5: hsla(0, 100%, 95%, 0.2)
    --red-5-5: hsla(0, 100%, 96%, 0.1)
    --red-6: hsla(0, 100%, 98%, 0.2)

如果你要换成蓝色主题的话就把左边的0都改成220，第三个值的百分比代表了亮度，表现出来的效果就是red0颜色是最深的，red6是最浅的，可以自己调节百分比到自己喜欢的程度。

先讲这么多，后续有补充再更新…