hexo主题美化

发表于 更新于 分类于 本文字数： 4.5k 阅读时长 ≈ 4 分钟

更改侧边栏背景颜色

更改配置文件themes\next\source\css\_common\outline\sidebar\sidebar.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.sidebar {
  background: $black-deep; #背景颜色
  bottom: 0;
  if (!hexo-config('back2top.sidebar')){
    box-shadow: inset 0 2px 6px black;
  }
  position: fixed;
  top: 0;

  +tablet-mobile() {
    if (!hexo-config('sidebar.onmobile')) {
      display: none;
    }
  }
}

修改底部用户图标为跳动的心

在主题的_config.yml中修改如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#网站的页脚设置部分
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2021 #网站的建站时间

  # Icon between year and copyright info.
  icon: #这里的icon是页脚建站时间和网站名字之间的图标，默认是 `user`图标
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-heart  #图标名称
    # If you want to animate the icon, set it to true.
    animated: true #是否是动画，默认
    # Change the color of icon, using Hex Code.
    color: "#ff0000" #图标颜色

修改底部信息居中

修改文件D:\hexoblog\docblog\themes\next\source\css\_schemes\Mist\_layout.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
// Tags
// --------------------------------------------------
hr {
  height: 2px;
  margin: 20px 0;
}

// Components
// --------------------------------------------------
.btn {
  padding: 0 10px;
}

.headband {
  display: none;
}

// Page - Container
// --------------------------------------------------
.main-inner {
  padding-bottom: 80px;

  +mobile() {
    width: auto;
  }
}

.content {
  padding-top: 80px;

  +mobile() {
    padding-top: 60px;
  }
}

// Pagination
// --------------------------------------------------
.pagination {
  margin: 120px 0 0;
  text-align: left;

  +mobile() {
    margin: 80px 10px 0;
    text-align: center;
  }
}

// Footer
// --------------------------------------------------
.footer {
  background: var(--content-bg-color);
  color: var(--text-color);
  padding: 10px 0;
}

.footer-inner {
  text-align: center;  #left改为center

  +mobile() {
    text-align: center;
    width: auto;
  }
}

内联代码文字背景

在G:\hexo-doubao\themes\next\source\css\main.styl最后面添加下面的代码

1
2
3
4
5
6
7
code {
    /* Customize inline code styles here */
    background-color: #fffff5; /* Background color */
    color: #58C9B9; /* Text color */
    padding: 5px 7px; /* Padding around the code */
    border-radius: 4px; /* Border radius for rounded corners */
}

字体和背景颜色取自取色器

修改主题 css 配置

在G:\hexo\themes\next\source\css\_common\components\post\post-body.styl文件后面追加

如果想设置鼠标移动上去后变色，也可以设置

1
2
3
4
5
6
7
8
9
  a:not(.btn){
  color: #1971c2; //超链接显示颜色
  border-bottom: none;
//  &:hover {
//	color: #00FA9A;  //鼠标移动上去后超链接颜色
//	font-weight: bold;
//	text-decoration: underline;
//	}
  }

首页文章标题居中

由于 Next 中的 Mist 主题首页文章的标题默认是左对齐的。添加配置后才可以是居中。

添加配置到D:\hexo\themes\next\source\css\_schemes\Mist\_menu.styl中，重新启动就可以让首页文章的标题居中。

1
2
3
.posts-expand .post-title, .posts-expand .post-meta {
  text-align: center;
}

首页文章简介居中

更改D:\hexo\themes\next\source\css\_schemes\Mist\_posts-expand.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
// Post Expand
// --------------------------------------------------
.posts-expand {
  &.index {
    .post-header {
      text-align: $scheme-text-align;

      +mobile() {
        text-align: center;
      }
    }

    .post-meta-container {
      margin-top: 5px;
    }

    .post-meta {
//由flex-start更改为center
      justify-content: center;

      +mobile() {
        justify-content: center;
      }
    }
  }

  .post-eof {
    display: none;
  }

  .post-block:not(:first-of-type) {
    margin-top: 120px;
  }

  .post-header {
    margin-bottom: 20px;
  }

  .post-tags {
    a {
      background: var(--content-bg-color);
      border-bottom: 0;
      padding: 1px 5px;

      &:hover {
        background: var(--menu-item-bg-color);
      }
    }
  }

  .post-nav {
    margin-top: 40px;
  }
}

.post-button {
  margin-top: 20px;

  .btn {
    background: none;
    border: 0;
    border-bottom: 2px solid var(--btn-default-border-color);
    padding: 0;
    transition-property: border;

    &:hover {
      border-bottom-color: var(--btn-default-hover-border-color);
    }
  }
}

修改浏览器标签页 title

更改themes\next\layout\page.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
{% block title %}
  {%- set page_title_suffix = ' | ' + title %}

  {%- if page.type === 'categories' and not page.title %}
    {{- __('title.category') + page_title_suffix }}
  {%- elif page.type === 'tags' and not page.title %}
    {{- __('title.tag') + page_title_suffix }}
  {%- elif page.type === 'schedule' and not page.title %}
    {{- __('title.schedule') + page_title_suffix }}
  {%- else %}
    {{- page.name + page_title_suffix }}#有title更改为name
  {%- endif %}
{% endblock %}

在对应菜单的index.md文件中修改title为name