世间所有的相遇,都是久别重逢

0%

Hexo博客设置以及Next主题美化

前言

在博客美化之路上磕磕绊绊,此文章主要用来记录博客设置以及美化的设置方法,以便备用,或者供人参考。

提醒一下:博主next主题风格用的是Mist,若主题风格不一样,有些地方需酌情修改

基本样式配置

给页面添加背景图片

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

1
2
3
4
5
6
7
body{   
background:url(图片链接);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

其中的css样式属性都可以根据你的自定义图片来更改,以达到最佳的效果。

文字背景色以及半透明的设置

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

1
2
3
4
5
.content {
border-radius: 10px;
margin-top: 60px;
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

其中border-radius是给文章背景设置圆角,margin-top是设置文章到顶部的距离,其中属性可根据自己的需要进行调整。

在修改完文章背景色之后,文字颜色可能和背景色不能很好的搭配,这时候我们就需要修改文章字体的颜色了。打开theme/next/source/css/_common/scaffolding文件夹下的base.styl文件,找到body{},将其中的color:$text-color更改为你想要的颜色即可。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
body {
position: relative; /* Required by scrollspy */
font-family: $font-family-base;
font-size: $font-size-base;
line-height: $line-height-base;
color: 颜色代码;
background: $body-bg-color;

+mobile() { padding-right: 0 !important; }
+tablet() { padding-right: 0 !important; }
+desktop-large() { font-size: $font-size-large; }
}

文章页面宽度设置

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

1
.main-inner {width: 页面宽度;}

页面头部和底部栏的背景色修改

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

1
2
3
4
5
6
7
.header {
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

.footer {
background:rgba(颜色rgb,透明度) none repeat scroll !important;
}

头部和底部也可以加入自定义的背景图。只需要在其中加入background:url(图片的链接);即可。

网页顶部和底部的文字颜色修改

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

  • 头部文字颜色

    • 更改头部site-title的字体颜色
      theme/next/source/css/_common/components/header文件夹下打开site-meta.styl文件,找到.brand{}向里面添加以下代码:

      1
      color: 颜色代码 !important;
    • 更改头部menu的字体颜色
      在相同的文件夹下打开menu.styl文件,找到a{},向里面添加以下代码:

      1
      color: 颜色代码 !important;
  • 底部文字颜色

    底部文字颜色的修改就显得很简单了,还是在theme/next/source/css/_custom文件夹下打开custom.styl文件,往里面添加以下代码:

    1
    .footer-inner {color: 颜色代码;}

侧栏背景图以及内部文字颜色的修改

source\_data文件夹下打开styles.styl文件,往里面添加以下代码:

1
2
3
4
5
6
7
.sidebar {
background:url(图片链接);
background-size: cover;
background-position:center;
background-repeat:no-repeat;
p,span,a {color: 颜色代码;}
}

其中设置p,span,a{color:颜色代码},即可修改侧边栏内部文字的颜色。

样式合集

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
// Custom styles.
// 文章背景框
//给文章添加阴影
.post-block{
opacity: 0;
margin-top: 0;//设置文章到顶部的距离
margin-bottom: 0;//设置文章到底部的距离
padding: 25px;
border-radius: 20px; //给文章背景设置圆角
background:rgba(颜色rgb,透明度) none repeat scroll !important;
-webkit-box-shadow: 0 0 10px rgba(202, 203, 203, 0.8);
-moz-box-shadow: 0 0 10px rgba(202, 203, 204, 0.8);
}


// 文章标题动态效果 next/source/css/_common/components/post/post-title.styl中.posts-expand .post-title-link确保`position: relative;`属性存在, 如果需要标题呈现链接效果颜色, 将`color`元素去除即可
.posts-expand .post-title-link::before {
background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);
}

// 文章内标题样式(左边的竖线)
.post-body h2, h3, h4, h5, h6 {
border-left: 4px solid #657b83;
padding-left: 10px;
}
.post-body h1 {
border-left: 5px solid #657b83;
padding-left: 10px;
}
body {
color: #444;
font-size: 16px;
}

但并不是所有的样式都能调, 像页宽, 多说评论的样式在styles.styl文件是无效的.

修改主页文章到顶部和底部的距离

打开themes\next\source\css\_schemes\Mist文件夹中的_layout.styl文件 ,修改如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Page - Container
// --------------------------------------------------
.main-inner { //设置文章到底部的距离
padding-bottom: 50px;

+mobile() {
width: auto;
}
}

.content { //设置文章到顶部的距离
padding-top: 50px;
}

修改其中数字就能修改主页文章到顶部和底部的距离,找了很久才找到设置的方法-_-

修改主页文章的间距

打开themes\next\source\css\_schemes\Mist文件夹中的_posts-expand.styl文件

1
2
3
4

.post-block:not(:first-child) {//修改文章间距
margin-top: 40px;
}

修改其中数字就能修改主页文章的间距,找了很久才找到设置的方法-_-

文本居中引用 - Centered Quote

Tag Plugin 是一种使 Hexo 支持特殊样式内容的方法。例如,我们无法在标准 Markdown 中显示具有自定义尺寸的图像。然后我们可以使用标签插件来解决它。 Hexo 有很多可以帮助用户的标签。 Hexo 还具有主题接口,使主题能够创建自己的标签。

使用方法:

1
{% cq %}世间所有的相遇,都是久别重逢{% endcq %}

显示效果:

世间所有的相遇,都是久别重逢

提示块 - Note

使用方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{% note default %}
default 提示块标签
{% endnote %}

{% note primary %}
primary 提示块标签
{% endnote %}

{% note success %}
success 提示块标签
{% endnote %}

{% note info %}
info 提示块标签
{% endnote %}

{% note warning %}
warning 提示块标签
{% endnote %}

{% note danger %}
danger 提示块标签
{% endnote %}

主题配置文件中可以修改风格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Note tag (bs-callout).
note:
# Note tag style values:
# - simple bs-callout old alert style. Default.
# - modern bs-callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
# 风格
style: flat
# 要不要图标
icons: true
# 圆角矩形
border_radius: 3
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

显示效果:

default 提示块标签

primary 提示块标签

success 提示块标签

info 提示块标签

warning 提示块标签

danger 提示块标签

标签 - Label

使用方法:

1
2
{% label default@默认 %} {% label primary@主要 %} {% label success@成功 %} {% label info@信息 %} {% label warning@警告 %} {% label danger@危险 %} 
{% label success@这是成功的信息%}

显示效果:

默认 主要 成功 信息 警告 危险 这是成功的信息
-------------本文结束感谢您的阅读-------------