缩进 Jekyll/Ruby 中生成的标记

问题描述 投票:0回答:3

这可能是一个愚蠢的问题,但我想知道是否有任何方法可以在 Jekyll 中生成标记来保留 Liquid 标签的缩进。如果问题无法解决,世界就不会终结。我只是很好奇,因为我喜欢我的代码看起来整洁,即使是编译后的。 :)

例如我有这两个:

base.html:

<body>
    <div id="page">
        {{content}}
    </div>
</body>

index.md:

---
layout: base
---
<div id="recent_articles">
    {% for post in site.posts %}
    <div class="article_puff">
        <img src="/resources/images/fancyi.jpg" alt="" />
        <h2><a href="{{post.url}}">{{post.title}}</a></h2>
        <p>{{post.description}}</p>
        <a href="{{post.url}}" class="read_more">Read more</a>
    </div>
    {% endfor %}    
</div>

问题是导入的 {{content}}-标签在渲染时没有使用上面使用的缩进。

所以而不是

<body>
    <div id="page">
        <div id="recent_articles">  
            <div class="article_puff">
                <img src="/resources/images/fancyimage.jpg" alt="" />
                <h2><a href="/articles/2012/11/14/gettin-down-with-rwd.html">Gettin' down with responsive web design</a></h2>
                <p>Everyone's talking about it. Your client wants it. You need to code it.</p>
                <a href="/articles/2012/11/14/gettin-down-with-rwd.html" class="read_more">Read more</a>
            </div>
        </div>
    </div>
</body>

我明白了

<body>
    <div id="page">
        <div id="recent_articles">  
<div class="article_puff">
<img src="/resources/images/fancyimage.jpg" alt="" />
    <h2><a href="/articles/2012/11/14/gettin-down-with-rwd.html">Gettin' down with responsive web design</a></h2>
    <p>Everyone's talking about it. Your client wants it. You need to code it.</p>
    <a href="/articles/2012/11/14/gettin-down-with-rwd.html" class="read_more">Read more</a>
</div>
</div>
    </div>
</body>

似乎只有第一行缩进正确。其余的从行的开头开始...那么,多行液体模板导入? :)

html ruby jekyll liquid
3个回答
13
投票

使用液体过滤器

我设法使用液体过滤器完成这项工作。有一些注意事项:

  • 您的输入必须干净。我有一些弯引号和不可打印的字符,看起来像一些文件中的空格(来自 Word 的 copypasta 或类似文件),并且看到“UTF-8 中的无效字节序列”作为 Jekyll 错误。

  • 它可能会破坏一些东西。我使用的是 twitter bootstrap 中的

    <i class="icon-file"></i>
    图标。它用
    <i class="icon-file"/>
    替换了空标签,但 bootstrap 不喜欢这样。此外,它还搞砸了我内容中的 octopress
    {% codeblock %}
    。我没有仔细研究原因。

  • 虽然这会清理诸如

    {{ content }}
    之类的液体变量的输出,但它实际上并没有解决原始帖子中的问题,即缩进周围html的上下文中的html。这将提供格式良好的 html,但作为片段不会相对于片段上方的标签缩进。如果您想格式化上下文中的所有内容,请使用 Rake 任务而不是过滤器。

  • -

require 'rubygems' require 'json' require 'nokogiri' require 'nokogiri-pretty' module Jekyll module PrettyPrintFilter def pretty_print(input) #seeing some ASCII-8 come in input = input.encode("UTF-8") #Parsing with nokogiri first cleans up some things the XSLT can't handle content = Nokogiri::HTML::DocumentFragment.parse input parsed_content = content.to_html #Unfortunately nokogiri-pretty can't use DocumentFragments... html = Nokogiri::HTML parsed_content pretty = html.human #...so now we need to remove the stuff it added to make valid HTML output = PrettyPrintFilter.strip_extra_html(pretty) output end def PrettyPrintFilter.strip_extra_html(html) #type declaration html = html.sub('<?xml version="1.0" encoding="ISO-8859-1"?>','') #second <html> tag first = true html = html.gsub('<html>') do |match| if first == true first = false next else '' end end #first </html> tag html = html.sub('</html>','') #second <head> tag first = true html = html.gsub('<head>') do |match| if first == true first = false next else '' end end #first </head> tag html = html.sub('</head>','') #second <body> tag first = true html = html.gsub('<body>') do |match| if first == true first = false next else '' end end #first </body> tag html = html.sub('</body>','') html end end end Liquid::Template.register_filter(Jekyll::PrettyPrintFilter)

使用 Rake 任务

在生成 jekyll 站点后,我在 rakefile 中使用一个任务来漂亮地打印输出。

require 'nokogiri' require 'nokogiri-pretty' desc "Pretty print HTML output from Jekyll" task :pretty_print do #change public to _site or wherever your output goes html_files = File.join("**", "public", "**", "*.html") Dir.glob html_files do |html_file| puts "Cleaning #{html_file}" file = File.open(html_file) contents = file.read begin #we're gonna parse it as XML so we can apply an XSLT html = Nokogiri::XML(contents) #the human() method is from nokogiri-pretty. Just an XSL transform on the XML. pretty_html = html.human rescue Exception => msg puts "Failed to pretty print #{html_file}: #{msg}" end #Yep, we're overwriting the file. Potentially destructive. file = File.new(html_file,"w") file.write(pretty_html) file.close end end



0
投票
{{content | tidy }}

来包含 html 来实现此目的。


快速搜索

表明

,红宝石整洁的宝石可能无法维护,但 nokogiri 是正确的选择。 这当然意味着安装 nokogiri gem。 请参阅

有关编写液体过滤器的建议

Jekyll 示例过滤器 示例可能如下所示:在

_plugins

中,添加一个名为 tidy-html.rb 的脚本,其中包含:


require 'nokogiri' module TextFilter def tidy(input) desired = Nokogiri::HTML::DocumentFragment.parse(input).to_html end end Liquid::Template.register_filter(TextFilter)

(未经测试)


0
投票

https://github.com/apsislabs/jekyll-tidy

根据说明,您可以添加

plugins: - jekyll-tidy

_config.yaml

文件或添加

group :jekyll_plugins do
  gem "jekyll-tidy"
end

Gemfile

。在后一种情况下,请务必运行

bundle install
请注意,它将缩进两个空格并删除所有空行。多行注释的格式不正确,但您可以简单地单独注释每一行来解决此问题。

© www.soinside.com 2019 - 2024. All rights reserved.