对NexT主题风格的修改

对背景颜色的修改

在source/css/_variables/custom.styl中添加：

$body-bg-color = #f5f7f9

颜色可随意选择
一个好用的RGB颜色查询网站http://www.qiaozhezou.com/rgb.htm

设置阅读全文

在主题配置文件中找到：

Code

auto_excerpt:
  enable: true
  length: 150

默认截取的长度为 150 字符，可以根据需要自行设定

给 hexo next 加上背景图片

只需要在 themes\next\source\css_custom\custom.styl 文件中添加几行代码：

Code

@media screen and (min-width:1200px) {

    body {
    background-image:url(/images/background.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%; 
    }

    #footer a {
        color:#eee;
    }
}

添加顶部加载条

修改主题配置文件(_config.yml)将pace: false改为pace: true

Code

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple 
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-atom
pace_theme: pace-theme-corner-indicator

使用时只需要将list里的名称替换到下面example即可

字体颜色，大小等修改

都在

next/source/_vaviables/base.styl

中

修改``代码块自定义样式

打开\themes\next\source\css_custom\custom.styl,向里面加入：(颜色可以自己定义)

Code

// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

主页文章添加阴影效果

打开\themes\next\source\css_custom\custom.styl,向里面加入：

Code

// 主页文章添加阴影效果
 .post {
   margin-top: 60px;
   margin-bottom: 60px;
   padding: 25px;
   -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
   -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
  }

Hexo添加字数统计、阅读时长

安装
如果没有安装 hexo-wordcount 插件，先安装该插件：

npm i --save hexo-wordcount

NexT 主题默认已经集成了文章【字数统计】、【阅读时长】统计功能，如果我们需要使用，只需要在主题配置文件 _config.yml 中打开 wordcount 统计功能即可。如下所示

Code

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true         # 单篇 字数统计
  min2read: true          # 单篇 阅读时长
  totalcount: false       # 网站 字数统计
  separated_meta: true

HEXO-addlink

hexo-addlink是一个有用的工具，用于在hexo post页面中添加当前的帖子链接。

安装
$ npm install hexo-addlink --save

用法
从hexo配置中的_config.yml添加

Code

addlink：
   before_text: hello
  after_text: bye