博客深度改造之踩坑记

自从上个月被一位设计师朋友的博客网站惊艳到了,和我的网站放在一起,简直是现实版的高大上与矮挫穷的对比!哎,想想,虽然我没什么设计美感,但梦想还是要有的,毕竟模仿也是一条出路。但仔细一看,她用的是wordpress搭建的博客,而我是hexo+next搭建的。经过一番纠结后,我放弃了改用wordpress的想法,而是走上了博客升级和改造之路。

提前说明:

  • 本文的网站版本是hexo: 3.7.0;next:6.4.0,如果是其他版本,目录和支持的功能模块可能有所不同。
  • 如果你的主题配置是用数据文件, 那么本文中所说的主题站点下的_comfig.yml的修改,都只改到Blog/source/_data/_next.yml中。

在百度和谷歌中,搜索next网站优化,就可以搜到很多优质的教程,而且目录还很清晰,本文的重点是博客升级之路的踩坑记,那么这里就先列举出我参照的几篇文章,然后,针对我自己的改造说明下填坑的方法。

外表
背景图、主题色、链接色等
隐藏底部hexo标识
顶部进度条
滚动百分比(scrollprecent)
爱心点击效果

文章
文章置顶:hexo博客优化之文章置顶+置顶标签
阅读次数、访问量
字数统计、阅读时长
评论系统
分享功能

整体优化
站内搜索
搜索优化
添加readme.md
全面的配置,宛如教学文档:打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

一、 外表

1. 设置背景图、主题色、链接色等

修改网站外表样式,直接通过自定义样式css,覆盖原本next主题的样式即可。next主题的自定义样式文件路径是Blog/themes/next/source/css/_custom/custom styl,如下是我的效果图

贴上我写的样式,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// 背景图,为兼容next主题body高度等于滚动高度,图片的选择建议左右对称,边界不明显的类型
// 或者css修改body高度等于viewport的高度,但需要改动比较多的css
body {
background-image: url(./../images/bg.jpeg);
background-repeat-y: repeat;
background-size: 100%;
}

// 标题背景色
.site-meta {
background: #4CAF50;
}
// 副标题字体色
.site-meta .site-subtitle {
color: #ffffffde;
}

// 列表中的文章间隙
.posts-expand {
padding-top: 10px;
}
.posts-expand .post-meta {
margin-bottom: 30px;
}
.posts-expand .post-eof {
width: 20%;
height: 2px;
background: #50af50;
margin-bottom: 80px;
}

// 悬浮链接色
a:hover {
color: #84ae43;
border-bottom-color: #84ae43;
}
// 悬浮按钮色,阅读全文
.btn:hover {
background: #84ae43;
border-color: #84ae43;
}

// 底部字体
.footer {
color: #555;
}

// ipad、iphone下,不加载背景图
@media (max-width: 991px) {
body {
background-image: none;
background-color: #4CAF50;
}
.footer {
color: #ffffe6;
}
}

2. 隐藏底部hexo标识

Blog/themes/next/layout/_partials/footer.swig中,注释或直接删掉一下内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
找到以下代码,用<!-- -->包裹

<!--
<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') }} &mdash; {#
#}<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 %}
-->

3. 顶部进度条

顶部进度条,有2种用处,1,显示页面加载进度; 2,看文章时,显示看文章进度。
效果图:

顶部进度条的设置,在主题目录下的_comfig.yml中,找到pace相关配置,设置pace主题及其依赖文件,如果没有文件,则不能看到进度的加载。

1
2
3
4
5
6
7
8
pace: true
pace_theme: pace-theme-center-simple

# Internal version: 1.0.2
# See: https://github.com/HubSpot/pace
# Or use direct links below:
pace: //cdn.bootcss.com/pace/1.0.2/pace.min.js
pace_css: //cdn.bootcss.com/pace/1.0.2/themes/blue/pace-theme-flash.min.css

进度条正常显示后,可以自定义进度条颜色,在Blog/themes/next/source/css/_custom/custom styl

1
2
3
4
5
6
7
8
9
10
11
12
13
// 顶部进度条的容器,原本为黑色
.headband {
background: #4CAF50;
}
// 顶部进度条的背景容器
.pace .pace-progress {
background: #ffc107;
height: 3px;
}
// 顶部进度条
.pace .pace-progress-inner {
box-shadow: 0 0 10px #ffc107, 0 0 5px #ffc107;
}

3、底部显示滚动百分比

滚动百分比,是指页面纵向滚动的百分比,即显示看文章的进度。
对我的网站而言,顶部进度条,我只采用了1用处,进度用滚动百分比显示。
效果图:

在主题目录下的_comfig.yml中,

1
scrollprecent: true

4、爱心点击效果

效果图:

参考链接:Hexo NexT主题添加点击爱心效果

二、文章

1、 阅读次数、访问量

效果图,看下一节
参考链接:Leancloud访客统计插件重大安全漏洞修复指南

2、字数统计、阅读时长

在网上找了一大堆的教程都说要装hexo-wordcount,但6.4.0版的layout模板中已经不支持它了。所以设置symbols_count_time。
效果图:

  1. 主题目录下的_config.yml中设置symbols_count_time的显示形式
    1
    2
    3
    4
    5
    6
    7
    8
    # Post wordcount display settings
    # Dependencies: https://github.com/theme-next/hexo-symbols-count-time
    symbols_count_time:
    separated_meta: true
    item_text_post: true
    item_text_total: true
    awl: 4
    wpm: 275

2.在站点目录下的Blogs/_config.yml,添加统计数的显示位置

1
2
3
4
5
6
7
8
# 统计文章字数
symbols_count_time:
# 文章内是否显示
symbols: true
time: true
# 网页底部是否显示
total_symbols: true
total_time: true

这样,妥妥地就有了文章的字数统计和网站的字数统计了。

3、评论系统

评论系统采用的是valine,请看我的另一篇文章:更换评论系统-valine

4、分享功能

参考链接:[Next]集成Mob分享组件
效果图:

经过我自定义css,我的网站的效果图:

三、整体优化

1、站内搜索(有小问题说明)

站内搜索采用的是Algolia搜索插件。先看效果图:

首先需要申请Algolia的账号。具体操作简单,参考Hexo集成Algolia搜索插件
我搭建完后,报错theme-next-algolia-instant-search没找到,要记得安装这个插件,到Blog/theme/next/下,执行下面命令,即可。

1
$ git clone https://github.com/theme-next/theme-next-algolia-instant-search source/lib/algolia-instant-search

详细步骤看官方说明

2、搜索优化(有小问题说明)

照常,先抛出参考链接:Hexo-next百度和谷歌搜索优化

谷歌搜索的效果图如下:

由于我的网站原本是http://aline2013.com,申请百度收录时,网站地址一定要加www,
导致网站验证这一步,我的提示一直是301,无法通过。这是因为我在域名解析中,把所有的*.aline2013.com都跳转到顶级域名aline2013.com了。所以会报301重定向。解决方法很简单,
在主题目录下的_comfig.yml中,修改url字段,如下是我的改法:

1
2
3
# URL
hild' and root as '/child/'
url: http://www.aline2013.com

2、 添加readme.md

首先,站点目录下,source/添加readme.md,然后,在站点目录下的_comfig.yml中,找到skip_render设置为readme.md,这样每次编译时,readme.md不会被编译。

分享到:
0%