数据

使用 Hexo 3.0 新增的「数据文件」功能。此功能会载入 source/_data 内的 YAML 或 JSON 文件。

样例数据

可以选择使用我们准备的样例数据，对应该文档完成页面初步搭建。将样例数据中 source 文件夹中的全部内容 Copy 至你站点对应的 source 文件夹中，刷新页面后即可看到使用该样例数据渲染的效果。

样例数据：//github.com/zhwangart/acorn-sample-data

注意：如果你的 source 文件夹中已有数据，请注意备份。

首页数据

创建 index.yml 文件，这里定义首页要渲染的内容与使用组件。

1
2
3
4
5
6
7
- name:  # 组件名称
  title: # 组件标题
  subtitle:  # 组件副标题或描述
  partial:   # 组件模板
  bg_color:  # 组件 section 背景颜色类名
  fluid:  # 内容宽度是否全屏展开，全屏：-fluid
  more:   # 更多，链接路径

说明：

变量 描述
name 组件名称，建议与模板 partial 类型一致
title 组件标题
subtitle 组件副标题或描述
partial 组件模板，详见下面：组件数据 部分内容
bg_color 组件 section 背景颜色类名，例如：bg-light
fluid 组件 section 宽度，如需占有页面全部宽度，则写入：-fluid
more 更多，链接路径，如：/archives

组件数据

为了展示不同内容，我们设计了丰富的组件模板：culture、album、instapic、quotation、products、stories、contact、links，使用组件需要在 source/_data 中创建对应的 yml 文件，然后写入数据。

culture

创建 culture.yml 文件，企业文化或产品特点，建议不超过 4 组。

1
2
3
4
5
6
- name:    # 名称/标题
  en_name: # 英文名称，可为空
  description: # 描述文字
  feather: # Feather 类名，如：book
  cover:   # 图标路径，如：/images/icons/acron.png
  link:    # 链接路径，可为空

Acron 已经引入了 Feather 图标，这里如果使用 Feather 的话，需要修改 layout/_partial/culture.ejs 模板文件：

1
<img class="mb-4" src="<%=url_for(site.data.culture[item]['cover']) %>" alt="<%=site.data.culture[item]['name'] %>" width="<%=site.data.culture[item]['cover_size'] %>" height="<%=site.data.culture[item]['cover_size'] %>">

改为：

1
<i data-feather="<%=site.data.culture[item]['feather'] %>" color="#7a3818" stroke-width="1.5" width="32" height="32"></i>

渲染效果

culture

album

创建 album.yml 文件，用于产品、相册、图片类展示。

1
2
3
4
5
6
- name:    # 标题
  en_name: # 英文标题
  description: # 描述文字
  cover:   # 封面图片路径，如：/images/album/cd_1.jpg
  link:    # 链接路径
  preview: # 链接路径，如需跳转其他页面，此处写该页面路径

如我们写入了 6 组如上数据，那么渲染效果如下图：

album

建议数据在 4～6 组之间，写入 5 组数据，端渲染效果：

album

写入 4 组数据渲染效果：

album

instapic

创建 instapic.yml 文件，Logo/图片墙

1
2
- name:  # 客户名称
  cover: # 客户 LOGO 路径，如：/images/customers/acron-logo.svg

渲染效果

instapic

quotation

创建 quotation.yml 文件，引用客户评价，通常位置在 instapic 下方。

1
2
3
- number: # ID，这里数字从 0 开始，不可为空
  name:   # 客户名称，如：数学家
  words:  # 客户的称赞内容

渲染效果

quotation

products

创建 products.yml 文件，产品列表，这里设计了卡片形式。

1
2
3
4
5
6
- name:    # 标题
  en_name: # 英文标题
  description: # 描述内容
  cover:   # 封面图片路径
  link:    # 链接路径，无链接为空即可
  preview: # 预览路径，无则可以为空

渲染效果

cards

stories

创建 stories.yml 文件，故事/案例，数据、渲染效果与 products 数据一致。

contact

创建 contact.yml 文件，这里展示页脚的联系方式

1
2
3
4
- name:    # 名称，如：微博
  en_name: # 英文名称，可为空
  icon:    # 图标路径，如：/images/icons/weibo.svg
  link:    # 链接路径，如：https://weibo.com/uhweb/

渲染位置与效果如下图所示：

contact

创建 links.yml 文件，这里展示页脚的联系方式

1
2
- name: # 名称，如：新橙象
  link: https://imaging.xin

渲染位置与效果如下图所示：

links