使用

安装

与使用 Hexo 其他主题一样简单，将 Acorn 主题的整个文件夹 Clone or Copy 至 Hexo 主题目录：themes 下即可。

1
$ git clone https://github.com/zhwangart/hexo-theme-acorn.git themes/acorn

或者，Copy acorn 整个文件夹至 Hexo 主题目录：themes 下。

直接访问 GitHub 仓库：//github.com/zhwangart/hexo-theme-acorn

启用

确保 acorn 整个文件夹已存在 Hexo 主题目录，然后在 _config.yml 中配置：

1
theme: acorn

注意：是根目录的 _config.yml 而不是主题中的配置文件。

配置

  1. Hexo 站点配置

您可以在根目录 _config.yml 中修改大部分的配置，主要是写入站点基本信息，详见：Hexo 配置。

  1. Acorn 主题配置

通过主题 _config.yml 配置站点菜单、备案信息等自定义文字信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# Header
menu:
  首页: /
  画廊: /gallery
  案例: /stories
  新闻: /archives
  关于: /about

# Content
excerpt_link: 阅读全文

# Toc
toc: true

# MIIT ICP/IP/DOMAIN
beian: 
  enable: false
  number: 
  url: https://beian.miit.gov.cn/

# Miscellaneous
favicon: /favicon.ico
webclip: /images/webclip
brand:   /images/brand.svg

# Jumbotron video & Hero image
## Jumbotron video
video: 
  overlay: true
  path: /images/
## Hero image
hero: 
  image: /images/banner.jpg
## keen-slider
keen_slider: 
  enable: false

# Slogan
slogan:
  primary: 焕然一新
  secondary: Acorn 是一颗适用于中小企业的 Hexo 主题
  archives: 心随艺动 演绎无处不在
  pages: 设计 让人生更精彩
  posts: 创意 让生活更美好

注意：主题配置文件目录：themes/acorn/_config.yml，不是根目录的 _config.yml。

色彩

焕然一新

Acorn 单独设计了一个色彩配置文件 _colors.styl （sccure/css/_colors.styl）简单来说只需要配置一下其中的 vis-primary-color 与 vis-secondary-color 这 2 个颜色即可使主题焕然一新，通常我们会使用企业 VIS 中已规定好的颜色，或者也可以从 Logo 上吸取颜色。

企业还没有 VIS 没有 Logo 怎么配置色彩？没关系，我们这里有 配色方案，也有 Logo 设计 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Primary
vis-primary-color            = #1e90ff
vis-primary-color-darken     = darken(vis-primary-color, 10%)
vis-primary-color-lighten    = lighten(vis-primary-color, 10%)

// Secondary
vis-secondary-color          = #ffa502
vis-secondary-color-darken   = darken(vis-secondary-color, 10%)
vis-secondary-color-lighten  = lighten(vis-secondary-color, 10%)

// Functional
vis-success-color            = #7bed9f
vis-danger-color             = #ff6b81
vis-warning-color            = #eccc68
vis-info-color               = #70a1ff
企业 VIS 色彩变量描述：

vis-primary-color 与 vis-secondary-color 会决定整体网站的颜色。

VIS 色彩变量 描述
vis-primary-color 主色，决定网站整体色系的颜色
vis-primary-color-darken 使主色明度变暗 10% 的颜色，使用于 active、check 事件
vis-primary-color-lighten 使主色明度变亮 10% 的颜色，使用于 Hover 事件
vis-secondary-color 次要色，作用于网站整体的辅助色
vis-secondary-color-darken 使次要色明度变暗 10% 的颜色
vis-secondary-color-lighten 使次要色明度变亮 10% 的颜色
辅助色彩变量描述：

除了主色外的场景色，需要在不同的场景中使用颜色来增加含义，提供视觉上的指示（例如危险色表示危险的操作），可忽略。

辅助色彩变量 描述
vis-success-color 成功提示信息
vis-danger-color 错误、失败、严重警告
vis-warning-color 警告、强调
vis-info-color

如上色彩空间数值可以是 RGB、HEX、RGBA、HSL、HSLA ，darken 与 lighten 百分比可自行调整，也可以是一个具体的色彩空间数值。

颜色函数是CSS预处里器中内置的颜色函数功能，这些功能能够对颜色值进行处理，例如颜色的变亮、变暗、渐变颜色等处理十分的方便。

1
2
3
4
lighten(color, 10%)       // 返回的颜色在 'color' 基础上变亮 10%
darken(color, 10%)        // 返回的颜色在 'color' 基础上变暗 10%
saturate(color, 10%)      // 返回的颜色在 'color' 基础上饱和度增长 10%
desaturate(color, 10%)    // 返回的颜色在 'color' 基础上饱和度下降 10%