之前从 Wordpress 切换到 Hexo 的时候也是分享过一款主题, 自从体会到 Hugo 速度的快感和无依赖性的便利之后,我想我是不会再折腾 Hexo 了。博客一直挂着 Coming Soon 了很久,只是因为实在找不到比较喜欢的主题,前后花了差不多三个周末的时间参考 Hugo 官方文档和一些主题,制作了一款Hugo主题。本来不少功能都直接写死了,今天花了点时间抽取成变量,方便直接在主题配置文件中配置。我喜欢简单,主题用了大量的留白,分享需要取个名字,就想叫 leave it blank, 觉得有点长,就直接叫 LeaveIt

Update: 2018-09-16

特色

支持 Dark/Light 模式切换。

目前是点击网站标题前的爱心即可切换主题,对于这个交互其实不太满意,但是又没有想到比较好的方式。如果你有比较好的交互建议,欢迎反馈或提交 pull request。 切换后会将配置保存到 LocalStorage 中,只要用户不清除缓存每次打开网站时就会显示默认选择的主题。

暗黑模式
暗黑模式

图片懒加载

图片懒加载是比较常见的一种网页性能优化的方案,不仅可以提高网页的加载速度,也可以节省带宽流量。目前我是将图片储存在阿里 CDN,流量都是钱呀。主题默认将文章中的所有图片都懒加载,你不需要额外的配置。

代码高亮

对于技术文章比较多的博客,代码高亮是一个硬需求。主题使用Google code-prettify高亮代码,同样也是无侵入式的,也会默认高亮文章中的代码。你可以从 这里 选择你喜欢的风格,然后替换assets/css/_prettyprint/default.scss

说明:主题中对代码块和行内代码添加了不同的样式。添加代码块时需要注明语言,行内代码则不需要。否则样式会重复。如果你之前写代码块都没有标语言,你又不需要行内代码高亮,你可以删除assts/css/_page/post.scss中code:not([class])的样式。

集成lightGallery 图片相册方式显示

如果你文章中插入的图片多于一张,点击图片的时候就会以 Gallery 方式显示。

lightGallery显示图片
lightGallery显示图片

安装

直接 cd 到 hugo 的 themes 目录然后下载即可:

git clone https://github.com/liuzc/LeaveIt.git

然后修改 cofig.toml 中的 theme字段为LeaveIt。

theme = "LeaveIt"

主题配置

参考exampleSite中的config.toml。

配置菜单

[menu]
  [[menu.main]]
    name = "Blog"
    url = "/posts/"
    weight = 1

  [[menu.main]]
    name = "Categories"
    url = "/categories/"
    weight = 2

  [[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 3

  [[menu.main]]
    name = "About"
    url = "/about/"
    weight = 4

配置 Social 链接。

需要说明的是我使用的是 iconfont,只添加了如下的社交账号图标:

[params.social]
    GitHub = "xxoo"
    Twitter = "xxoo"
    Email   = "xxoo"
    Instagram = "xxoo"
    Wechat = "/images/me/wechat.jpeg"  # Wechat QRcode image
    Facebook = "xxoo"
    Telegram = "xxoo"
    Dribbble = "xxoo"
    Medium = "xxoo"

如果你有自己的需求,需要制作自己的 iconfont 文件 (不要忘记了主题其他地方还有用到的几个图标)。 另外,Wechat是你微信的二维码图片的链接地址。

配置 CDN

如果你和我一样,将图片和 js 等资源储存在 CDN 服务器上,配置你的 cdn 链接后,生成生产环境的静态html 时,会将图片的链接修改为 CDN 链接,这样也是优化网页的加载速度。

cdn_url = "https://you_cdn_url"

CDN 链接只在 生成生产环境 的html 时才会替换,预览时仍然显示的是本地的链接。所以在运行生成命令时 需要添加环境变量

HUGO_ENV=production hugo --gc --minify

自定义主题样式

主题使用了 scss,如果你想修改主题的字体和链接的颜色,修改assets/css/_varibales/default.scss文件中的变量值即可。 如果还有其他个性化的样式要求哦,可以直接添加到 assets/css/_custom.scss 中。

制作 Favicons

推荐一个制作 Favicons 的网站:https://realfavicongenerator.net/ 除了 web 浏览器,还会生成手机桌面图标。

其他说明

上面介绍 cdn 时已经说明在生成网站时需要添加环境变量,建议直接在 blog 目录新建一个 deploy.sh ,文件,将生成、上传命令写在一个文件中,每次写完文章后,直接运行 deploy.sh 即可。

touch deploy.sh
chmod +x deploy.sh

例如我的 deploy.sh:

rm -rf public/
HUGO_ENV=production hugo --gc --minify
# 同步图片资源到 oss
ossutilmac64 cp -r -u public/images oss://liuzhichao/images --exclude '.DS_Store' --jobs=10
ossutilmac64 cp -r -u public/js oss://liuzhichao/js --exclude '.DS_Store' --jobs=10
# 同步站点资源到服务器
rsync -avz --delete public/ blog:/var/www/liuzhichao.com

每次生成站点时,先删除 public 目录,然后生成静态文件,然后使用 ossutil 同步图片和 js 文件到阿里 OSS,最后使用 rsync 同步到服务器。 我直接配置了~/.ssh/config 和 SSH Key,所以使用 rsync 十分方便。

其他好像没什么需要说明的了,如果有任何问题,欢迎 反馈

Github: https://github.com/liuzc/LeaveIt