2019年最新基于hexo搭建个人免费博客——自定义页面样式二

2019年最新基于hexo搭建个人免费博客——自定义页面样式二

前言

本篇文章继续讲解一些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