Hexo markdown + bulma css

Question

我正在与Hexo建立静态博客网站。

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

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

如果markdown的#或##自动链接到Bulma的类‘title’，那就更好了。

Answer 1

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

首先将默认的markdown渲染器引擎(标记)替换为hexo-renderer-markdown-it Link

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: ¶

我们感兴趣的选项是插件选项。

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

示例输入：

# 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文件的插件部分添加插件名称