Đánh dấu tạo ra thụt lề trong Jekyll/Ruby

Đây có lẽ là một câu hỏi ngớ ngẩn nhưng tôi tự hỏi liệu có cách nào để có đánh dấu được tạo ra trong Jekyll để duy trì sự thụt đầu dòng của Liquid-tag hay không. Thế giới không kết thúc nếu nó không thể giải quyết được. Tôi chỉ tò mò vì tôi thích mã của tôi trông gọn gàng, ngay cả khi biên soạn. :)Đánh dấu tạo ra thụt lề trong Jekyll/Ruby

Ví dụ tôi có hai:

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>

Vấn đề là nhập khẩu {{content}} - được hiển thị mà không có sự đánh dấu được sử dụng ở trên.

Vì vậy, thay vì

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

tôi nhận được

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

Có vẻ như chỉ dòng đầu tiên được thụt vào một cách chính xác. Phần còn lại bắt đầu từ đầu của dòng ... Vì vậy, nhập khẩu multiline lỏng-templating? :)

Nguồn

2012-11-30 russinkungen

Có ai từng đưa ra giải pháp trực tiếp tạo đánh dấu thụt lề đúng cách không? – mb21

Sử dụng một bộ lọc chất lỏng

Tôi đã thực hiện công việc này bằng cách sử dụng một bộ lọc chất lỏng. Có một vài cảnh báo:

Đầu vào của bạn phải sạch. Tôi đã có một số dấu ngoặc kép và ký tự không in được trông giống như khoảng trống trong một vài tệp (copypasta từ Word hoặc một số như vậy) và đã thấy "chuỗi byte không hợp lệ trong UTF-8" như một lỗi Jekyll.
Nó có thể làm hỏng một số thứ. Tôi đã sử dụng các biểu tượng <i class="icon-file"></i> từ twitter bootstrap. Nó thay thế các thẻ trống với <i class="icon-file"/> và bootstrap không thích điều đó. Ngoài ra, nó vít lên octopress {% codeblock %} s trong nội dung của tôi. Tôi đã không thực sự nhìn vào lý do tại sao.
Trong khi điều này sẽ làm sạch các đầu ra của một biến lỏng như {{ content }} nó không thực sự giải quyết vấn đề trong các bài bản gốc, mà là để thụt html trong bối cảnh của html xung quanh. Điều này sẽ cung cấp html được định dạng tốt, nhưng dưới dạng một đoạn mà sẽ không bị thụt lề liên quan đến các thẻ ở trên đoạn.Nếu bạn muốn định dạng mọi thứ trong ngữ cảnh, hãy sử dụng tác vụ Rake thay vì bộ lọc.

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)

Sử dụng một nhiệm vụ Rake

tôi sử dụng một nhiệm vụ trong rakefile tôi khá in đầu ra sau khi trang web Jekyll đã được tạo ra.

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

Nguồn

2013-02-23 05:18:13 bwest

có cách nào để thụt lề chỉ nội dung của phần tử 'body' nhưng để lại các dòng mới bổ sung cho dễ đọc? – fcalderan

Bạn có thể thực hiện rõ ràng phép biến đổi XSL như được mô tả ở đây: http://stackoverflow.com/questions/1898829/how-do-i-pretty-print-html-with-nokogiri và sau đó tùy chỉnh XSLT khi bạn cần. – bwest

Chúng tôi có thể thực hiện việc này bằng cách viết bộ lọc Chất lỏng tùy chỉnh để gọn gàng html, sau đó thực hiện {{content | tidy }} để bao gồm html.

Tìm kiếm nhanh suggests rằng đá quý gọn gàng có thể không được duy trì nhưng nokogiri đó là con đường để đi. Điều này tất nhiên có nghĩa là cài đặt đá quý nokogiri.

Xem advice on writing liquid filters và Jekyll example filters.

Một ví dụ có thể trông như thế này: trong _plugins, thêm một kịch bản gọi là gọn gàng-html.rb chứa:

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

(chưa được kiểm tra)

Nguồn

2012-11-30 22:38:58 cboettig

Chỉ cần thử phương pháp này nhưng văn bản vẫn không bị chặn – fcalderan

Đánh dấu tạo ra thụt lề trong Jekyll/Ruby

Trả lời

Các vấn đề liên quan