【个人博客】Hexo中特别好用的插件有哪些

6Young2023-07-102024-05-15

20230805更新~~~

Echarts动态图表

hexo-tag-echarts3是一款基于 Echarts 的动态图表插件。

通过npm install hexo-tag-echarts3 --save下载插件。

由于原作者已不再维护，echarts 的版本较老，可以修改./node_modules/hexo-tag-echarts3/template.html文件中的js引用路径：

1 2	- <script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script> + <script src="https://cdn.bootcss.com/echarts/5.2.1/echarts.common.min.js"></script>

修改 echarts 到最新版本后，语法也会相应地改变，请到官网示例自行查询。选择一个需要的图表，调整参数后拷贝option=后面的部分并粘贴到echarts标签内。
在markdown中直接使用的代码为：

{% echarts [height] [weight] %}

echarts 配置

{% endecharts %}

例如：

是通过以下代码构建并显示的：

{% echarts 400 '81%' %}
{
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      magicType: { type: ['line', 'bar','stack'] },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['Profit', 'Expenses', 'Income']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'value'
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: {
        show: false
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  series: [
    {
      name: 'Profit',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      emphasis: {
        focus: 'series'
      },
      data: [200, 170, 240, 244, 200, 220, 210]
    },
    {
      name: 'Income',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 341, 374, 390, 450, 420]
    },
    {
      name: 'Expenses',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'left'
      },
      emphasis: {
        focus: 'series'
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    }
  ]
};
{% endecharts %}

Markmap思维导图

思维导图创建

方案源于：

引用站外地址

Hexo 的思维导图插件

猎人杂货铺

hexo-markmap是一款轻量的思维导图插件，在pullquote标签内使用 markdown 语言可生成对应的思维导图。

使用npm install hexo-simple-mindmap --save安装插件

在markdown中直接使用的代码为：

{% pullquote mindmap mindmap-md %}

相关内容

{% endpullquote %}

知识图谱

Scala

Python

java

jvm

消息队列

kafka

pulsar

test1

test2

上述思维导图是通过以下代码构建并实现：

{% pullquote mindmap mindmap-lg %}

- 知识图谱
    - Scala
    - Python
    - java
      - jvm
    - 消息队列
      - kafka
      - pulsar
        - test1
          - test2

{% endpullquote %}

插件缺陷

插件不支持 Mathjax 公式渲染
思维导图不能放大
思维导图只能有一个根节点
有些主题下导图显示有问题（下方有解决方案）

思维导图显示问题

可能有人生成思维导图后，幕布只会占据屏幕的一半。

通过检查页面的源代码，发现是blockquote的css设置有问题，此处的max-width被设置成了45%。

由于我查了好久，也没找到设置这一样式的源文件，因此选择另辟蹊径，自定义一个css样式文件处理这个问题。在[Blogroot]\themes\butterfly\source\css路径下新建custom.css（不强制，都可以）文件，在其中写入代码：

blockquote.pullquote {
  position: relative;
  max-width: 100%;
  font-size: 110%;
}

修改[Blogroot]\_config.butterfly.yml文件，引入自定义的css样式文件

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

卡片式引用链接

卡片式的引用链接可以让你的引用更加显眼，也让博客更加好看美观，我在网上查了很多方法，最后都不能用，只有一个方案成功实现，给大家分享一下，方案源于：

引用站外地址

使用 CardLink 库生产卡片式链接

Lete乐特

首先，在_config.butterfly.yml的Inject处添加如下代码：

inject:
  head:
    - <script src="https://cdn.jsdelivr.net/npm/cardlink"></script>
  bottom:
    - <script>cardLink(document.querySelectorAll('a[target=cardlink_]'))</script>