在Hexo的 Next中使用Mermaid图表

背景介绍

Mermaid是一个用于生成图表和流程图的JavaScript库。最近在使用Hexo的Next主题写博客时,我想要添加一些流程图,但发现mermaid图表无法正常显示。经过研究,发现这个问题的解决方案其实很简单,特别是对于新版本的Next主题用户。

环境版本

在开始之前,请先确认你的Hexo和Next主题版本。你可以使用以下命令查看:

查看Hexo版本:

1
2
3
hexo -v
hexo: 7.3.0
hexo-cli: 4.3.2

查看Next主题版本:

1
2
3
4
5
cat themes/next/package.json
{
"name": "hexo-theme-next",
"version": "8.21.1"
}

解决方案

网上很多教程建议安装hexo-filter-mermaid-diagrams插件并下载相关JS文件,但这种方法已经过时了。事实上,在Next主题8.20版本之后,已经内置了mermaid支持,我们只需要简单配置就可以了。

具体步骤如下:

  1. 如果你之前安装过mermaid-filter插件,需要先卸载它:

    1
    npm uninstall hexo-filter-mermaid-diagrams
  2. 修改 Hexo 根目录下的_config.yml文件,添加以下配置以确保 mermaid 代码块不会被当作普通代码处理:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    highlight:
    line_number: true
    auto_detect: false
    tab_replace: ''
    wrap: true
    hljs: false
    # 添加exclude_languages配置
    exclude_languages:
    - mermaid
  3. 重新生成网站:

    1
    2
    3
    hexo clean
    hexo generate
    hexo server

总结

通过以上配置,你就可以在Hexo的Next主题下正常使用mermaid语法来创建图表了。这个方案适用于Next主题8.20及以上版本,不需要安装额外的插件,配置简单快捷。

参考

理解音乐的节奏和MIDI文件中的时间控制

你有没有注意到,有些音乐让你想慢慢摇摆,而有些则让你忍不住快速跳动?这就是音乐速度的魔力!让我们深入了解音乐节奏的核心概念,以及它们在MIDI文件中是如何被控制的。

音乐节奏的基本要素

1. Tempo:音乐的步伐

想象一下音乐在散步。Tempo就是告诉你这个”散步”有多快。

  • 慢悠悠的民谣就像悠闲地散步
  • 激情四射的摇滚则像是在跑步

2. BPM:音乐的心跳

BPM是”每分钟节拍数”(Beats Per Minute)的简称,就像音乐的心跳速度。

  • 慢歌可能是60 BPM,就像平静时的心跳
  • 快歌可能达到120 BPM或更高,就像运动后的心跳

3. 节拍(Beat):音乐的脉搏

节拍就是音乐中让你情不自禁跟着打拍子的那个”咚、咚、咚”。

  • 它就像是音乐的脉搏
  • 你可能会不自觉地跟着节拍点头或拍手
  • 在音乐理论中,一个beat通常等同于一个四分音符

4. 它们之间的关系

想象你在跑步,这三者的关系就很容易理解了:

  • 节拍就像是你的每一个脚步
  • Tempo决定这个脚步的快慢(步伐)
  • BPM则告诉你每分钟有多少个脚步

用音乐来说:

  • 节拍是音乐的基本单位,就像心跳的每一下”咚”
  • Tempo决定这个”咚”的快慢
  • BPM则精确地告诉你每分钟有多少个”咚”

MIDI文件中的时间控制

在了解了基本的音乐节奏概念后,让我们看看这些概念在MIDI文件中是如何被表示和控制的。

1. Tick:MIDI的最小时间单位

  • tick就像是MIDI文件中的”时间原子”,是不可再分的最小时间单位
  • 它就像是一个精密时钟的最小刻度

2. Tick_per_beat:连接tick和beat的桥梁

  • tick_per_beat告诉我们一个beat包含多少个tick
  • 比如,如果tick_per_beat是480,那么每个beat(四分音符)就包含480个tick
  • 这就像是在说,时钟的一次”嘀嗒”(一拍)包含了480个最小刻度
graph TD
    subgraph 预设参数
        T((Tempo/BPM<br>速度设定)) 
        TPB((tick_per_beat<br>预设参数))
    end
    
    subgraph 计算结果
        M[分钟换算]
        B[节拍换算]
        TK[Tick时间]
    end
    
    T -- "控制" --> M
    TPB -- "定义" --> B
    M --> B
    B --> TK
    
    style T fill:#ff9999,stroke:#666
    style TPB fill:#ff9999,stroke:#666
    style M fill:#99ff99,stroke:#666
    style B fill:#99ff99,stroke:#666
    style TK fill:#99ff99,stroke:#666

3. 从tick到实际时间(秒)的转换

现在,让我们看看如何将MIDI文件中的tick转换为实际的播放时间:

  1. 首先,我们知道tick_per_beat,比如480
  2. 然后,我们知道tempo,比如120 BPM
  3. 计算过程:
    • 一分钟有120拍
    • 一拍有480个tick
    • 所以一分钟有120 * 480 = 57,600个tick
    • 因此,1个tick = 60秒 / 57,600 = 0.00104167秒
graph TD
    subgraph 转换示例
        E[1分钟 = 120拍<br>1拍 = 480 tick<br>1分钟 = 57,600 tick<br>1 tick ≈ 0.00104秒]
        style E fill:#f5f5f5,stroke:#666,stroke-width:2px,rx:10px
    end
    
    T((Tempo<br>速度)) -. "控制" .-> BPM[BPM<br>每分钟节拍数]
    BPM -- "例如:<br>120拍/分钟" --> M[分钟<br>Minute]
    M -- "BPM<br>(每分钟节拍数)" --> B[节拍<br>Beat]
    
    TPB[tick_per_beat] -. "例如:<br>480tick/拍" .-> B
    B -- "tick_per_beat<br>(每拍tick数)" --> TK[Tick<br>最小时间单位]
    
    style T fill:#e6f3ff,stroke:#666,stroke-width:2px
    style BPM fill:#f9f9f9,stroke:#666,stroke-width:2px,rx:5px
    style M fill:#ffe6e6,stroke:#666,stroke-width:2px,rx:5px
    style B fill:#e6ffe6,stroke:#666,stroke-width:2px,rx:5px
    style TK fill:#fff0e6,stroke:#666,stroke-width:2px,rx:5px
    style TPB fill:#f9f9f9,stroke:#666,stroke-width:2px,rx:5px
    
    linkStyle default stroke:#666,stroke-width:2px
    linkStyle 0 stroke:#999,stroke-width:2px,stroke-dasharray:5
    linkStyle 3 stroke:#999,stroke-width:2px,stroke-dasharray:5

4. 实际应用举例

假设在MIDI文件中,有一个音符持续了960个tick:

  1. 我们知道tick_per_beat是480,tempo是120 BPM
  2. 960 tick = 2 beat(因为960 / 480 = 2)
  3. 在120 BPM的速度下,2 beat = 1秒(因为每分钟120拍,每拍0.5秒)

所以,这个音符在实际播放时会持续1秒。

5. 注意事项

  • tempo可能在音乐中变化,所以tick到秒的转换关系可能会随着音乐的进行而改变
  • 一些MIDI文件可能使用SMPTE时间码,那样计算方式会有所不同

理解了这些概念,你就能更好地控制MIDI文件中的时间,实现精确的音乐编辑和播放了!无论是创作、编辑还是分析MIDI音乐,这些知识都将帮助你更深入地理解和操作音乐的时间结构。

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment