image
接上一篇玄阶配置
地阶配置
这部分的配置由作者们自由选择了，网上有很多方案，这里我采用的是配置起来比较简单的一种，可参考使用。
- 网站背景
这里有两种方式，第一种是 Next 主题自带的动态背景，只需修改主题配置文件即可：
# Canvas-nest
canvas_nest: true
第二种方式就是自己添加背景图片，这种方式的自己写css代码，不过我已经写好了，拿去用就行了，
在\themes\next\source\css\_custom目录下，有custom.styl文件，这里可以放置我们自定义的一些样式，我们先添加一个背景图：
// Custom styles.
//顶部条
.headband {
height: 0;
}
//背景图
body {
background-image: url(http://plbhkv0pr.bkt.clouddn.com/background.jpg);
background-attachment: fixed; // 不随屏幕滚动而滚动fixed,scroll,inherit
background-repeat: no-repeat; // 如果背景图不够屏幕大小则重复铺，改为no-repeat则表示不重复铺
background-size: cover; // contain等比例铺满屏幕 //cover拉伸铺满
background-position: bottom;//x,y轴调整
+mobile(){
//background-position: 0% -20%;
background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
}
}
- 实现 fork me on github
在 GitHub Ribbons 或 GitHub Corners 选择一款你喜欢的挂饰，拷贝方框内的代码,如下：
fork me on github
将刚刚复制的挂饰代码，添加到/themes/next/layout/_layout.swig文件中，添加位置如下图所示(放在<div class="headband"></div>下方)：
fork me on github
注：挂饰代码的<a href="https://https://github.com/zoluoc"这个链接改写成自己 GitHub 地址！ - 文章末尾添加“文章结束”标记
(1) 在路径\themes\next\layout\_macro文件夹中新建passage-end-tag.swig文件;
//切换到路径_macro
cd [_macro路径]
//创建passage-end-tag.swig文件
touch passage-end-tag.swig
(2) 在passage-end-tag.swig添加以下内容，粘贴以下内容后保存:
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="far fa-grin-tongue"></i>感谢您的阅读-------------</div>
{% endif %}
</div>
(3) 打开\themes\next\layout\_macro\post.swig文件，在END POST BODY之后，添加以下代码：
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
添加位置如下图：
文章结束标记
(4) 修改主题配置文件
_config.yml，在末尾添加：
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true
- 头像画圆旋转
打开/themes/next/source/css/_common/components/sidebar/sidebar-author.styl，添加以下代码：
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
border-radius: 60%;
transition: 2.5s all;
}
.site-author-image:hover {
transform: rotate(360deg);
}
.site-author-name {
margin: $site-author-name-margin;
text-align: $site-author-name-align;
color: $site-author-name-color;
font-weight: $site-author-name-weight;
}
.site-description {
margin-top: $site-description-margin-top;
text-align: $site-description-align;
font-size: $site-description-font-size;
color: $site-description-color;
}
- 修改代码块样式
打开\themes\next\source\css\_custom\custom.styl，添加以下代码：
code {
color: #ff7600;
background: #fbf7f8;
margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
margin: 5px 0;
padding: 5px;
border-radius: 3px;
}
.highlight, code, pre {
border: 1px solid #d6d6d6;
}
- 侧边栏社交小图标设置
打开主题配置文件_config.yml，搜索Social，将你有的社交账号前面的#号去，格式为：
[社交平台名]: [社交地址] || [图标名称]
social:
GitHub: https://github.com/zoluoc || github
简书: https://www.jianshu.com/u/aa9caab6cf80 || heartbeat
# E-Mail: mailto:yourname@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
- 左侧栏头部使用图片背景
打开\themes\next\source\css\_custom\custom.styl，添加以下代码：
//首部背景url(http://plbhkv0pr.bkt.clouddn.com/header.jpg)
.site-meta {
height: 100px;
background-image: url(http://plbhkv0pr.bkt.clouddn.com/header.jpg);
background-size: cover;
}
- 赞赏支持
获取微信和支付宝等收款二维码图片，上传到图床或者博客本地\source\uploads目录下
在主题配置文件下修改以下代码：
# Reward
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: http://plbhkv0pr.bkt.clouddn.com/wechatpay.png
alipay: http://plbhkv0pr.bkt.clouddn.com/alipay.jpg
- 网站底部加上访问量及文章阅读量
这个Next5.0版本以后就帮我们集成了busuanzi统计了，只需修改主题配置文件的busuanzi_count属性，如下：
busuanzi_count:
# count values only if the other configs are false
enable: true
# custom uv span for the whole site
site_uv: true
site_uv_header: 访客数
site_uv_footer: 人次
# custom pv span for the whole site
site_pv: true
site_pv_header: 访问量
site_pv_footer: 次
# custom pv span for one page only
page_pv: true
page_pv_header: 阅读量
page_pv_footer: 次
注：不蒜子统计的域名过期问题：修改/theme/next/layout/_third-party/analytics/busuanzi-counter.swig文件，替换路径为https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
- 博客总字数统计
切换到更目录，安装以下插件：
npm install hexo-wordcount --save
在/themes/next/layout/_partials/footer.swig末尾添加代码：
<div class="theme-info">
<div class="powered-by"></div>
<span class="post-count">全站共{{ totalcount(site) }}字</span>
</div>
- 文章统计功能
安装Hexo插件，参考博客总字数统计
编辑主题配置文件，配置如下：
post_wordcount:
item_text: true
wordcount: true
min2read: true
totalcount: false
separated_meta: true
- 博客图标 Favicon
每个网站都有自己的图标，自己的博客当然也不列外，图标可以在网上找，这里提供以下两个网站 easyicon 和 阿里巴巴矢量图标库，当然也可以自己制作。
要求是两张图（大：32x32 小：16x16）的矢量图，准备好图片后放在/themes/next/source/images，将默认的两张图片替换掉。命名和默认的一样也可以自己定义。
修改主题配置文件，如果你自定义了图片名字，需要做修改：
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg
- 网页顶部进度加载条
编辑主题配置文件，搜索pace，将其值改为ture就可以了，再选择一款你喜欢的样式。
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-simple
pace_theme: pace-theme-minimal
- 隐藏底部由Hexo强力驱动、主题--NexT.Mist
打开/themes/next/layout/_partials/footer.swig，注释掉相应代码:
//用下面的符号注释，注释代码用下面括号括起来
<!-- -->
<!--
<span class="post-meta-divider">|</span>
{% if theme.footer.powered %}
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a>') }}{#
#}</div>
{% endif %}
{% if theme.footer.powered and theme.footer.theme.enable %}
<span class="post-meta-divider">|</span>
{% endif %}
{% if theme.footer.theme.enable %}
<div class="theme-info">{#
#}{{ __('footer.theme') }} — {#
#}<a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ theme.version }}{% endif %}{#
#}</div>
{% endif %}
{% if theme.footer.custom_text %}
<div class="footer-custom">{#
#}{{ theme.footer.custom_text }}{#
#}</div>
{% endif %}
-->
- 博文置顶
修改hexo-generator-index插件，把/node_modules/hexo-generator-index/lib/generator.js中代码替换为：
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
var config = this.config;
var posts = locals.posts;
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) { // 两篇文章top都有定义
if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
else return b.top - a.top; // 否则按照top值降序排
}
else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date; // 都没定义按照文章日期降序排
});
var paginationDir = config.pagination_dir || 'page';
return pagination('', posts, {
perPage: config.index_generator.per_page,
layout: ['index', 'archive'],
format: paginationDir + '/%d/',
data: {
__index: true
}
});
};
文章添加Top值，值越大，越靠前：
---
---
title: Hexo博客建站一〈基础搭建〉
date: 2018-05-15 09:32:37
comments: true #是否可评论
toc: true #是否显示文章目录
categories: "个人博客"
tags:
- hexo
top: 100
---
- 网站字体大小
编辑/themes/next/source/css/_variables/base.styl，搜索$font-size-base，修改为你想要的大小:
// Font size
$font-size-base = 16px
- 添加侧栏推荐阅读
编辑主题配置文件，如下配置即可：
# Blog rolls
links_icon: link
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
Swift 4: https://developer.apple.com/swift/
Objective-C: https://developer.apple.com/documentation/objectivec
- 站内搜索
NexT主题支持集成 Swiftype、微搜索、Local Search 和 Algolia。这里我们采用 Local Search。
(1) 安装 hexo-generator-search 和 hexo-generator-searchdb
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
(2) 编辑站点配置文件，添加以下内容:
# hexo-generator-searchdb
search:
path: search.xml
field: post
format: html
limit: 10000
(3) 编辑主题配置文件，设置Local searchenable为ture
local_search:
enable: true
# if auto, trigger search by changing input
# if manual, trigger search by pressing enter key or search button
trigger: auto
# show top n results per article, show all results by setting to -1
top_n_per_article: 1
- 修改底部标签样式
修改\themes\next\layout\_macro\post.swig中文件，搜索rel="tag">#，将#替换成<i class="fa fa-tag"></i>编译重启，可查看效果。 - 修改文章内链接文本样式
修改/themes/next/source/css/_common/components/post/post.styl，在末尾添加CSS样式，如下：
// 文章内链接文本样式
.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; //底部分割线颜色
}
}
