Hexo自定义CSS

发表于 更新于 分类于 本文字数： 2.2k 阅读时长 ≈ 2 分钟
Hexo的css自定义设置

Hexo自定义CSS

创建CSS文件

首先创建[Blogroot]/source/_data/style.css文件

在这个文件里编写自定义的CSS样式

[Blogroot]/source/_data/style.css
1
2
3
4
.blockquote {
    text-align: left; /* 将引用块中的文本左对齐 */
    margin-left: 0; /* 去除引用块的左侧间距 */
}

主题设置

clean-blog主题

进入主题layout目录，在主题的布局文件中<head>标签

clean-blog主题的<head>标签在layout/head.ejs中，且有注释说明自定义的位置，按照说明操作，如果主题中没有注释，则在<head>标签内添加下面的内容

[Blogroot]/themes/clean-blog/layout/_partial/head.ejs
1
2
<!-- Custom CSS -->
<%- css('css/style.css') %>

创建[Blogroot]/style.css文件，在里面编写就好了

NexT主题

在主题配置文件中取消注释

[Blogroot]/_config.next.yml
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

创建文件[Blogroot]/source/_data/styles.styl等文件，编辑文件

[Blogroot]/source/_data/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
/* Body背景设置 */
body {
    background: url(/images/background.jpg) no-repeat fixed;
    background-size: cover;
    background-position: center;
}

/* 文章背板颜色设置 */
.main-inner > .sub-menu,
.main-inner > .post-block,
.main-inner > .tabs-comment,
.main-inner > .comments,
.main-inner > .pagination {
    background: rgba(245, 245, 245, 0.8); /* 背景色透明度设置 */
}

/* 文字颜色设置 */
body {
    color: #000; /* 主体字体颜色为纯黑 */
}

.posts-expand .post-title-link {
    color: #222; /* 首页文章标题颜色 */
}

.posts-expand .post-meta-container {
    color: #62a7b6; /* 文章日期颜色 */
}

/* 侧边框透明度设置 */
.sidebar {
    opacity: 0.9;
}

/* 菜单栏颜色设置 */
.header-inner {
    background: rgba(255, 255, 255, 0.7); /* 菜单栏背景色透明度设置 */
}

/* 搜索框透明度设置 */
.popup {
    opacity: 0.5;
}

/* 主体背景设置 */
.main-inner {
    background-color: rgba(255, 255, 255, 0); /* 主体背景透明 */
    padding: 0 40px; /* 调整组件位置 */
}

/* 底部字体颜色设置 */
.footer-inner {
    color: #555555;
}

/* 图片和table-container不透明设置 */
img {
    opacity: 1; /* 设置图片不透明 */
}

.table-container {
    opacity: 1; /* 设置 table-container 不透明 */
}

设定完成后，重新生成博客即可

1
2
hexo generate
hexo deploy