css - Hexo markdown + bulma CSS

Question

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

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

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

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

Answer 1

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

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

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

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

markdown: 'default'

有关 Markdown 值的更多信息，请参阅 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可以将类属性以及我们通常添加的其他属性添加到 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文件的插件部分添加插件名称