16

これはおそらくばかげた質問ですが、Jekyll で生成されたマークアップを使用して Liquid タグのインデントを保持する方法があるかどうか疑問に思っています。解決できなければ世界は終わらない。コンパイルされたとしても、コードがきれいに見えるのが好きなので、ただ興味があります。:)

たとえば、次の 2 つがあります。

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>

最初の行だけが正しくインデントされているようです。残りは行の先頭から始まります...つまり、複数行の液体テンプレートのインポートですか? :)

4

2 に答える 2

13

液体フィルターの使用

液体フィルターを使用して、この作業を行うことができました。いくつかの注意事項があります。

  • 入力はクリーンでなければなりません。いくつかのファイル (Word からの copypasta など) に空白のように見える巻き毛の引用符と印刷できない文字があり、Jekyll エラーとして「UTF-8 の無効なバイト シーケンス」が表示されていました。

  • それはいくつかのものを壊す可能性があります。<i class="icon-file"></i>Twitterブートストラップのアイコンを使用していました。空のタグをに置き換えましたが<i class="icon-file"/>、ブートストラップはそれが好きではありませんでした。さらに、コンテンツ内の octopress{% codeblock %}を台無しにします。その理由を詳しく調べていませんでした。

  • これは、周囲のhtmlのコンテキスト{{ content }}で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 タスクの使用

rakefile でタスクを使用して、jekyll サイトが生成された後に出力をきれいに印刷します。

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
于 2013-02-23T05:18:13.020 に答える
0

カスタム Liquid フィルターを作成して html を整理し、html{{content | tidy }}をインクルードすることで、これを実現できます。

ちょっと調べてみると、ruby tidy gem は維持されていない可能性がありますが、nokogiri が最適な方法であることがわかります。もちろん、これは nokogiri gem をインストールすることを意味します。

Liquid フィルターの作成に関するアドバイスと、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)

(未テスト)

于 2012-11-30T22:38:58.623 に答える