让自己的Hexo更漂亮(四)

前言

系列文章主要说一些 Hexo官方帮助文档 中没有或讲解不详细的的内容。该文是进阶文章,主要是通过自己修改CSS来实现自己想要的页面样式。

自定义样式

不得不说next还是很人性化的,你可以个性化定制你的网站,你所有的改动(css)需要放在主题文件的source/css/_costum/costum.styl文件中,会覆盖原来的css,所以只要你不想要你修改的样式,只需要删除这个文件里的内容就可以了,再也不用担心还原不回去了~

注意:本人不提倡去修改与_custom文件夹并列的其他4个文件夹里的源代码,可能后面出问题不好还原。

修改侧边栏

注意地方:在修改css的时候尽量写注释一定要记得,分模块来写,不要头部写了又写其他的部分的CSS,到时候不好维护

如修改侧边栏头像为圆形,源码如下

.site-author-image {
      /* start*/
      border-radius: 50%
      webkit-transition: 1.4s all;
      moz-transition: 1.4s all;
      ms-transition: 1.4s all;
      transition: 1.4s all;
    /* end */
}

尾部修改

尾部没什么好修改的,就是自定义下CSS让它好看点就行了,我用到了一个不蒜子的插件,next主题已经集成了,在主题配置文件中打开该功能即可。

如尾部署名LOGO,就是简单替换了fontawsome里的一个图标而已。

其他部分修改

基本上会自定义CSS修改已经能让你修改出你自己想要的风格了,但是主题的框架布局是不能改变的,你只能改变微小的样式而已。

其他小修改

背景是使用的Next主题自带的,并经过了一些微调

网易云播放器是第三方生成的添加到了生成页面框架的源代码里实现的。

其他内容

next主题的官网有很多配置的设置方法,大家可自行查看,自己动手,丰衣足食。接下来,我还会写一些关于Hexo优化的文章,以让我们自己的Hexo变得更Beautiful。感谢大家的关注。 :)

至此,Hexo的系列文章基本告一段落,之后在使用Hexo过程中遇到的一些问题,我都会更新到文章 Hexo踩坑。也欢迎大家评论留言,一起探讨。

林中亚 | Danny wechat
扫一扫,关注我的个人微信公众号 :)
坚持原创技术分享,您的支持将鼓励我继续创作!