前言
本篇文章继续讲解一些hexo下next主题博客样式的修改。主要内容为修改首页文章摘要样式，文章详情样式，以及文章阅读次数的统计深入讲解，酷炫的博客背景，在首页菜单里添加的独立的标签页，文章结尾的模版样式修改。暂时想到了这么多，欢迎大家提出新的东西，等后面有空了再讲新东西。 <!--more-->
首页文章摘要样式修改
通过浏览器的开发者工具可以查看到首页文章摘要对应的CSS 可以看到header标签内为文章的头部的样式，大家可以进行一些修改，但是基本没什么需要改动的，大家可以自己DIY，
大家看下箭头，修改对应的CSS样式，进行重写覆盖，修改的文件路径如下（以我自己的为例）：
D:\hexo\blog\themes\next\source\css\_custom\custom.styl修改代码如下
// Custom styles. //首页文章阴影样式 .post { margin-top: 60px; margin-bottom: 60px; padding: 25px; -webkit-box-shadow: 0 0 14px rgba(202, 203, 203, .5); -moz-box-shadow: 0 0 14px rgba(202, 203, 204, .5); }主要为三个CSS样式的修改
.post-button .btn .post-button .btn a .btn:hover, .post-button .btn:hover最后一个为伪类，有时候查找元素的时候不能第一时间看到，多抓取几次。
也可以自己在本地编辑器测试修改.btn:hover, .post-button .btn:hover样式下的属性，测试显示效果就行。 默认主题下把鼠标移入按钮时的样式中，按钮下方有个阴影，是主题自带的，如果不想要可以添加对应的CSS样式 border:none来取消这效果，然后调整一下圆角值，居中设置，还有颜色的变化，大家自己参考下我之前发的样式表，或自己测试。
文章详情样式修改
这个样式的修改和前面首页那个的样式基本一致，所以此处跳过，但是说一点 图中框内的图标元素更改CSS样式是无法更改的，我更改了字数统计和阅读市场的ICON，具体做法大家可以看我以前写过的一篇文章，要在源码中更改CSS的值。
最大的红框部分的内容都不是我编辑的文章里的，都是我更改了源代码加入的DIV样式标签形成的效果，当然还可以在每一篇文章最后加入对应的代码也可以，但是为了麻烦每次来粘贴所以我就没去这样做
修改文章模板文件 哪个是文章主要内容的模板文件，对应的路径themes\next\layout\_macro\post.swig 文章底部的代码位置如下：
{{ content.substring(0, theme.auto_excerpt.length) }} {% if content.length > theme.auto_excerpt.length %}...{% endif %} <div class="post-more-link text-center"> <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#more{% endif %}" rel="contents"> {{ __('post.read_more') }} » </a> </div> {% else %} {% if post.type === 'picture' %} <a href="{{ url_for(post.path) }}">{{ post.content }}</a> {% else %} {{ post.content }} {% endif %} {% endif %} {% else %} {{ post.content }} ### 编辑区域 {% endif %}那个打赏功能是主题自带的一个参数配置，大家可以去next主题官方文档上看。
小红框里面的一条线，有些人觉得想换样式，换颜色或直接去掉。 直接在.post-nav下加入一个样式
.post-nav { border: none; }文章阅读次数的统计深入讲解
再次用下这张图，我这里面的阅读次数是通过leanCloud,来实现文章阅读量统计的，next主题还自带了一个不蒜子的统计参数配置，相信大家用过了，在主题的配置文件里有如下代码：
# Show PV/UV of the website/page with busuanzi. # Get more information on http://ibruce.info/2015/04/04/busuanzi/ 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: <i class="fa fa-user"></i> 访问用户： site_uv_footer: 人 # custom pv span for the whole site site_pv: true site_pv_header: <i class="fa fa-eye"></i> 访问次数： site_pv_footer: 次 # custom pv span for one page only page_pv: false page_pv_header: <i class="fa fa-file-o"></i> 点击量 page_pv_footer: 次我设置page_pv为false因为我打算用leanCloud来实现,因为用不蒜子这个来统计是没问题，但是它说了 # custom pv span for one page only意思是只显示在文章相应这里，你在首页是看不到阅读次数统计的，对用户体验来说十分不好，所以打算用leanCloud，如果觉得首页不展示阅读次数什么的无所谓的，就可以用next主题的不蒜子插件，具体的查看官方文档上面有写方法。
这是我自己总结的学习路线，比较简洁，一般跟着这个走，这些知识都学会了找到工作没有任何的问题。有什么前端不懂的问题可以随时问，希望帮助每一个想学习的小伙伴学到东西，这是我的web前端新手学习群445107486，刚开始学习前端的朋友可以去加下，群里有很多免费的学习视频分享，多在群里交流问我，有不会的可以在群里随时问哦！【网页制作大神学习群】：二维码页面
这里讲下官方文档上没有详细说明的leanCloud,来实现文章阅读量统计的方法
leanCloud来实现阅读统计
我现在版本的next主题是集成了这个插件的，并且给出了对应的参数配置
# Show number of visitors to each article. # You can visit https://leancloud.cn get AppID and AppKey. leancloud_visitors: enable: true app_id: TxBSdzFliqxOpec29xEd8pO5-gzGzoHsz app_key: 5rH911Nhs9V7AWFjEYqe8Bz7过程是： 1.注册leancloud账户并完成验证后登录leanCloud的，创建应用并配置相关操作 2.获取对应的AppID和AppKey 3.配置相应参数完成阅读文章的数量的统计
过程省略...没啥好说的
我之前已经创建好了一个Class名为Counter,创建成功就会出来了。
设置主题配置文件
设置主题配置文件_config.yml相关字段，实现阅读数量的统计 添加以下字段
leancloud_visitors: enable: true app_id: #你的App ID app_key: #你的的App Key完成配置并重新编译。
通过在本地服务器测试是看不到阅读次数的统计的，所以要发布到网上查看才行。
酷炫的博客背景
背景的几何线条是采用的nest效果，一个基于html5 canvas绘制的网页背景效果，非常赞！来自github的开源项目canvas-nest 特性
不依赖任何框架或者内库，比如不依赖jQuery，使用原生的javascript。 非常小，只有1.66kb，如果开启gzip，可以更小。 非常容易实现，配置简单，即使你不是web开发者，也能简单搞定。使用非常简单
color: 线条颜色, 默认: ‘0,0,0’ ；三个数字分别为(R,G,B)，注意用,分割 opacity: 线条透明度（0~1）, 默认: 0.5 count: 线条的总数量, 默认: 150 zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1next/layout/_layout.swig，在body标签之前添加如下代码：
{% if theme.canvas_nest %} <script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script> {% endif %}打开next/_config.yml，添加以下代码：
# Canvas-nest canvas_nest: true如果是最新的next主题是集成了这段代码的，如果没手动添加，有就设置为true
重新编译配置后，在本地测试就能看到效果了。
在首页菜单里添加的独立的标签页
标题的意思大概是文章列表实现 效果如图：
1、修改HEXO POST模板，添加categories。以后的文章将会以此作为模板新增。 2、新增一文章，并修改分类属性。分类属性如果被设置，在HEXO编译会生成对应分类目录 3、修改主题配置文件(config.yml),添加MENU分类字段 ,导航栏显示分类链接 4、假定为中文网站，修改主题目录下的语言配置文件(zh-Hans.yml) .导航栏链接显示中文
添加categories 在你的HEXO根目录下，找到文件夹scaffolds，此文件夹下定义创建文章的基本模型，你可以修改此模板 实现每次进行HEXO NEW 文章名，文章会以您的模板进行对应配置属性创建。这里我们主要是新增categories 字段，让每次新增文章都会打上此属性字段。 scaffolds里有三个文件分别对应草稿、页面、文章，建议都加上如下代码：
--- title: {{ title }} date: {{ date }} tags: categories: ---新增一文章，并修改分类属性 新建文章后如： hexo new 你的文章名，并打开您的文章，在categories写上你的分类名字， 此操作后并保存文档，在你进行hexo g编译的时候会在你的PUBLIC目录下的 categories下建立以你分类名字命名的 文件夹， 以后的链接将定向到此文件夹。(本文的测试分类名为：life 中文名生活)
修改代码大概如下，参考下就行了。
menu: home: / categories: /categories about: /about archives: /archives tags: /tags #commonweal: /404.html #sitemap: /sitemap.xml life: /categories/life technology: /categories/technology路径为themes\next\languages 文件为zh-Hans.yml 修改代码如下
menu: home: 首页 archives: 归档 categories: 分类 tags: 标签 about: 关于 search: 搜索 schedule: 日程表 sitemap: 站点地图 commonweal: 公益404 life: 生活 technology: 技术重新编译预览下效果。
小编是一个有着5年工作经验的前端开发工程师，关于前端编程，自己有做材料的整合，一个完整的前端编程学习路线，学习材料和工具，＋我的威信收取，免费送给tanzhou-10838大家，希望你也能凭着自己的努力，成为下一个优秀的程序员。
