Hexo markdown + bulma css

Question

我正在使用 Hexo 构建静态博客网站。

现在我想使用 Bulma 来简化设计。

但我想知道如何从 Markdown 中调用类名。

如果 Markdown 的 # 或 ## 自动链接到 Bulma 的类“标题”，那就太好了。

Answer 1

我不确定以下答案是否有效，因为我没有尝试过。但它会给你一个很好的起点。

首先用hexo-renderer-markdown-itLink替换默认的markdown渲染引擎（标记）

npm un hexo-renderer-marked --save
npm i hexo-renderer-markdown-it --save

然后在_config.yml中添加以下内容

markdown: 'default'

有关降价值的更多信息，请参阅Simple Configuration 页面。

我们可以在_config.yml 文件中添加更多选项。

所有选项和解释都可以在Advanced Configuration页面找到

示例配置

# Markdown-it config
## Docs: https://github.com/celsomiranda/hexo-renderer-markdown-it/wiki
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    - markdown-it-abbr
    - markdown-it-footnote
    - markdown-it-ins
    - markdown-it-sub
    - markdown-it-sup
    - markdown-it-attrs
  anchors:
    level: 2
    collisionSuffix: 'v'
    permalink: true
    permalinkClass: header-anchor
    permalinkSymbol: ¶

我们感兴趣的选项是 plugin 选项。

经过一番研究，我发现了一个插件markdown-it-attrs，它可以将类属性以及我们通常添加的其他属性添加到markdown组件中

示例输入：

# header {.style-me}
paragraph {data-toggle=modal}

输出：

<h1 class="style-me">header</h1>
<p data-toggle="modal">paragraph</p>

也适用于内联元素：

paragraph *style me*{.red} more text

输出：

<p>paragraph <em class="red">style me</em> more text</p>

更多插件示例page

在_config.yml文件的插件部分添加插件名称