关于hexo功能的使用方法

Markdown语法

见markdown语法

图床使用

上传

查看本地——hexo cl; hexo s
上传version、github——hexo cl; hexo g;hexo d;

兼容插件

pdf
images
文件加密

如何快捷打上title

自己定义的快捷键——tit,源码附上:

{
	"md表头": {
		"scope": "markdown",
		"prefix": "tit",
		"body": [
			"---",
			"title: ${TM_FILENAME_BASE}",
			"date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
			"tags:",
			"   - ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}",
			"category: ",
			"   - ${TM_DIRECTORY/^.+[\\/\\\\]+(.*)$/$1/}",
			"---",
			"",
			""
		],
		"description": "md表头"
	}
}

挂载首页轮播图（swiper）

样式展示：

1
2
3

swiper_index: 9    ——数字越大越靠前
swiper_desc: Markdown语法  ——名字     
swiper_cover: https://picbed.huanglei.icu/imgs/p15.jpg ——背景图

具体配置项

在文章的 front_matter 中添加 swiper_index 配置项即可
**
title: 文章标题
date: 创建日期
updated: 更新日期
cover: 文章封面
description: 文章描述
swiper_index: 1 #置顶轮播图顺序，非负整数，数字越大越靠前
**

时间轴样式

格式如下:

{% timeline 时间轴样式,blue %} ——Title
<!-- timeline 2020-07-24 [2.6.6 -> 3.0](https://github.com/volantis-x/hexo-theme-volantis/releases) -->

内容

<!-- endtimeline -->

<!-- timeline 2020-05-15 [2.6.3 -> 2.6.6](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.6) -->

内容

<!-- endtimeline -->

<!-- timeline 2020-04-20 [2.6.2 -> 2.6.3](https://github.com/volantis-x/hexo-theme-volantis/releases/tag/2.6.3) -->

内容

<!-- endtimeline -->  ——对应上面

{% endtimeline %}  ——对应上面

时间轴样式

2020-07-24 2.6.6 -> 3.0

内容

2020-05-15 2.6.3 -> 2.6.6

内容

2020-04-20 [2.6.2 -> 2.6.3]

内容

图片和pdf路径问题

图片路径问题：目前可以用相对路径，绝对路径目前有bug

绝对
![tupian](/source/images/markdown1.png)
   
相对
![tupian](../images/markdown1.png)

pdf路径问题：相对路径，绝对路径目前有bug(还带解决，但可以用了)

# 1.本地文件:在md文件路径下创建一个同名文件夹，其内放pdf文件名为xxx.pdf的文件
{% pdf xxx.pdf %}
# 2.在线链接
{% pdf https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/pdf/小作文讲义.pdf %}

Vue+Element样式弹窗

在你想要弹出弹窗的js代码中加入如下代码即可触发弹窗：

new Vue({
    data: function () {
        this.$notify({
            title: "你已被发现😜",
            message: "小伙子，扒源记住要遵循GPL协议！",
            position: 'top-left',
            offset: 50,
            showClose: true,
            type: "warning",
            duration: 5000
        });
    }
})

notify：弹窗类型，可以替换为message（信息提示）和confirm（二次确认提示）
title：弹窗标题，可以改为自定义标题
message:弹窗信息，可以改为自定义内容
position：弹出位置，bottom、top和left、right两两组合
offset：偏移量，简单可以理解为与边界的距离
showClose：是否显示关闭按钮
type：提示类型，可选success/warning/info/error等
duration：停留时间，弹出停留至消失的时间，单位ms

文章加密插件

Front matter配置方法

title: Hello World
tags:
- 作为日记加密
date: 2016-03-30 21:12:21
password: mikemessi
abstract: 有东西被加密了, 请输入密码查看.
message: 您好, 这里需要密码.
theme: xray
wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

配置文件[BlogRoot]_config.yml中针对tags的加密

encrypt: # hexo-blog-encrypt
  abstract: 有东西被加密了, 请输入密码查看.
  message: 您好, 这里需要密码.
  tags:
  - {name: tagName, password: 密码A}
  - {name: tagName, password: 密码B}
  theme: xray
  wrong_pass_message: 抱歉, 这个密码看着不太对, 请再试试.
  wrong_hash_message: 抱歉, 这个文章不能被校验, 不过您还是能看看解密后的内容.

页脚

将[BlogRoot]/themes/butterfly/layout/includes/footer.pug替换成如下代码这块东西分为几个部分，一个是以#ft为块的DOM，其中分为了格言、猜你想看、推荐友链三部分，参考图中的位置结合自己的喜好进行修改即可，图像、文字和链接均替换成你自己的（记住不要用我的链接！！！）；if theme.footer.owner.enable起这一块是主题指定的信息版权信息，我把主题配置项的copyright和custom_text这两项留空了，因此只会显示©2022 By Fomalhaut🥝；再然后就是#workboard这块，这块的信息由js逻辑写入与更新，可以自定义；最后是p#ghbdages这块，是徽标显示，大家可以到shields.io按照自己的信息生成（不要用我的！！！）:

然后计时器还要往#footer-wrap这块元素上面写入网站运行时间等信息，新建文件[BlogRoot]\source\js\runtime.js，写入如下代码。这里要修改的几块东西是：网站诞生时间、currentTimeHtml这块东西；其中currentTimeHtml分为了两种模式，对应两个不同的图标，自行研究一下就懂！

iconfont彩色图标

阿里图标库地址

彩色图标

[BlogRoot]\themes\butterfly\layout\includes\widget\card_author.pug，图标自行引入。(use(xlink:href=’#icon-xiaoqiche’))

引用note

使用方法：

1
2
3

{% note default simple %}
越是牺牲睡眠，越学不好
{% endnote %}

文章容器

代码如下：

<div class="recent-post-item" style="height: auto;width: 100%"><!--文章容器 -->
  <div class="blog-slider swiper-container-fade swiper-container-horizontal" id="swiper_container"><!-- swiper容器 -->
    我是lwyh</div>
</div>

js挂载swiper

代码如下：

<div name="Hexo" id="recent-posts">
  <!-- id=>type  recent-posts=>name    -->
  <div name="我是画框">
    <div name="我是纸">
      这里通过js挂载swiper，也就是画画
    </div>
  </div>