4

我想修改一些 html 标签在 jekyll 上的呈现方式。我需要的是自动添加一些 css 类（在本例中为 table html 标记中的“.table”类）。

我正在使用红地毯降价处理器。我想我需要编写一个扩展渲染器的插件，但我找不到任何好的例子......

我想出了这个，但这只是一个复制/粘贴工作，它不起作用......

require 'redcarpet'

class BootstrapTables < Redcarpet::Render::HTML
  def table(header, body)
    "\n<table class='table'><thead>\n#{ header }</thead><tbody>\n#{ body }</tbody></table>\n"
  end
end

有人可以帮忙吗？

4

3 回答 3

9

我已经测试过您可以使用kramdown为 markdown 元素提供一个类

{:.foo}
| First Header  | Second Header |
| ------------- | ------------- |
| Content Cell  | Content Cell  |
| Content Cell  | Content Cell  |

你的桌子有类foo

注意： 这个答案是一个月前在 SO 上给出的

于 2014-07-15T10:49:19.940 回答
3

我找到了方法并更正了代码，我需要一个正确配置的自定义渲染器。在_config.yaml中使用RedcarpetExtas markdown 变量将激活它。

# Create a custom renderer that extend Redcarpet to customize its behavior.
require 'jekyll'
require 'redcarpet'

class RedcarpetExtender < Redcarpet::Render::HTML
  # Extend the table to be compatible with the Bootstrap css.
  def table(header, body)
    "\n<table class='table-bordered table-hover'><thead>\n#{ header }</thead><tbody>\n#{ body }</tbody></table>\n"
  end
end

class Jekyll::Converters::Markdown::RedcarpetExt
  def initialize(config)
    @site_config = config
  end

  def extensions
    Hash[ *@site_config['redcarpet']['extensions'].map {|e| [e.to_sym, true]}.flatten ]
  end

  def markdown
    @markdown ||= Redcarpet::Markdown.new(RedcarpetExtender, extensions)
  end

  def convert(content)
    return super unless @site_config['markdown'] == 'RedcarpetExt'
    markdown.render(content)
  end
end
于 2014-07-15T14:27:24.350 回答
1

另一种解决方案是使用sass Bootstrap 版本。

此版本与 twbs/bootstrap 同步，并且 Jekyll 原生支持 sass/scss。

然后，一旦你有 sass 工作（需要五分钟），你只需要在你的自定义 style.scss 文件中创建一个规则：

table{
  @extend .table;
}

然后每个表都将使用 .table 引导规则。

于 2014-07-15T18:40:16.080 回答