修改hexo默认字体颜色

|
| 字数统计: 1.4k

修改hexo默认字体颜色。

修改小字的颜色

在经过多次界面优化后，发现下列颜色的字相当模糊

image-20200315204620410

image-20200315204708146

这些颜色的word均看不清

复制css选择器

用浏览器打开，右键检查

image-20200315232431278

用VScode打开Next主题的所有的样式文件

进入Next主题定义css的目录,我的是E:\MyBlog\themes\next\source\css,然后用Vscode打开这个目录.

image-20200315232803666

在整个目录中搜索上面复制的选择器

然后打开VScode中的搜索框,输入刚才复制得到的选择器

image-20200315232917367

修改即可

更改为自己喜欢的颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.posts-expand .post-meta {
  margin: 3px 0 60px 0;
  color: #555;//$grey-dark;
  font-family: $font-family-posts;
  font-size: 12px;
  text-align: center;

  .post-category-list {
    display: inline-block;
    margin: 0;
    padding: 3px;
  }
  .post-category-list-link { color: #555;}//$grey; }
  
  .post-description {
    font-size: 14px;
    margin-top: 2px;
  }
}

同理还有category下的count属性

1
2
3
4
5
6
.category-list-count {
  color: #1184CD;//$grey;
  &:before {
    display: inline;
    content: " ("
  }

结果：

image-20200315212646049

image-20200315212657031

其他hexo颜色设置

更改标签云（tagcloud）的颜色

如果你和我一样个性化了博客的整体布局颜色，那么默认的标签云页面可能看起来很丑，怎么更改？修改下文件：

1
2
3
{# 文件位置：~/blog/themes/next/layout/page.swig #}

{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

修改对应参数值即可，参数说明见 Hexo 官方文档，颜色可以参考这个网站，自己去纠结……

修改文章内链接文本样式

修改文件 themes\next\source\css\_common\components\post\post.styl，在末尾添加如下css样式，：

1
2
3
4
5
6
7
8
9
10
11
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

其中选择.post-body 是为了不影响标题，选择 p 是为了不影响首页“阅读全文”的显示样式,颜色可以自己定义。

给页面添加背景图片

在theme/next/source/css/_custom文件夹下打开custom.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样式属性都可以根据你的自定义图片来更改，以达到最佳的效果。

文字背景以及透明度

在theme/next/source/css/_custom文件夹下打开custom.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; }
}

文章页面宽度设置

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

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

文章内单行代码的样式设置

在上面的设置中如果更改了网页底色，单行代码的颜色可能与背景色不搭配，这时就需要我们自己设置了。具体步骤：
在theme/next/source/css/_custom文件夹下打开custom.styl文件，向里面添加以下代码：

1
#posts code {color: 颜色代码;background-color:颜色代码;}

其中为code的字体颜色，后者为背景颜色。

其他文章内的颜色可以看一下theme/next/source/css/_common/scaffolding文件夹下的base.styl文件，有需要直接更改即可。

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

在theme/next/source/css/_custom文件夹下打开custom.styl文件，往里面添加以下代码：

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

.footer {
          background:rgba(颜色rgb,透明度（0-1之间）) none repeat scroll !important;
        }

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

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

在theme/next/source/css/_custom文件夹下打开custom.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: 颜色代码;}

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

在theme/next/source/css/_custom文件夹下打开custom.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:颜色代码}，即可修改侧边栏内部文字的颜色。