页面

创建

首先请仔细阅读 Hexo 写作，执行下列命令来创建一篇新文章或者新的页面。

1
$ hexo new [layout] <title>

Hexo 有三种默认布局：post、page 和 draft 。在创建这三种不同类型的文件时，它们将会被保存到不同的路径；而您自定义的其他布局和 post 相同，都将储存到 source/_posts 文件夹。

简单粗暴点，注意这个目录 source/_posts ，把我们外边写好的 MarkDown 文稿，放进去即可！如果没有 Front-matter 内容，按照我们提供的 样例数据 格式写入，刷新页面就出来了。

创建页面稍微有点不一样，比如我们以创建关于页面，执行如下命令

1
$ hexo new page about

这样会在 source 文件夹中创建一个 about 的文件夹，里面的 index.md 文稿，就是我们的关于页面。简单粗暴点，从外边拽一个里面有 index.md 文稿的 about 文件夹到 source 行吗？肯定行！

这里需要注意一下，文件或者路径名，最好写英文或者拼音，尽量不要直接写中文。

首页

这里主要介绍第一屏，目前我们设计了 3 个模板：jumbotron、hero、carousel，根据实际需求选择，默认我们使用的是 hero，在 layout/index.ejs 中可修改此项。

  • jumbotron 使用一个视频作为背景，该区域会占满第一屏屏幕的高度，颇具视觉冲击力效果，Acorn 内置了一个 2.6MB 视频文件 meri_snow_mountain.mp4 如果我们不使用 jumbotron 模版，可以删除该视频以及视频关联图片 meri_snow_mountain.png 文件。主题配置文件 themes/_config.yml 中仅可设置视频路径。

    1
    2
    3
    4
    ## Jumbotron video
    video: 
      overlay: true
      path: /images/

    为了兼容更多的浏览器，我们通常需要至少准备 mp4、ogv、webm 三种格式的视频文件，放在同一目录中。

  • hero 空白区域，自定义内容，这里我们默认设置了一个背景图片，在 themes/_config.yml 中设置图片与文字：

    1
    2
    3
    4
    5
    6
    7
    8
    ## Hero image
    hero: 
      image: /images/banner.jpg

    # Slogan
    slogan: 
      primary: 焕然一新
      secondary: Acorn 是一颗适用于中小企业的 Hexo 主题

    通过 source/css/_partial/hero.styl 可以设计该区域的布局样式。

  • swiper 代码仓库：//github.com/nolimits4web/swiper ，同 hero 一样自定义内容，通过 css/_partial/swiper.styl 设计布局样式，或者使用 Acorn 已有的 flex 布局属性。在 themes/_config.yml 中启用：

    1
    2
    3
    4
    ## Swiper
    ## https://github.com/nolimits4web/swiper
    swiper: 
      enable: false

Front-matter

Front-matter 是文件最上方以 --- 分隔的区域，用于指定个别文件的变量，详见：Hexo Front-matter。本文主要详细介绍 post 文章封面图与 page 页面布局配置项，以及一些补充参数。

post

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 滕王阁序
date: 2012-12-21 02:00:00
tags: 
  - 滕王阁序
  - 王勃
categories: 
keywords: 滕王阁序,王勃,初唐四杰
description: 情由景生，写景是为抒情、景、情相互渗透，水乳交融。浑然天成，恰似行云流水，挥洒自如，自然流畅。
photos: [
  ["/images/sample/mydesk.png"]
] 
---
参数 描述
keywords 文章关键词，主要用于搜素引擎抓取与分类，如上：使用英文 , 隔开
description 文章描述/简介，不超过150个字符
photos 页面封面图，可为多张需自定义布局
author 文章作者
avatar 文章作者头像

page

  1. 普通 MarkDown 页面，如 About 其实只写一个标题也是可以的，如上 post 中的部分参数（tags、categories、keywords、description）也可以写在这里。
1
2
3
4
---
title: 关于
date: 2022-02-22 22:22:22
---
  1. 载入 source/_data 内的 YAML 或 JSON 文件中数据的，如 Gallery 同样 post 中的部分参数（tags、categories、keywords、description）也可以写在这里。因为数据是从 _data 中载入的，所以这里不需要写入任何内容。
1
2
3
4
5
6
---
title: 画廊
data: gallery
layout: plugins
partial: gallery
---
参数 描述
data 页面数据来源，source/_posts 文件夹中对应的文件名
layout 页面布局，plugins 为我们自定义的一个 flex 布局容器，可根据 partial 的设计渲染不同样式的页面
partial 如果 layout 使用 plugins 那么需要指定或者设计一个 partial 模版，如 gallery