前置教程

[Akilarの糖果屋 - Akilar.top](https://akilar.top/posts/e2bf861f/)

为啥想写一个quote的标签外挂

我最近在写博客的时候，发现好多时候原生的Hexo标签不是很好用，效果如下。

  1. 没有提供参数，则只输出普通的 blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.

  1. 引用书上的句子

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

David LevithanWide Awake
  1. 引用 Twitter

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

  1. 引用网络上的文章

Every interaction is both precious and an opportunity to delight.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
1. 没有提供参数，则只输出普通的 blockquote

{% blockquote %}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque hendrerit lacus ut purus iaculis feugiat. Sed nec tempor elit, quis aliquam neque. Curabitur sed diam eget dolor fermentum semper at eu lorem.
{% endblockquote %}

2. 引用书上的句子

{% blockquote David Levithan, Wide Awake %}
Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.
{% endblockquote %}

3. 引用 Twitter

{% blockquote @DevDocs https://twitter.com/devdocs/status/356095192085962752 %}
NEW: DevDocs now comes with syntax highlighting. http://devdocs.io
{% endblockquote %}

4. 引用网络上的文章

{% blockquote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endblockquote %}

我更希望引用的作者和作品在底部右侧，并且用不同的颜色高亮引用的作者和作品，如下图所示。

image-20230318164704846

具体实现

  1. 在[Blogroot]\themes\butterfly\scripts\tag\下新建一个quote.js
  2. 写入如下内容：
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//判断是否为空

function isEmpty(v) {
    switch (typeof v) {
    case 'undefined':
        return true;
    case 'string':
        if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0) return true;
        break;
    case 'boolean':
        if (!v) return true;
        break;
    case 'number':
        if (0 === v || isNaN(v)) return true;
        break;
    case 'object':
        if (null === v || v.length === 0) return true;
        for (var i in v) {
            return false;
        }
        return true;
    }
    return false;
}

//参数处理函数
function quote (args, content) {
  args = args.join(' ').split(';')
  let author = args[0]
  let work = args[1]?args[1]:''
  if (!isEmpty(work)) {
	work = "《" + work + "》"
  }
  else {
	work = work
  }
  let color = args[2]?args[2]:'green'
  return `<blockquote>${hexo.render.renderSync({ text: content, engine: 'markdown' })}<p align="right"><font color=${color} size="3" face="仿宋">${author}${work}</font></p></blockquote>`
}
//标签注册函数
hexo.extend.tag.register('quote',quote,{ ends: true });

参数释义：

  • args 指标签接受的参数，content指标签的内容。
  • args = args.join(' ').split(';')会将args按;切割并添加到同名数组args中。
  • let work = args[1]?args[1]:''用javascript的三元运算符来保证work不存在时候用空代替。
  • return 的内容就是插入html的内容,${ author}接受上面的变量值。

quote标签语法

1
2
3
{% quote [author];[work];[color] %}
content
{% endpquote %}

author: 作者

work: 作品

color: 颜色

content: 引用的内容

一想到为人父母居然不用经过考试，就觉得真是太可怕了。

伊坂幸太郎《一首小夜曲》

1
2
3
4
5
{% quote 伊坂幸太郎;一首小夜曲;red %}

一想到为人父母居然不用经过考试，就觉得真是太可怕了。

{% endquote %}