前言

恩，显而易见的，闲着没事给博客布局稍微改造了一下。。

因为个人不太喜欢圆角，所以全都改成了直角，顺便把配色和字体都给改了一下，顺便也给整了个图标。。不过还是不敢动太多，因为确实不会。

准备工作

这回不能零基础照做了，最好去b站随便找个html+css几十分钟入门的小视频看一遍，至少要了解html和css的基本语法和css选择器的概念，下面不会重新讲解（因为我自己也讲不清楚，囧）

要使用chorme、edge之类的稍微现代一点的，能f12打开控制台的浏览器，等会要用来进行调试。

我这里使用的主题是butterfly，可以导入自定义css，其他主题应该也会支持导入自定义css，还请自行查阅对应的主题文档

网站图标

先讲个轻松一点，不用写代码的。

首先准备一个ico格式的图标文件，去随便搜一个在线生成favicon的网站就行，我用的是，可以上传png直接生成一系列尺寸的favicon。解压下载下来的压缩包（这里不教如何解压），里面应该会有一个favicon.ico，把它放进source/img里面。

然后打开主题的配置文件，ctrl+f搜索favicon直接跳转到配置位置，会发现主题默认的文件路径为favicon.png，然而我自己用png格式试了下，怎样都无法加载。。所以这里用ico文件，把值改成img/favicon.ico。

然后hexo部署三连，清除浏览器缓存，去网站就能看到图标已经出来了。

更改字体

导入自定义CSS文件

这里开始就需要写css了，再提醒一下务必要先去了解css的基本语法和选择器概念。

先新建一个css文件，在source/_custom文件夹建立一个custom.css（如果没有对应文件夹就新建一个）

前面说过butterfly主题是可以导入自定义css的，在配置文件搜索inject自动跳转到如下位置

1
2
3
4
5
6
7
8
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    # - <link rel="stylesheet" href="/xxx.css">
  bottom:

    # - <script src="xxxx"></script>

这里就是主题内置的可以导入css的位置，一般css在head后面，bottom后面放的是js文件

因此在head后面照着注释的格式，插入：

1
2
3
4
5
6
7
# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">
    # - <link rel="stylesheet" href="/xxx.css">

这样一来，刚才我们创建的自定义css就可以应用到主题中了

但目前css里面还是空的，接下来开始进行修改

引入外部字体文件

我们采用本地引入外部字体的方式

找一个你喜欢的字体，把字体文件放进source/fonts文件夹（没有就新建一个），文件名无所谓，可以改得简单一点方便配置

然后在css文件里面写

1
2
3
4
5
@font-face{
  font-family:'source-serif' ;  /* 字体名，自定义即可 */
  src:url('/fonts/Source-Serif.otf'); /* 字体文件路径，注意扩展名，大部分字体文件都支持 */
  font-display : swap; /* 此项设置后，会先显示默认字体，等待字体文件加载完毕后自动替换为设置的字体，建议开启 */
}

回到主题配置文件，修改字体配置

1
2
3
4
5
6
7
# Global font settings
# Don't modify the following settings unless you know how they work
font:
  global_font_size: 16px
  code_font_size: 
  font_family: source-serif
  code_font_family:

启动一下看看，没有问题的话字体应该已经加载成功了

这种方法会额外占用加载字体的时间，建议使用网络字体，但是我自己就懒得搞了（

网站样式

接下来要写的东西都在前面创建的css里，我也不会讲得太细了，因为我也搞不明白。。大部分都是从其他教程那里抄的。。
基本都是一些基础到不能再基础的样式调整，至于直接动主题里的layout文件我是更不敢的，就直接看我放的代码算了

侧边栏样式

取消投影和圆角，调整背景色透明度，上面画一条横线作为分割线

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*侧边栏样式*/

#aside-content>.card-widget {
  border-radius: 0px;
  background: rgb(239, 241, 245, 0.4);
  box-shadow: none;  
  border-top: #bcc0cc solid 6px
}


#aside-content > div.sticky_layout > div.card-widget {
  border-radius: 0px;
  background: rgb(239, 241, 245, 0.4);
  box-shadow: none;
  border-top: #bcc0cc solid 6px
}

文章列表调整

取消圆角和投影，右边加一条装饰用的边缘线

1
2
3
4
5
6
7
8
9
/* 文章列表样式 */

#recent-posts>.recent-post-items .recent-post-item{
  border-radius: 0px;
  background-color: #eff1f5;
  box-shadow: none;
  border-right: #bcc0cc solid 4px
}

文章页面调整

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 页面样式 */

#post {
  border-top: #bcc0cc solid 8px;
  border-radius: 0px;
  background-color: #eff1f5;
  box-shadow: none;
}

#page {
  border-radius: 0px;
  background-color: #eff1f5;
  box-shadow: none;
}

#archive {
  border-radius: 0px;
  background-color: #eff1f5;
  box-shadow: none;

透明化页脚

1
2
3
4
/* 页脚透明 */
#footer{
  background: transparent!important;
}

格纹背景

个人很喜欢typography这个astro主题，但是我暂时搬不到那边去（虽然这个主题本来就是hexo主题移植，但已经多年没有维护，我也不好搬过去），所以仿制了一个格纹背景

问了ai直接用css写的，虽然可以直接在主题配置加入图片，但是我懒得再作图了（

记得先去主题配置里取消背景设置

1
2
3
4
5
6
7
8
9
/* 背景格纹 */

body {
  background-color: #e6e9ef;
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 10px 10px;
  background-position: -1px -1px;

导航栏居中和水平显示选项

找了很多教程，要么位置有问题，要么都是要动主题文件，终于找到一个还算适配的方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 导航栏居中 */

#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    top: 10%;
    transform: translateX(-50%);
}

/* 去掉导航栏横线 */

#nav *::after{
    background-color: transparent!important;
}

#nav .menus_items .menus_item:hover .menus_item_child{
  display: flex;
}

/* 这里的2是代表导航栏的第二个元素，即有子菜单的元素，可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -50px;
}

参考