本博客所用主题为 shoka,此博文是之前旧版 HEXO 博客的配置记录!

此文章所用 NEXT 版本可能过老,部分代码不具有参考性,请酌情享用!

此文章用来记录本网站个性化的设置更改,以便备用,或者供人参考。
提醒一下:博主 next 主题风格用的是 Mist,若主题风格不一样,有些地方需酌情修改
在其他地方能找到的教程这里就不重复赘述,文章结尾会给出一些更为详尽的其他参考链接。

# 给页面添加背景图片

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

body{   
        background:url(图片链接);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
     }

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

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

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

.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 更改为你想要的颜色即可。代码如下:

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 文件,往里面添加以下代码:

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

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

在上面的设置中如果更改了网页底色,单行代码的颜色可能与背景色不搭配,这时就需要我们自己设置了。具体步骤:

theme/next/source/css/_custom 文件夹下打开 custom.styl 文件,向里面添加以下代码:

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

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

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

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

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

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

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

# 评论 (来必力) 添加背景色

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

#lv-container {
       border-radius: 10px;
       background:rgba(颜色rgb,透明度) none repeat scroll !important;
    }

和上面一样,背景色和圆角可自己调整更改。

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

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

  • 头部文字颜色
    • 更改头部 site-title 的字体颜色
      theme/next/source/css/_common/components/header 文件夹下打开 site-meta.styl 文件,找到 .brand{} 向里面添加以下代码:
      color: 颜色代码 !important;
    • 更改头部 menu 的字体颜色
      在相同的文件夹下打开 menu.styl 文件,找到 a{} ,向里面添加以下代码:
      color: 颜色代码 !important;
  • 底部文字颜色
    底部文字颜色的修改就显得很简单了,还是在 theme/next/source/css/_custom 文件夹下打开 custom.styl 文件,往里面添加以下代码:
.footer-inner {color: 颜色代码;}

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

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

#sidebar {
            background:url(图片链接);
            background-size: cover;
            background-position:center;
            background-repeat:no-repeat;
            p,span,a {color: 颜色代码;}
}

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

更新于 阅读次数