基础知识
css样式
- hexo/themes/next/source/css/: 是next主题的样式文件,决定主题的外观。
- hexo/themes/next/source/css/main.styl:汇总css文件夹中所有的样式。
- hexo/themes/next/source/css/ _custom/custom.styl:是空的,专门让开发者扩展。
修改css
进入网页,F12进入调试模式(本次以谷歌浏览器为例,注意点击箭头指向的小箭头)。

通过观察可以发现整个头部是包裹在一个header里而且大家把鼠标放上去也可以很清楚的看到标签包裹的是哪些部分,那么通过开发工具可以看到右边对应的是生成在这个标签上class里的一些样式设置。
点击需要自己DIY的模块,我们可以暂时直接在更改对应数值进行更改样式,直到得到自己满意的效果,最后才去next里的一些文件进行部分的添加和修改来达到我们的目的。
注意箭头的几个点即可,改好之后记得copy下代码。

修改代码:找到你主题文件夹里的对应位置D:\hexo\blog\themes\next\source\css里面有5个文件夹和一个styl文件,
main.styl主要用于打包CSS代码输出成CSS样式的main.css文件。
注意:本人不提倡去修改除了_custom下的其他4个文件里的源代码,可能后面出问题不好还原。
注释使用 // 而不是 # 。
给文章首页摘要添加阴影效果
打开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);
}
添加在线聊天
在主题配置文件,搜索下图关键字。在注释对应网址注册账号,左侧Set up & customize获取ChatraID以及进行样式定制



最低0.47元/天 解锁文章
1154

被折叠的 条评论
为什么被折叠?



