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