sanonz / hexo-theme-concise

Hexo 简约主题,响应式设计支持 PC、平板、手机等设备,代码高亮使用 monokai-sublime 风格,支持亮/暗色主题跟随系统。可以最低兼容到 IE8。
https://sanonz.github.io
MIT License
171 stars 38 forks source link

Concise

Hexo 简约主题,响应式设计支持 PC、平板、手机等设备,代码高亮使用 monokai-sublime 风格,支持亮/暗色主题跟随系统。可以最低兼容到 IE8。在线预览

Preview

前提

因为这个主题使用了 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 或者更高的版本

切换

  1. _config.yml 站点配置文件中 把 theme 值改为 concise.
  2. 复制 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

小技巧

想要自定义 icon 的话,可以到 fontawesomeiconfont 下载 svg 格式图标,放到 ./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
  ---

访问关于页面 404,执行以下命令,然后在 source/about/index.md 文件添加个人介绍。

$ hexo new page about
INFO  Created: /Projects/blog/source/about/index.md

访问 Tags 页面 404,执行以下命令,然后修改 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
  ---

单独设置归档 (Archive) 每页显示文章数量,例如每页 30 篇。

# Archive page setting
archive_generator:
  per_page: 30
  order_by: -date

列表文章显示 阅读更多 按钮,在需要截断的地方插入 <!-- more --> 注释。

  ---
  title: 我发布的第一篇文章
  ---

  这里写简介。

+ <!-- more -->

  这里的内容进入详情才能看到。

压缩混淆生成的 HTML、CSS、JS 文件。

打开 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=productionhexo-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 为部署命令。

更多插件相关配置请到插件主页查阅。

其它一些问题

  1. 解决订阅页面空白问题
  2. 添加 MathJax / KaTeX 数学公式支持
  3. 利用 Github Actions 自动部署 Hexo 博客