hexo next主题优化,打造个人精致网站 | Eternal_zttz

hexo next主题优化,打造个人精致网站

写在前面

关于个人博客,其实自己很早之前就有了这个打算,然而因为种种的原因(其实就是自己懒),自己一直没有把自己的博客真正的上线,自从四月份写了第一篇blog后就没有碰过了。直到暑假的时候,闲来无事了解算法,观摩了各路大神的blog,才发现,woc,他们的blog怎么这么好看。回想自己大一的一年,貌似自己在这一年内也没有留下些什么,so趁着假期还有时间,将自己荒废已久的blog又拿了出来。

回到正题,既然决定要搭建个人blog,界面ugly怎么行?常言道:

生活还是精致一点的好. –佚名

so经过不断的优化,博主的blog也终于有了一点小起色,才有了现在的界面,个人感觉还是挺ok的。然而,在布置界面的时候,深受网上来来去去搜索的痛苦,所以在这里,本人做一个小结。不敢说能把各位的blog布置的有多好看,但至少,达到我这个程度还是可以的。


1. blog配置

常言道:

任何不谈配置只谈操作的行为都是在耍流氓 –佚名

虽说hexo的版本3.x之间改动也不是很大,next5.x系列和现在的6.x系列也差不多,但是终归还是有那么一点细小的变化,保不准就会有bug生成,所以博主还是提一下自己的blog配置:

1
Hexo v3.7.1     Next v6.3.0   编辑器:sublime text2

就目前为止,已经算是挺新版的了,当然,大多数配置各版本之间都一样,大家可以酌情考虑版本的选择。

好了!准备进入正题!本blog将带领各位怎么将一个空空如也的blog装饰成博主一样有那么一点起色的网站。博主将从零搭起,所有的操作都将在博主的笔记本上为大家做出示范。

1.1 next主题基本配置

首先我们先下载next主题:在这里选择大家需要的版本进行下载。下载完成后,我们的blog便有了两个主要的配置文件,分别是hexo自带的_config.yml文件和next主题自带的_config.yml文件,为了方便,我们将hexo自带的_config.yml文件称为站点配置文件,next主题带的_config.yml文件称为主题配置文件。

首先,第一步我们来更换一下blog的主题,这一步又分为三个小步骤:

  1. 将下载下来的next主题文件夹重命名为 next 。
  2. 将next文件夹移入blog所在的文件夹的themes 文件夹中,在这里,本人是/blog/themes
  3. 修改站点配置文件,在配置文件中搜索theme,将其的值改为next注意 冒号: 后面一定要有一个空格
    // 站点_config.yml 文件
    1
    2
    3
    4
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next

现在主题就已经配置好了,接下来我们优化一下:继续修改站点配置文件:
// 站点_config.yml 文件

1
2
3
4
5
6
7
8
# Site
title: Eternal_zttz #网站的名字
subtitle: Saty Hungry,Stay Foolish #网站的副标题
description: 个人blog网站 #个人的描述
keywords:
author: Eternal_zttz #博主的名字
language: zh-CN #blog的语言 zh-CN 代表中文
timezone:

然后我们修改主题配置文件:
// 主题_config.yml 文件 ,搜索Schemes可找到

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

这是next的基本页面布局,默认为Muse布局,在这里,我们选择第三个Pisces

很好,接下来,我们在终端命令行cd 进入blog所在目录,如我是直接命名为blog,所以cd blog:

接着运行:

1
hexo s

在浏览器中打开链接:不出意外,打开后会是这么样的界面:
blog
ok,我们的blog已经略有起色,样式已经离我们的最终样式八九不离十了,接下来,我们将对其的各个部分进行优化:


2. next主题侧边栏优化

在这一部分,我们将对next主题的侧边栏进行优化,主要分为以下几部分:

  1. next主题页面生成
  2. 个人头像设置
  3. 点击个人头像回到主页面
  4. RSS订阅设置
  5. 社交栏图标的设置
  6. 添加网易云音乐
  7. 页面圆角的设置

2.1. next主题页面生成

我们可以看到,hexo默认生成的页面只有两个,即首页归档 页面,对于有强迫症的我来说简直是不! 协! !调,那么接下来,我们来生成我们所需的页面:

2.1.1 页面的生成:

首先,我们修改主题配置文件:
// 主题_config.yml 文件 ,搜索menu可找到

1
2
3
4
5
6
7
8
9
menu:
home: / || home #主页
about: /about/ || user #关于
tags: /tags/ || tags #标签
categories: /categories/ || th #分类
archives: /archives/ || archive #归档
#schedule: /schedule/ || calendar #日程表
#sitemap: /sitemap.xml || sitemap #站点地图
#commonweal: /404/ || heartbeat #公益404

可以看到,大部分的都是注释掉了的,这里我已经把我需要的页面注释解除了,大家可以自行考虑需要的页面。
在这里,斜线//之间的文字是 该页面 的名字,如/about/ ,说明我们要跳转的页面的名字为about , 而||后的文字是这个页面的图标名字.
这时候我们主页上就可以看到这几个页面,接下来实现页面的跳转:

2.1.2 生成about页面:

终端回到blog的根目录.运行:

1
hexo new page "about"

ok,接下来关于页面的markdown自己编写就行。

2.1.3 生成tags页面:

终端回到blog的根目录.运行:

1
hexo new page "tags"

2.1.4 生成categories页面:

终端回到categories的根目录.运行:

1
hexo new page "categories"

tags和categorise页面不用自己布局,会自动根据我们的blog的布局好

2.2 站内搜索功能的实现

文章写多了,想一篇篇的去寻找可不容易,这时候,我们便需要一个站内的搜索功能,即服务别人,也能方便自己。
首先,我们在终端进入blog的根目录下,执行以下命令:

1
$ npm install hexo-generator-searchdb --save

接着,我们进入站点配置文件_config.yml,在最后新增以下内容:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

最后,打开主题配置文件_config.yml,搜索local_search,其值改为true:

1
2
3
# Local search
local_search:
enable: true

ok,现在站内搜索就大功告成了,一切准备就绪~

2.3 个人头像设置

要设置自己的侧边栏头像,首先,准备一张头像的图片,命名为header.jpg,然后,将图片放在/blog/themes/next/source/images/文件夹下,接着修改主题配置文件,搜索avatar

1
2
3
4
5
6
7
8
9
10
11
12
avatar:
# in theme directory(source/images): /images/avatar.gif
# in site directory(source/uploads): /uploads/avatar.gif
# You can also use other linking images.
- url: /images/avatar.gif
+ url: /images/header.jpg #图片的地址
# If true, the avatar would be dispalyed in circle.
rounded: false #设置图片是否为圆形,当图片为正方形时为圆,否则为椭圆
# The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
opacity: 1 #图片的透明度
# If true, the avatar would be rotated with the cursor.
rotated: false #设置鼠标移到图片上后头像是否转动

url里面的值改为图片的地址就可以了,

2.4 点击个人头像回到主页面

一般我们看到一个头像,总忍不住去点击它,然而遗憾的是,next主题中默认并没有这个事件,作为一个强迫症,这能忍???其实,实现这个功能也很简单:
首先,我们打开文件/blog/themes/next/layout/_macro/sidebar.swig,然后,修改以下内容:

1
2
3
4
5
+ <a href="/">
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
alt="{{ author }}" />
+ </a>

ok,重新部署一下,就可以看到效果了

2.5 RSS订阅设置

什么?大家都不知道什么是RSS?!!!
好吧,其实…本博主也不知道emmm,大家可以看看知乎上有关RSS的文章
PS:加上好看就完事了不是,计较干啥
首先,我们在终端命令行进入blog所在的目录,运行:

1
$ npm install --save hexo-generator-feed

接着,打开站点配置文件,在文件的末尾添加:

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然后打开主题配置文件,搜索rss,将其设置成如下所示,注意冒号后要加上一个空格

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link, and install hexo-generator-feed: `npm install hexo-generator-feed --save`.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

OK,all right

2.6 社交栏设置

在主题配置文件中,搜索social,定位到如下代码段,把social的注释取消掉,接下来,就看你需要显示什么社交网站,写上网站名+网址就行。

1
2
3
4
5
6
7
8
9
10
11
12
social:
GitHub: https://github.com/yourname || github #网站名:网址 ||图标名
简书: http://www.jianshu.com || heartbeat
#E-Mail: mailto:yourname@gmail.com || envelope
#Google: https://plus.google.com/yourname || google
#Twitter: https://twitter.com/yourname || twitter
#FB Page: https://www.facebook.com/yourname || facebook
#VK Group: https://vk.com/yourname || vk
#StackOverflow: https://stackoverflow.com/yourname || stack-overflow
#YouTube: https://youtube.com/yourname || youtube
#Instagram: https://instagram.com/yourname || instagram
#Skype: skype:yourname?call|chat || skype

2.7 增加网易云音乐

音乐是不应该被辜负的,所以,我们可以在侧边栏加上网易云的音乐外链,具体方法为:

  1. 打开网易云音乐网页版,选择自己想要放上去的音乐。
  2. 在播放页面选择外链播放器,选择一个自己喜欢的样式。blog
  3. 复制其中的代码 blog
  4. 打开/blog/themes/next/layout/_macro/sidebar.swig 文件,将代码复制到适合的位置,例如,我是在约161-162行增加
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    {% endif %}
    {% include custom_sidebar %}
    </div>
    </section>

    + <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=5079881&auto=0&height=32"></iframe>

    {% if display_toc and toc(page.content).length > 1 %}
    <!--noindex-->
    <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
    <div class="post-toc">

重新部署一下网站,就可以看到结果了

2.8 实现侧边栏页面的圆角

侧边栏默认是矩形的,可能有一些朋友不是特别喜欢这种尖锐的四角,希望可以稍稍弄的平滑一点,说干就干!下面我们来具体实现它。

  1. 首先,我们打开/blog/themes/next/source/css/_variables/Pisces.styl文件,里面定义了一些常量,用来定义blog样式表的值。
  2. 然后,找到$border-radius
    1
    2
    3
    4
    5
    6
    7
    // Borders
    // --------------------------------------------------
    $box-shadow-inner = initial;
    $box-shadow = initial;

    $border-radius-inner = initial;
    $border-radius = initial;

可以看到默认为初始值,即为0
改变 为$border-radius = 16px;
这时候,下面的一个侧边栏弧度就已经改好了

  1. 接着,打开/blog/themes/next/source/css/_schemes/Pisces/_layout.styl文件,
    diff:true
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .header-inner {
    position: absolute;
    top: 0;
    overflow: hidden;
    padding: 0;
    width: $sidebar-desktop;
    background: white;
    box-shadow: $box-shadow-inner;
    -border-radius: $border-radius-inner;
    +border-radius: $border-radius;//修改上面的侧边栏的弧度
1
2
3
4
5
6
7
8
9
10
.content-wrap {
float: right;
box-sizing: border-box;
padding: $content-desktop-padding;
width: $content-desktop;
background: white;
min-height: 700px;
box-shadow: $box-shadow-inner;
- border-radius: $border-radius-inner;
+ border-radius: $border-radius; //修改整个文章页面的弧度

ok 大功告成,到此为止,我们文章的侧边栏就已经优化完毕了,当然,还有更多操作,大家可以去尝试,不过,建议没有把握之前先做好blog的备份。别问我为什么要这么说
来看看最终侧边栏效果:
blog

3. next主题主页面优化

在上面我们已经把侧边栏的优化都已经完成了,不得不说,刚完成这一部分时我还是有很大的成就感的,接下来,我们将对我们blog的主页面进行进一步的优化。
在这一部分,我们将对以下进行操作:

  1. blog右上角出现fork me on github 图标
  2. 文章背景出现阴影边框
  3. 为文章内容添加统计功能,文字总数+阅读时长
  4. 为文章中的代码块增加一键复制功能
  5. 文章结尾出现“本文结束提示”
  6. 增加打赏功能
  7. 增加版权信息
  8. 修改标签样式

3.1 增加fork me on github 图标

这里(图片版)或这里(文字版)选择一款自己喜欢的图标,然后把图标旁的代码拷贝一份,放到

1
blog/themes/next/layout/_layout.swig

这个文件夹中,注意要放到<div class="headband"></div>的下方
OK,这就大功告成了。

3.2 文章背景出现阴影边框

这个效果实现起来很简单,打开blog\themes\next\source\css\_custom\custom.styl文件,放入以下代码:

1
2
3
4
5
6
7
8
// 主页文章添加阴影效果
.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);
}

重新部署一下即可实现。

3.3 实现点击出现爱心功能

首先,进入该网址,复制页面中的代码,在路径blog/themes/next/source/js/src/中新建love.js文件,将复制的代码粘贴到该文件中。
然后打开/blog/themes/next/layout/_layout.swig文件,在该文件的最后增加以下代码:

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

保存后即可看到效果。

3.4 “ 阅读全文 ” 按钮改弧度

这个功能和侧边栏改弧度的操作是差不多的,进入文件/blog/themes/next/source/css/_variables/Pisces.styl中,把以下代码修改一下:

1
2
3
4
5
6
7
8
// Button
- $btn-default-radius = 2px
+ $btn-default-radius = 16px
$btn-default-bg = white
$btn-default-color = $text-color
$btn-default-border-color = $text-color
$btn-default-hover-color = white
$btn-default-hover-bg = $black-deep

保存后即可看见效果。

3.5 为文章内容添加统计功能,文字总数+阅读时长

这个功能在next主题中已经存在了,我们只需要打开开关就行,具体步骤分为下面三步:

  1. 终端进入blog根目录,执行下面代码:

    1
    $ npm install hexo-symbols-count-time --save
  2. 进入站点配置文件,为blog配置统计功能,将以下代码复制到最后:

    1
    2
    3
    4
    5
    symbols_count_time:
    symbols: true
    time: true
    total_symbols: true
    total_time: true
  3. 进入主题配置文件,搜素symbols_count_time,然后把要显示的改为true.
    更深入的操作大家可以看github上的说明
    PS:如果大家配置完成,然后检查无误后,打开页面依旧没有显示,不要着急,第一次显示可能会比较慢,可以休息一会。(本人多次从头配置都没有效果,一气之下去睡了个午觉,醒来就好了0.0).

3.6 为文章中的代码块增加一键复制功能

在next v6.3.0 版本中,这个功能已经是集成了的,我们进入站点配置文件,搜索copy_button。把它的值改为true即可:

1
2
3
4
5
# Add copy button on codeblock
copy_button:copy
enable: true #是否开启复制功能
# Show text copy result
show_result: true #是否显示提示的复制结果

接着,将鼠标移动到代码块中,便可以看到结果。默认按钮是中文“复制”,若是想改为英文“copy”,可进入blog/themes/next/languages/zh-CN.yml文件中,将下面部分改了即可:

1
2
3
4
5
copy_button: copy
copy_success: succeed
copy_failure: failed
copyright:
author: 本文作者

这个文件夹中保留了所有的中英部分的对应关系,大家想改各标签名字的话,可以将这个文件中对应的部分改了即可。

3.7 文章结尾提示 “本文结束”

在文件夹\themes\next\layout\_macro中新建passage-end-tag.swig文件,并在文件中增加以下代码:

1
2
3
4
5
<div>
{% if not is_index %}
<div style="text-align:center;color: #555;font-size:14px;">-------------The End-------------</div>
{% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件,再这个地方增加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 {#####################}
{### END POST BODY ###}
{#####################}

+ <div>
+ {% if not is_index %}
+ {% include 'passage-end-tag.swig' %}
+ {% endif %}
+ </div>

{% if theme.wechat_subscriber.enabled and not is_index %}
<div>
{% include 'wechat-subscriber.swig' %}
</div>
{% endif %}

代码如下:

1
2
3
4
5
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>

最后打开主题配置文件,在文件的最后增加如下代码:

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

保存后,打开网页即可看到效果。

3.8 增加打赏功能

这个功能很简单,首先,我们将保存微信支付的收款码,将其命名为wechatpay.jpg,并将其保存在/blog/themes/next/source/images/文件中。
接着,我们打开主题配置文件,搜索wechatpay,将其前面的注释取消即可:

1
2
3
4
5
#Reward
#reward_comment: Donate comment here
wechatpay: /images/wechatpay.jpg
#alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

这里我们可以放多种方式的支付码,看个人喜好即可,方法都是一样的。

3.9 增加版权信息

博文写好了,怎么说也是作者的一番心血,我们不去抄袭别人的作品,也不希望别人什么都不说带走我们的作品,所以,我们需要在底部做一个版权申明:
next主题中现在已经是集成了这个功能的了,我们只在主题配置文件中搜索copyright,并把enable的值改为true即可.

3.10 修改标签样式

默认的标签前面是一个#号,我们把它改成标签的符号:
修改模板/themes/next/layout/\_macro/post.swig,搜索rel="tag">#,将# 换成<i class="fa fa-tag"></i>即可。

这时候,我们的标签还是有下划线的,要想去掉下滑线,我们可以进入:

1
/blog/themes/next/source/css/_custom/custom.styl

文件,在文件最后增加下面代码:

1
2
3
.posts-expand .post-tags a {
border-bottom: none;
}

即可


4. next主题底部优化

侧边栏和主页面的优化都已经实现了,接下来便是底部部分的优化,主要包括下面几个部分:

  1. 为文章增加评论功能
  2. 增加在线联系Daovoice
  3. 修改底部作者图标为跳动的红心
  4. 隐藏下方的强力驱动和主题信息
  5. 增加本站运行时间
  6. 增加站点访问人数和总访问量

4.1 为文章增加评论功能

next主题的6.x版里面已经集成了很多评论了,包括Gitment和Valine,大家有兴趣可以去试一试。
最开始我用的评论是来必力评论系统,

4.2 增加在线联系Daovoice

首先在Daovoice注册账号,邀请码是5f353066,注册完成后会得到一个 app_id
声明:这个链接包含了博主的邀请码,注册成功每人会有100元代金券,如果不想使用,可以进入Daovoice官网注册账号。
注册成功后,会得到一个app_id:

1
2
3
4
daovoice('init', {
app_id: "*******"
});
daovoice('update');

记下这个app_id的值,然后打开/blog/themes/next/layout/_partials/head/head.swig文件,在如下位置插入代码:

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

接着打开主题配置文件,在最后写下如下代码:

1
2
3
# Online contact 
daovoice: true
daovoice_app_id: 这里填你的刚才获得的 app_id

保存后打开页面即可看见效果。

4.3 修改底部作者图标为跳动的红心

这个功能实现起来很简单,打开主题配置文件,搜索animated:
icon 区域的代码做如下修改:

1
2
3
4
5
6
7
8
9
# Icon between year and copyright info.
icon:
# Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
# `heart` is recommended with animation in red (#ff0000).
name: heart
# If you want to animate the icon, set it to true.
animated: true
# Change the color of icon, using Hex Code.
color: "#ff0000"

保存即可,如果想改为其他的图标,进入网站修改即可

4.4 隐藏下方的强力驱动和主题信息

进入/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
{% if theme.footer.powered.enable %}
+ <!--
<div class="powered-by">{#
#}{{ __('footer.powered', '<a class="theme-link" target="_blank"' + nofollow + ' href="https://hexo.io">Hexo</a>') }}{% if theme.footer.powered.version %} v{{ hexo_env('version') }}{% endif %}{#
#}</div>
{% endif %}

{% if theme.footer.powered.enable 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"{{ nofollow }} href="https://github.com/theme-next/hexo-theme-next">{#
#}NexT.{{ theme.scheme }}{#
#}</a>{% if theme.footer.theme.version %} v{{ version }}{% endif %}{#
#}</div>
+ -->
{% endif %}

4.5 增加本站运行时间

进入/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
<div id="days"></div>
<script>
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("04/17/2018 15:13:14");//修改为自己的blog建站时间
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="本站已安全运行"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

如我是在原next主题版本信息的下方增加上面的代码,代码在不同的位置会有不同的效果。

4.6 增加站点访问人数和总访问量

打开主题配置文件,搜索busuanzi,将enable的值改为true即可。

1
2
3
4
5
6
7
8
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye

5. 推荐大佬文章

这篇文章主要是为了记录自己搭建blog的经历,因为搭建blog的时候,自己经常忘记优化的方法,特记下以减轻今后搜索的负担:
网上有很多特别详细的优化文章,本篇文章也参考了很多,特拿出来与大家分享:

  1. hexo高阶教程next主题优化
  2. hexo的next主题个性化教程:打造炫酷网站
  3. Hexo搭建博客的个性化设置
  4. 打造个性超赞博客Hexo+NexT+GitHubPages的超深度优化

强烈推荐最后一篇blog,一路看下来会收获很多很多

-------------The End-------------