页面

创建

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

1
$ hexo new [layout] <title>

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

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

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

1
$ hexo new page about

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

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

首页

这里主要介绍第一屏,目前我们设计了 3 个模板:jumbotronherocarousel,根据实际需求选择,默认我们使用的是 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 可以设计该区域的布局样式。

  • keen_slider 我们使用了 rcbyr 在 Github 上的滑动和轮播 JS 插件,代码仓库://github.com/rcbyr/keen-slider ,同 hero 一样自定义内容,通过 keen_slider.styl 设计布局样式,或者使用 Acorn 已有的 flex 布局属性。在 themes/_config.yml 中启用:

    1
    2
    3
    ## keen-slider
    keen_slider:
    enable: true

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