对NexT主题风格的修改

Author Avatar
kabeor 3月 31, 2019

对NexT主题风格的修改

对背景颜色的修改

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

$body-bg-color = #f5f7f9

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

设置阅读全文

在 主题配置文件 中找到:

auto_excerpt:
enable: true
length: 150

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

给 hexo next 加上背景图片

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

@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

# 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,向里面加入:(颜色可以自己定义)

// 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,向里面加入:

// 主页文章添加阴影效果
.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 统计功能即可。如下所示

# 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添加

addlink:
before_text: hello
after_text: bye

From https://kabeor.github.io/对NexT主题风格的修改/ bye

This blog is under a CC BY-NC-SA 4.0 Unported License
本文链接:https://kabeor.github.io/对NexT主题风格的修改/