hexo 新建页面并自定义页面布局与样式

• #hexo

一、准备工作

本文假设读者已经创建了 hexo 博客，并且项目目录包含 source 和 themes 两个文件夹。

|-- <your-blog-name>
    |-- soruce
    |-- themes
        |-- <your-theme-name>     # 你自己选择的主题
            |-- layout
            |-- soruce
                |-- css

接下来我们为博客添加一个页面: 我的动态，访问路径是 /dynamic。

我们现在访问 http://localhost:4000/dynamic 页面会报错 Cannot GET /dynamic

二、添加页面

在项目根目录下的 source 目录下创建文件或文件夹，除了以下划线 _ 开头的文件或文件夹外，其它文件或文件夹都会被处理成路由。

在 source 目录下新建 dynamic.md 文件，写入如下内容:

---
title: 我的动态
---

第一天：

今日阳光正好，微风不燥，心情格外舒畅，准备迎接新的挑战与美好。

第二天：

忙碌的一天结束，收获满满当当，期待明天能有更多的惊喜和进步。

第三天：

品尝了美味的甜品，瞬间觉得生活甜滋滋，烦恼都烟消云散啦。

此时访问 http://localhost:4000/dynamic/ 可以看到页面了。

如果 source 目录下有文件夹，自动生成的路由规则如下:

|-- source
    |-- test
        |-- index.md        # 通过 http://localhost:4000/test 访问
        |-- dynamic.md      # 通过 http://localhost:4000/test/dynamic 访问

三、自定义页面布局与样式

上一步创建了 dynamic 页面，通过在 source/dynamic.md 里写入文字作为 dynamic 页面的内容。

接下来介绍自定义页面布局与样式，通过编程方式完全控制布局与样式，最终实现如下效果。

1.

修改 source/dynamic.md 文件

---
title: 我的动态

list:
- date: 第一天
  content: 今日阳光正好，微风不燥，心情格外舒畅，准备迎接新的挑战与美好。
- date: 第二天
  content: 忙碌的一天结束，收获满满当当，期待明天能有更多的惊喜和进步。
- date: 第三天
  content: 品尝了美味的甜品，瞬间觉得生活甜滋滋，烦恼都烟消云散啦。

layout: dynamic
---

文件开头的 yaml 语法中定义了三个变量: title、list、layout。

• title: 页面标题

• list: 将原先写在 md 文件中内容写到文件开头的 yaml 中，yaml 语法转换为 json 语法数据如下:

list: [
    {
        date: '第一天',
        content: '今日阳光正好，微风不燥，心情格外舒畅，准备迎接新的挑战与美好。'
    },
    // ...
]

• layout: dynamic 表示这个页面使用 dynamic 布局文件，也就是下一步创建的 themes/<your-theme-name>/layout/dynamic.pug 文件。

2.

新建 themes/<your-theme-name>/layout/dynamic.pug 文件，写入如下内容:

link(rel='stylesheet', href=config.root+"css/dynamic.css")

div.container
    h1.dynamic-title #{page.title}
    each val in page.list
        div.list-group-item
            div.list-group-item-date #{val.date}
            div.list-group-item-content #{val.content}

这里定义了页面布局与样式，我的主题是用的是 pug 模版引擎，其它模版引擎如 ejs，语法类似。

模版里使用了 page.title、page.list 两个变量，这些变量都是在 source/dynamic.md 文件开头 yaml 里定义的变量。

模版里使用的 css 文件，也就是下一步创建的 themes/<your-theme-name>/source/css/dynamic.css 文件。

3.

新建 themes/<your-theme-name>/source/css/dynamic.css 文件，写入如下内容:

.container {
    padding: 10px 40px;
}

.dynamic-title {
    line-height: 1.0;
    color: #666666;
    text-align: center;
}

.list-group-item {
    margin-bottom: 40px;
    border: 1px solid #c0d3eb;
    padding: 0px;
    border-radius: 6px;
    position: relative;
}

.list-group-item:not(:last-child)::after {
    position: absolute;
    top: 0;
    bottom: -40px;
    left: 15px;
    display: block;
    width: 2px;
    content: "";
    background-color: #e1e4e8;
    z-index: -1;
}

.list-group-item-date {
    font-size: 90%;
    background-color: #f1f8ff;
    border-bottom: 1px solid #c0d3eb;
    color: #000;
    padding: 5px 20px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    position: relative;
    z-index: 1;
}

.list-group-item-content {
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
    position: relative;
    z-index: 1;
}

↶ 返回首页 ↶