hexo干货系列:(三)hexo的Jacman主题优化

前言


上一篇介绍了Jacman主题的安装和配置,今天根据上次的基础做了些优化,让博客看起来很舒服。

正文


首页文章展示摘要


该主题首页文章列表默认是全部展开,感觉不好,我关闭掉了,只展示少量摘要。
修改\themes\jacman下面_config.yml中的expand改成false即可

1
2
3
index:
expand: false ## default is unexpanding,so you can only see the short description of each post.
excerpt_link: Read More

主题背景色修改


我给主题添加了个背景图片,看清来很文艺
修改\themes\jacman\source\css\_base下的public.styl,找到body,添加background-image url('/img/bg.jpg'),图片放在\themes\jacman\source\img即可

1
2
3
4
5
6
7
8
9
10
11
12
body
background color-background
background-image url('/img/bg.jpg')
font-family font-default
font-size font-size
color color-font
line-height line-height
min-height: 100vh
display: -webkit-flex
display: flex
-webkit-flex-direction: column
flex-direction: column

顶部头像修改


默认的黑桃感觉不好看,我自己找了张图片替代,并且图片弄成圆形效果
修改\themes\jacman下_config.yml中的imglogo的src属性,我这里使用gif会动的图

1
2
3
4
5
6
7
imglogo:
enable: true ## display image logo true/false.
src: img/dudu.gif ## `.svg` and `.png` are recommended,please put image into the theme folder `/jacman/source/img`.
favicon: img/favicon.ico ## size:32px*32px,`.ico` is recommended,please put image into the theme folder `/jacman/source/img`.
apple_icon: img/jacman.jpg ## size:114px*114px,please put image into the theme folder `/jacman/source/img`.
author_img: img/author.jpg ## size:220px*220px.display author avatar picture.if don't want to display,please don't set this.
banner_img: #img/banner.jpg ## size:1920px*200px+. Banner Picture

这时候头像还是正方形的。修改\themes\jacman\source\css\_partial下的header.styl,在#imglogo这个下面新增border-radius 100%属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#imglogo
float left
width 4em
height 4em
@media mini
width @width+1
@media tablet
width @width+1.5
img
width 4em
border-radius 100%
@media mini
width @width+1.5
@media tablet
width @width+2

开启多说评论


修改\themes\jacman_config.yml中的duoshuo_shortname属性,

1
2
3
#### Comment
duoshuo_shortname: rlovep ## e.g. wuchong your duoshuo short name.
disqus_shortname: ## e.g. wuchong your disqus short name.

关于获取shoutname,大家注意了,shoutname不是你登陆的用户昵称,而是应该去多说首页点击我要安装,注册你的多说二级域名。去掉 .duoshuo.com 部分 就是你的shoutname,下图中tengj就是我的shoutname

配置文章模板


我们可以修改根目录下\scaffolds\post.md文件,配置好基本的信息,比如:

1
2
3
4
5
title: {{ title }}
date: {{ date }}
categories:
tags:
---

总结


暂时先优化这么多,已经感觉很不错了。我们关心的应该是内容,而不是死命折腾博客本身,总觉得它会被我们玩坏。冏

文章目录
  1. 1. 前言
  2. 2. 正文
    1. 2.1. 首页文章展示摘要
    2. 2.2. 主题背景色修改
    3. 2.3. 顶部头像修改
    4. 2.4. 开启多说评论
    5. 2.5. 配置文章模板
  3. 3. 总结
|