Hexo 简约主题,响应式设计支持 PC、平板、手机等设备,代码高亮使用 monokai-sublime 风格,支持亮/暗色主题跟随系统。可以最低兼容到 IE8。在线预览。
因为这个主题使用了 less 编译,Hexo 默认的编译器为 hexo-renderer-stylus 要切换为 hexo-renderer-less。
$ npm install hexo-renderer-less --save
如果你不需要 hexo-renderer-stylus
可以把它卸载掉。
$ npm uninstall hexo-renderer-stylus --save
$ git clone https://github.com/sanonz/hexo-theme-concise.git themes/concise
Concise 主题需要 Hexo 2.4 或者更高的版本
_config.yml
站点配置文件中 把 theme
值改为 concise
.themes/concise/_config.example.yml
配置文件为 themes/concise/_config.yml
$ cd themes/concise
$ git stash --include-untracked
$ git pull
$ git stash pop
修改 themes/concise/_config.yml
主题配置文件。
# Header
menu:
首页: /
前端: /categories/front-end
后端: /categories/back-end
标签: /tags
归档: /archives
订阅: /atom.xml
关于: /about
# Content
excerpt_link: 阅读更多
content_max_width: 800px
# Sidebar
author:
name: Sanonz
work: Web Developer & Designer
location: Shenzhen, China
avatar_url: /images/avatar.jpg
# Links:
links:
- svg: ./source/svg/_github.svg
url: https://github.com/sanonz
- svg: ./source/svg/_more.svg
url: http://weibo.com/sanonz
- svg: ./source/svg/_twitter.svg
url: https://twitter.com/sanonze
# github comment
git_commit:
enable: true
client_id: 7fbe80427f54741e289f
client_secret: f34ed5fd92e54c9000bd37ba951948cb939deff5
repo: sanonz.github.io
owner: sanonz
admin:
- sanonz
per_page: 10
# Baidu
baidu:
id: e4027971a230b210f4671f485b33846a
# Miscellaneous
rss: /atom.xml
favicon: /images/favicon.ico
800px
_
前缀<head>
标签中显示 RSS 链接./source/svg
目录,按着如下例子配置。links:
- svg: ./source/svg/_github.svg
url: https://github.com/sanonz
- svg: ./source/svg/_mail.svg
url: mailto:sanonz@126.com
- svg: ./source/svg/_twitter.svg
url: https://twitter.com/sanonze
comments
设置为 false
,默认为 true
,例如: ---
title: Hello World
date: 2017-10-20 20:00:00
+ comments: false
---
source/about/index.md
文件添加个人介绍。$ hexo new page about
INFO Created: /Projects/blog/source/about/index.md
source/tags/index.md
文件,添加 layout: tags
。$ hexo new page tags
INFO Created: /Projects/blog/source/tags/index.md
---
title: tags
date: 2019-09-29 17:27:33
+ layout: tags
---
categories
字段然后访问 /categories/front-end
。 ---
title: Hello World
date: 2017-10-20 20:00:00
+ categories: front-end
---
30
篇。# Archive page setting
archive_generator:
per_page: 30
order_by: -date
阅读更多
按钮,在需要截断的地方插入 <!-- more -->
注释。 ---
title: 我发布的第一篇文章
---
这里写简介。
+ <!-- more -->
这里的内容进入详情才能看到。
打开 https://sanonz.github.io/ 鼠标右键 显示网页源代码
选项查看效果,如果你也想要这种效果的话按照以下步骤添加。
首先安装 hexo-all-minifier 插件。
$ npm install hexo-all-minifier
然后在站点配置文件中 _config.yml
启用插件。
+ # optimizes HTML, CSS, JS and imagages
+ all_minifier: true
安装 cross-env 跨平台环境变量设置脚本。
$ npm i cross-env
生成站点,当 process.env.NODE_ENV=production
时 hexo-all-minifier
插件才工作。
$ cross-env NODE_ENV=production hexo generate
生成后验证 public
目录内的静态文件是否是混淆压缩过的。
为了方便以后使用可以加到 package.json
文件的 scripts
字段中。
{
// ...
"scripts": {
+ "start": "cross-env NODE_ENV=development hexo server",
+ "deploy": "cross-env NODE_ENV=production hexo generate --deploy"
},
// ...
}
start
为本地启动命令,deploy
为部署命令。
更多插件相关配置请到插件主页查阅。