gitee博客搭建

2023-12-28 12:46:16

使用代码托管平台搭建个人博客网站

0基本思路

1.使用本地的文档编辑形式 markdown 这里推荐使用markdown

2.使用hexo工具转换为网页文档(依赖于node.js)

3.使用代码托管平台，使用page服务，将网页进行展示

1.本地安装

安装hexo

npm install hexo -g

使用node.js将hexo下载并添加至环境变量中

npm install hexo-deployer-git --save 安装hexo自动上传至git插件(注意仓库名与文件夹名保存相同)

在gitee上创建仓库及SSH密匙配置

2.本地文件夹管理

使用hexo命令创建网站项目目录，并进行简单配置

hexo init myblog//在当前目录下创建文件夹

使用hexo命令创建文档，并编辑

hexo new blog-name//在当前文件夹中创立md文件

使用hexo命令进行网站的本地预览

hexo server//查看当前文件夹构成的本地网页

hexo clean & hexo server//每次上传注意清除并进行覆盖上传操作

修改配置文件_config.yml

url: https://YOUR_USERNAME.gitee.io/YOUR_REPO_NAME

root: /YOUR_REPO_NAME

deploy:

type: git

repo: https://gitee.com/YOUR_USERNAME/YOUR_REPO_NAME.git

branch: master

md转为网页文件并上传

hexo delpoy//转换后实现上传命令，调用的是插件，注意仓库名与文件夹名保存一致

开启page服务

在相应仓库的服务中开启page即可实现访问

3.日常使用

hexo new 'page name' hexo clean & hexo deploy

4.注意事项

修改googleapis的源https://sb.sb/blog/css-cdn/
国内避免一直加载无效

5.我的主题:fluid

当前使用的主题注意在_config.yml中修改language: zh-CN theme: fluid

有关主题的配置在主题文件夹中修改_config.yml

开始使用

#主题简介

Fluid 是基于 Hexo 的一款 Material Design 风格的主题，由 Fluid-dev (opens new window)负责开发与维护。

主题 GitHub: https://github.com/fluid-dev/hexo-theme-fluid(opens new window)

预览网站：Fluid's Blog (opens new window)zkqiang's blog(opens new window)

#安装主题

#搭建 Hexo 博客

如果你还没有 Hexo 博客，请按照 Hexo 官方文档 (opens new window)进行安装、建站。

#获取最新版本

#方式一

Hexo 5.0.0 版本以上，推荐通过 npm 直接安装，进入博客目录执行命令：

npm install --save hexo-theme-fluid

然后在博客目录下创建 _config.fluid.yml，将主题的 _config.yml (opens new window)内容复制过去。

#方式二

下载 最新 release 版本 (opens new window)解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

#指定主题

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

#创建「关于页」

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

#更新主题

#方式一

TIP

适用于通过 Npm 安装主题。

在博客目录下执行命令：

npm update --save hexo-theme-fluid

#方式二

TIP

适用于通过 Release 压缩包安装主题，且没有自行修改任何代码的情况（配置文件除外）。

  1. 将自己的配置文件备份（如果完整使用覆盖配置功能可忽略此步骤）；
  2. 将 fluid 文件夹全部删除，重新下载 release (opens new window)并解压；
  3. 如果某些配置发生了变化（改名或弃用），release 的说明里会特别提示，同步修改原配置文件即可。

#方式三

TIP

适用于自定义了一些代码，或想体验 master 分支的情况。

  1. 确定自己的 fluid 目录已经开启 git，并且所有改动都已 commit；
  2. 把 fluid 仓库的 master 分支拉取到自己的分支上（可新建一个分支再拉取）：
git pull https://github.com/fluid-dev/hexo-theme-fluid.git master
  1. 解决代码冲突，保留自己修改的部分（如何解决冲突可自行搜索）。

#配置指南

#关于指南

TIP

致主题的新用户：

  • 本指南经过数个版本打磨，绝大部分的功能都有详细说明，请仔细阅读，节约自己和他人的时间；
  • 本指南中提到的："博客配置" 指的 Hexo 博客目录下的 _config.yml，"主题配置" 指的是 theme/fluid/_config.yml 或者 _config.fluid.yml ，注意区分；
  • 本指南中提到的 source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录；
  • 每次无论 hexo g 或 hexo s，都最好先使用 hexo clean；
  • 页面结果以本地 hexo s 为准，部署后的异常大部分是缓存原因，在确认没有报错的情况下，等待若干时间后即可正常；
  • 由于主题的不同版本会存在配置差异，本指南以最新版本为准。

本指南不包括所有的配置说明，几乎每个配置在主题配置中都有注释，可配合指南共同参考使用。

另外本指南仅包含主题范围内的使用说明，如果是 Hexo 的使用或者 Hexo 插件的使用，请查阅各自的文档。

若存在其他主题相关的疑问请在 issues (opens new window)留言。

#全局

#覆盖配置

TIP

覆盖配置可以使主题配置放置在 fluid 目录之外，避免在更新主题时丢失自定义的配置。

通过 Npm 安装主题的用户可忽略，其他用户建议学习使用。

Hexo 5.0.0 版本以上的用户，在博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml (opens new window)内容复制过去。

以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可。

注意：

  • 只要存在于 _config.fluid.yml 的配置都是高优先级，修改原 _config.yml 是无效的。
  • 每次更新主题可能存在配置变更，请注意更新说明，可能需要手动对 _config.fluid.yml 同步修改。
  • 想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出。
  • 如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的，比如：
about:
  icons:  # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }
Hexo 低于 5.0.0 版本点击这里

#静态资源

所有静态资源文件的 Url 可以通过主题配置中的 static_prefix 配置项修改。

比如需要指定公共 CDN 的 JQuery 库，只需将原配置改为：

static_prefix:
  # ...
  jquery: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/

#本地搜索

  • 已集成 hexo-generator-search 插件，若已安装其他搜索插件请关闭，以避免生成多余的索引文件。
  • 默认在根目录生成并使用 local-search.xml。

#页面顶部大图

  • 图片来源

主题配置中，每个页面都有名为 banner_img 的属性，可以使用本地图片的相对路径，也可以为外站链接，比如：

指向本地图片：

banner_img: /img/bg/example.jpg   # 对应存放在 /source/img/bg/example.jpg

指向外站链接：

banner_img: https://static.zkqiang.cn/example.jpg

TIP

如果是本地图片，目录文件夹可自定义，但必须在 source 目录下，博客与主题的 source 目录最终会合并，因此优先选择博客的 source。

图片大小建议压缩到 1MB 以内，否则会严重拖慢页面加载。

  • 高度

鉴于每个人的喜好不同，开放对页面 banner_img 高度的控制。

主题配置中，每个页面对应的 banner_img_height 属性，有效值为 0 - 100。100 即为全屏，个人建议 70 以上。

  • 蒙版透明度

主题配置中，每个页面对应的 banner_mask_alpha 属性，有效值为 0 - 1.0， 0 是完全透明（无蒙版），1 是完全不透明

TIP

每篇文章可单独设置 Banner，具体见文章页设置

本主题不支持固定背景（fixed），原因：

  1. 与目前代码结构有较大冲突，需要大量修改
  2. fixed 在移动端兼容性很差

#博客标题

页面左上角的博客标题，默认使用博客配置中的 title，这个配置同时控制着网页在浏览器标签中的标题。

如需单独区别设置，可在主题配置中设置：

navbar:
  blog_title: 博客标题

#导航菜单

navbar:
  menu:
    - { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill', name: '联系我' }
  • key: 用于关联有多语言，如不存在关联则显示 key 本身的值
  • link: 跳转链接
  • icon: 图标的 css class，可以省略（即没有图标），主题内置图标详见这里
  • name: 强制使用此名称显示（不再按多语言显示），可省略

另外支持二级菜单（下拉菜单），配置写法如下：

menu:
  - {
      key: '文档',
      icon: 'iconfont icon-books',
      submenu: [
        { key: '主题博客', link: 'https://hexo.fluid-dev.com/' },
        { key: '配置指南', link: 'https://hexo.fluid-dev.com/docs/guide/' },
        { key: '图标用法', link: 'https://hexo.fluid-dev.com/docs/icon/' }
      ]
  }

#图片懒加载

lazyload:
  enable: true
  onlypost: false

开启后，当图片滚动到可见范围内才会加载，可以大幅提高网页整体加载速度。

onlypost 为 true 时，仅在文章页才使用懒加载。自定义页面在 Front-matter 中指定 lazyload: true 可单独开启（仅对 md 文档部分有效）。

#全局字体

所有页面统一字体的字号和字族可以通过主题配置中的下列配置项设置：

font:  # 主题字体配置
  font_size: 16px        # 全局字号
  font_family:           # 全局字体族
  code_font_size: 85%    # 代码的字号

关于字体族（font-family）如果不了解可以看这篇文章 (opens new window)先了解一下。

需要注意：

  • 最好使用系统自带的字体，否则需要通过自定义功能额外引入 @font-face，字体一般较大，不建议引入；
  • 应当至少添加一个通用的字体族名（如 serif，具体见上方链接文章）。

如果想设置单独的页面，可以直接在 markdown 里通过 style 标签实现：

---
title: example
---

<style>
  /* 设置整个页面的字体 */
  html, body, .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }

  /* 只设置 markdown 字体 */
  .markdown-body {
    font-family: KaiTi,"Microsoft YaHei",Georgia, sans, serif;
    font-size: 15px;
  }
</style>

#网页统计

目前支持多种统计网站，开启后按需填入 Key 或 ID 即可。

web_analytics:  # 网页访问统计
  enable: false # 默认为false，启用网页统计改为true即可
  baidu:  # 百度统计的Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
  google:  # Google统计的Tracking ID，参见 https://analytics.google.com/analytics/web/
  tencent:  # 腾讯统计的H5 App id，参见 https://mta.qq.com/h5/manage/ctr_app_manage (开启高级功能才有cid)
    sid:
    cid:
  woyaola:  # 51.la站点统计ID，参见 https://www.51.la/user/site/index
  cnzz:  # 友盟/cnzz站点统计web_id，参见 https://web.umeng.com/main.php?c=site&a=show
  leancloud:  # LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加
    app_id:
    app_key:
    server_url:  # REST API 服务器地址，国际版不填

#展示 PV 与 UV 统计

页脚可以展示 PV 与 UV 统计数据，目前支持两种数据来源：LeanCloud (opens new window)与 不蒜子 (opens new window)。

相关主题配置如下：

footer:
  statistics:
    enable: false
    source: "busuanzi"  # 可选 leancloud | busuanzi  根据自己需求选择
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

TIP

不蒜子不需要申请账号，直接开启即可，但有时候会响应缓慢拖慢整个页面加载。

不蒜子在 localhost 域名下显示的不是真正的数据，因此无需在意。

LeanCloud 使用前需要申请账号（国内需要身份认证），然后在 web_analytics 配置项中将 leancloud API 相关参数填上才能生效。

LeanCloud 在 localhost 域名下不会增加数据。

如果参数填写错误或者接口异常，不会显示数据，请在浏览器控制台排查具体原因。

#多语言

不同语言会影响一些主题自带的文字。

设置语言是在博客配置中，需要对应 fluid/languages/ 目录内的配置文件名:

language: zh-CN

默认提供英文(en)、简体中文(zh-CN)、日文(ja)。

如果想自定义，建议单独复制一份新文件进行修改，然后指定该文件名。

#强制全局 HTTPS

当你的域名升级到 HTTPS 后，可能之前存在部分图片等资源使用的是 HTTP，这时混用出现网页报错，造成图片无法显示。

控制台里也会出现报错：Mixed Content: The page at 'https://xxx' was loaded over HTTPS。

这种情况可以在主题配置中开启此配置：

force_https: true

即可将所有请求强制升级为 HTTPS（如是外部资源，需要本身支持 HTTPS）。

#二级站点路径

如果你的博客部署在二级路径（如: xxx.com/blog/），需要修改博客配置中：

url: http://xxx.com/blog
root: /blog/

#自定义页面

如果想单独生成一个页面，步骤和创建「关于页」类似。

  1. 首先用命令行创建页面：
$ hexo new page example
  1. 创建成功后编辑博客目录下 /source/example/index.md：
---
title: example
subtitle: 若不填默认是 title
---

这里写正文，支持 Markdown, HTML

正文默认没有 Markdown 样式，如果希望和文章相同的样式，可以加上：

<div class="markdown-body">
正文
</div>
  1. 页面的属性配置可以在主题配置中统一设置：
page:
  banner_img: /img/default.png
  banner_img_height: 70
  banner_mask_alpha: 0.3

也可以直接在 Front-matter (opens new window)里单独设置：

---
title: example
banner_img: /img/default.png
banner_img_height: 60
banner_mask_alpha: 0.5
---

这里可以写正文

自定义页面也可以开启评论插件，通过在 Front-matter (opens new window)里设置 comment: 'type'：

---
title: example
comment: 'valine'
---

#自定义 JS / CSS / HTML

如果你想引入外部的 JS、CSS（比如 IconFont）或 HTML，可以通过以下主题配置，具体见注释：

# 指定自定义 js 文件路径，路径是相对 source 目录
custom_js: /js/custom.js

# 指定自定义 css 文件路径，路径是相对 source 目录
custom_css: /css/custom.css

# 自定义 <head> 节点中的 HTML 内容
custom_head: '<meta name="key" content="value">'

# 自定义底部 HTML 内容（位于 footer 上方），也可用于外部引入 js css 这些操作，注意不要和 post.custom 配置冲突
custom_html: '<link rel="stylesheet" href="//at.alicdn.com/t/font_1067060_qzomjdt8bmp.css">'

另外 custom_js 和 custom_css 都可以指定多个路径：

custom_css:
  - /css/custom.css
  - //at.alicdn.com/t/font_1736178_ijqayz9ro8k.css

#暗色模式

主题暗色模式，开启后菜单中会出现切换按钮

dark_mode:
  enable: true
  default: auto

default 是暗色默认的模式，可选参数：auto / light / dark

选择 auto 时优先遵循 prefers-color-scheme (opens new window)，如果不支持则按用户本地时间 18 点到次日 6 点之间进入暗色模式。

无论选择任何模式，当用户手动切换后会在用户本地保存选项，该用户不再按照默认模式。

#首页

#Slogan(打字机)

首页大图中的标题文字，可在主题配置中设定是否开启：

index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: false
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ["hitokoto"]

如果 text 为空则按博客配置的 subtitle 显示。

另外支持通过 API 接口获取内容，如果请求失败则按 text 字段显示：

url: API 地址，必须返回的是一个 JSON 格式

method`: 请求方法，可选 `GET`、`POST`、`PUT

headers: 请求头，如果接口需要传一些验证的头部信息，在这里设置

keys: 从请求结果获取字符串的取值字段，程序会根据列表中的字段依次取值，最终需要获得到一个字符串

例如 API 返回的内容为：

[
    {
        "data": {
            "author": "Fluid",
            "content": "An elegant theme"
        }
    },
    {
        "data": {
            "author": "Test",
            "content": "Test content"
        }
    }
]

设置 keys: ["data", "content"]，程序会如下执行：

  1. 由于返回体是列表，程序会首先获取第一个元素（不是列表则跳过此步骤）
  2. 通过第一个 key data 获取值，发现不是一个字符串，继续执行
  3. 通过第二个 key content 获取值，发现是一个字符串，返回内容；如果不是字符串则获取失败，使用 text 值

WARNING

如果 API 没有请求成功，请打开浏览器的控制台（console）检查是否报错，其中如果有包含 No Access-Control-Allow-Origin header 的报错，说明该 API 有跨域限制，这必须从 API 后端服务来解决。

标题文字默认开启了打字机动效，相关配置如下：

fun_features:
  typing: # 为 subtitle 添加打字机效果
    enable: true
    typeSpeed: 70 # 打印速度
    cursorChar: "_" # 游标字符
    loop: false # 是否循环播放效果

TIP

请求 API 的功能必须同时开启打字机动效才能生效

#文章摘要

开关自动摘要（默认开启）：

index:
  auto_excerpt:
    enable: true

若要手动指定摘要，使用 <!-- more --> MD文档里划分，如：

正文的一部分作为摘要
<!-- more -->
余下的正文

或者在 Front-matter (opens new window)里设置 excerpt 字段，如：

---
title: 这是标题
excerpt: 这是摘要
---

TIP

优先级: 手动摘要 > 自动摘要

如果关闭自动摘要，并且没有设置手动摘要，摘要区域空白

无论哪种摘要都最多显示 3 行，当屏幕宽度不足时会隐藏部分摘要。

#文章跳转方式

index:
  post_url_target: _self

可选值：

  1. _blank：新标签页打开
  2. _self：当前标签页打开

#文章信息

可配置隐藏包括发布时间、分类、标签。

经过测试，如果首页的文章列表中没有略缩图和摘要，标题+文章信息的显示方式会使页面过于拥挤，所以给出此项配置供喜欢首页只显示文章标题的同学使用。

index:
  post_meta:
    date: true
    category: true
    tag: true

#隐藏文章

如果想把某些文章隐藏起来，不在首页和其他分类里展示，可以在文章开头 Front-matter (opens new window)中配置 hide: true 属性。

---
title: 文章标题
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
hide: true
---
以下是文章内容

TIP

隐藏会使文章在分类和标签类里都不显示

隐藏后依然可以通过文章链接访问

#文章排序

如果想手动将某些文章固定在首页靠前的位置，可以在安装 hexo-generator-index >= 2.0.0 版本的情况下，在文章开头 Front-matter (opens new window)中配置 sticky 属性：

---
title: 文章标题
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
sticky: 100
---
以下是文章内容

sticky 数值越大，该文章越靠前，达到类似于置顶的效果，其他未设置的文章依然按默认排序。

当文章设置了 sticky 后，主题会默认在首页文章标题前增加一个图标，来标识这是一个置顶文章，你可以通过主题配置去关闭或修改这个功能：

index:
  post_sticky:
    enable: true
    icon: 'iconfont icon-top'

icon 可以通过自定义图标修改为其他图标。

#文章页

#文章在首页的封面图

对于单篇文章，在文章开头 Front-matter (opens new window)中配置 index_img 属性。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

和 Banner 配置相同，/img/example.jpg 对应的是存放在 /source/img/example.jpg 目录下的图片（目录也可自定义，但必须在 source 目录下）。

也可以使用外链 Url 的绝对路径。

如果想统一给文章设置一个默认图片（文章不设置 index_img 则默认使用这张图片），可在主题配置中设置：

post:
  default_index_img: /img/example.jpg

当 default_index_img 和 index_img 都为空时，该文章在首页将不显示图片。

#文章页顶部大图

默认显示主题配置中的 post.banner_img，如需要设置单个文章的 Banner，在 Front-matter (opens new window)中指定 banner_img 属性。

本地图片存放位置同上。

---
title: 文章标题
tags: [Hexo, Fluid]
index_img: /img/example.jpg
banner_img: /img/post_banner.jpg
date: 2019-10-10 10:00:00
---
以下是文章内容

#文章内容图片

本地图片存放位置同上。

![](/img/example.jpg)

#日期/字数/阅读时长/阅读数

显示在文章页大标题下的文章信息，除了作者和阅读次数，其他功能都是默认开启的。

post:
  meta:
    author:  # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
      enable: false
    date:  # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
      enable: true
      format: "dddd, MMMM Do YYYY, h:mm a"  # 格式参照 ISO-8601 日期格式化
    wordcount:  # 字数统计
      enable: true
      format: "{} 字"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    min2read:  # 阅读时间
      enable: true
      format: "{} 分钟"
    views:  # 阅读次数
      enable: false
      source: "leancloud"  # 统计数据来源，可选：leancloud | busuanzi   注意不蒜子会间歇抽风
      format: "{} 次"

TIP

日期格式必须遵循 ISO-8601 规范，否则无法正常显示；

其他格式必须包括 {} 符号代替数字，文字可*设置。

#代码块

code:
  copy_btn: true
  highlight:
    enable: true
    line_number: true
    lib: "highlightjs"
    highlightjs:
      style: 'Github Gist'
      bg_color: false
    prismjs:
      style: "default"
      preprocess: true

copy_btn: 是否开启复制代码的按钮

line_number: 是否开启行号

highlight: 是否开启代码高亮

lib: 选择生成高亮的库，可选项: highlightjs、prismjs，对应下面两组配置，高亮的配置说明具体见主题配置中的注释

#评论

开启评论需要在主题配置中开启并指定评论模块：

post:
  comments:
    enable: true
    type: disqus

然后在下方还要设置对应评论模块的参数，比如 disqus 对应设置：

disqus:
  shortname: fluid

当前支持 Valine、Disqus、Gitalk、Utterances、畅言、来必力(livere)、Remark42、twikoo，使用和参数设置需要自行查询各自的文档（文档地址在配置注释里）。

若需要自定义添加其他评论系统，请自行在 fluid/layout/_partial/comments/ 目录内创建 ejs 文件，参照自带的 ejs 填入评论服务商提供的代码，再修改 post.comments.type 为对应文件名。

TIP

国内用户推荐使用 Valine 或者 Utterances

如果设置后评论模块没有显示，说明配置没有完成，或者配置有误出现报错（请在浏览器控制台查看具体报错）

如果想在某个文章页关闭评论，或者想在某个自定义页面开启评论，可以通过在 Front-matter (opens new window)设置 comment: bool 来控制评论开关，并且可以通过 comment: 'type' 来改变评论插件。

例如在关于页开启并指定评论插件：

---
title: 关于页
layout: about
index_img: /img/example.jpg
date: 2019-10-10 10:00:00
comment: 'valine'
---
以下是正文内容

#脚注

主题内置了脚注语法支持，可以在文章末尾自动生成带有锚点的脚注，该功能在主题配置中默认开启：

post:
  footnote:
    enable: true
    header: ''

脚注语法如下：

这是一句话[^1]
[^1]: 这是对应的脚注

更优雅的使用方式，是将脚注写在文末，比如：

正文

## 参考
[^1]: 参考资料1
[^2]: 参考资料2

当然你也可以通过修改上方配置项 header 来自动加入节标题，如下所示：

post:
  footnote:
    enable: true
    header: '<h2>参考</h2>'  # 等同于手动写 `## 参考`

#Tag 插件

#便签

在 markdown 中加入如下的代码来使用便签：

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

或者使用 HTML 形式：

<p class="note note-primary">标签</p>

可选便签：

primary

secondary

success

danger

warning

info

light

WARNING

使用时 {% note primary %} 和 {% endnote %} 需单独一行，否则会出现问题

#行内标签

在 markdown 中加入如下的代码来使用 Label：

{% label primary @text %}

或者使用 HTML 形式：

<span class="label label-primary">Label</span>

可选 Label：

primary default info success warning danger

WARNING

若使用 {% label primary @text %}，text 不能以 @ 开头

#勾选框

在 markdown 中加入如下的代码来使用 Checkbox：

{% cb text, checked?, incline? %}

text：显示的文字
checked：默认是否已勾选，默认 false
incline: 是否内联（可以理解为后面的文字是否换行），默认 false

示例：

{% cb 普通示例 %}

{% cb 默认选中, true %}

{% cb 内联示例, false, true %} 后面文字不换行

{% cb false %} 也可以只传入一个参数，文字写在后边（这样不支持外联）

#按钮

你可以在 markdown 中加入如下的代码来使用 Button：

{% btn url, text, title %}

或者使用 HTML 形式：

<a class="btn" href="url" title="title">text</a>

url：跳转链接
text：显示的文字
title：鼠标悬停时显示的文字（可选）

[text](javascript:

上一篇：hexo + Wechat Mini Program打造博客小程序


下一篇：hexo github pages 首页不展示，出现代码怎么办