[TOC]

Hexo|Butterfly主题界面

Front-matter

Front-matter 是 markdown 文件最上方以 — 分隔的区域，用于指定个別文档的变量。

Page Front-matter 用于页面配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
*title: 页面标题
*date: 页面创建日期
updated: 页面更新日期
*type: 标签、分类和友情连接三个页面需要配置
comments: 显示页面评论模块
description: 页面描述
keywords: 页面关键字
top_img: 页面顶部图片
mathjax: 显示mathjax
katex: 显示katex
aside: 显示侧边栏
aplayer: 在需要的页面加载aplayer的js和css
highlight_shrink: 配置代码框是否展开
random: 配置友情连接是否随机排序
---

Post Front-matter用于文章页配置

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
---
title: 文章标题
date:
updated:
tags:
categories:
keywords:
description:
top_img:
comments:
cover:
toc:
toc_number:
toc_style_simple:
copyright:
copyright_author:
copyright_author_href:
copyright_url:
copyright_info:
mathjax:
katex:
aplayer:
highlight_shrink:
aside:
abcjs:
---

写作技巧

标签插件的原理

本文写作技巧是指，在编写文章时，我们有时候需要引用其他文章，或是使用md文件中未提供的语法。

你所记录的markdown文章，在网页端是以html格式呈现的，这点可以在网站中右键–>检查，进入开发者窗口验证。

image-20230709202301577

所以在md文件–>html网页过程中，我们可以通过添加代码，来实现markdown语法中不提供的功能，例如hexo提供了**标签插件(Tag Plugins)**，举例说明此服务的原理：

我们知道，markdown语法是不支持插入视频的，最多通过网页链接实现，而通过标签插件，我们可以在md文件中添加

{% youtube video_id [type] [cookie] %}

  • youtube：表示从YouTube网站拿取视频
  • video_id：youtube网站的视频号
  • type：‘playlist’，播放列表，video_id有多个视频号时(猜的)
  • cookie：boolean值，表禁用YouTube的cookie(不知道干嘛的)

hexo看到md文件中的{%%}，就知道要做什么，会自动插入相关前端代码，在浏览器中展示到用户面前，效果类似下图：

image-20230709204630898

markdown语法是允许直接添加html代码的，不过hexo为避免其他因素的影响，也提供了raw语法。

1
2
3
{% raw %}
	<html代码>
{% endraw %}

所以标签插件本质上可以理解为，就是添加了些前端代码，用来实现某些功能。

官方文档内容一览

hexo官方文档

主要内容大纲：

  • 写作

    • 布局(Layout)：标明是哪种页面，例如post(文章页)、draft(草稿页)、page(导航标签页)和tag(标签页)等等，hexo g时候会渲染成对应页面。theme主题会提供更多Layout。详细文章：初步了解Hexo站点的布局
    • 模板(Scaffold)：文章需要预设置Front-matter，模板就是提前设置好，新建时直接拿用。

  • Front-matter

    • 官方文档和主题文档都有介绍

    • 分类和标签

      分类方法的误区：分类具有顺序性和层次性，Hexo 不支持指定多个同级分类。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      categories:
        - Diary
        - Life
      # 分类Life是Diary的子分类，而不是并列分类。
      categories:
        - [Diary, PlayStation]
        - [Diary, Games]
        - [Life]
      # PlayStation和Games分别都是父分类Diary的子分类，同时Life是一个没有子分类的分类。

  • 标签插件

    • 大概浏览一遍，记下有需要的即可
    • 插入图片，能调整大小{% asset_img [class类名] 路径 [width] [height] %}

  • 资源文件夹

    • 用处不大，说的是创建文章时，可以自动创建一个新文件夹用来储存&调用。我图片一般用图床，很少存储到本地，这会出现一些不方便的问题。

  • 数据文件夹

    • 在写md文章时，假设我有一份人员名单文件(数据文件,YAML 或 JSON 格式)，我想在md文章中打印出来，除了复制粘贴，我们可以用脚本片段代码实现

      1
      2
      3
      4
      <% for (var link in site.data.文件名) { %>
        <a href="<%= site.data.文件名[link] %>"> <%= link %> </a>
      <% } %>
      # data为数据文件夹

  • 服务器

    • hexo server相关内容，过一遍即可

  • 生成器

    • hexo generate相关命令，看看即可

  • 辅助函数

    • 和前端知识相关性较大，属于进阶知识

  • 插件

  • 主题、模板、变量都需要了解

butterfly主题官方文档，内容较多，需一步步按照自己喜欢的样式修改，这里提几个关键内容：

  • Butterfly 安裝文檔(二) 主題頁面
    • 标签页
    • 分类页
    • 友情链接
  • Butterfly 安裝文檔(三) 主題配置-1
    • 标签外挂的用法
  • Butterfly 安裝文檔(四) 主題配置-2
    • 搜索
    • 评论
    • inject
  • Butterfly 安裝文檔(六) 進階教程
    • Icon

在文章中引用另一篇文章

markdown语法引用链接

1
[文字标题](url链接)

该方法优点是方便，缺点是url链接容易改变，因为博客中文章的链接通常是http://***/2023/06/28/Hexo教程(二)博客写作，如果更改date和title，该链接就失效了，所以用下面的方法会更好。

标签插件方法

虽然可以直接写入文章最终链接的方法引用，但是如果原本的文章链接变化了，就不能使用了，所以最好的方法就是在生成系统之内直接引用。

1
2
{% post_path filename %}
{% post_link filename [title] [escape] %}