html - 在 Jekyll/Ruby 中缩进生成的标记-6ren

html - 在 Jekyll/Ruby 中缩进生成的标记

转载作者：技术小花猫更新时间：2023-10-29 12:33:01

27

4

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

例如我有这两个:

基础.html:

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

索引.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>

似乎只有第一行缩进正确。其余部分从行首开始……那么，多行液体模板导入？ :)

最佳答案

使用液体过滤器

我设法使用液体过滤器完成这项工作。有几点需要注意:

您的输入必须干净。我有一些弯引号和不可打印的字符，它们在一些文件中看起来像空格(从 Word 或其他文件中复制)，并且看到“UTF-8 中的无效字节序列”作为 Jekyll 错误。
它可能会破坏一些东西。我用的是 <i class="icon-file"></i>来自 Twitter Bootstrap 的图标。它用 <i class="icon-file"/> 替换了空标签 Bootstrap 不喜欢那样。此外，它搞砸了 octopress {% codeblock %}在我的内容中。我没有真正调查原因。
虽然这将清除液体变量的输出，例如 {{ content }}它实际上并没有解决原始帖子中的问题，即缩进周围 html 的 in context 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

关于html - 在 Jekyll/Ruby 中缩进生成的标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13646945/

27

4

0

文章推荐： linux - PCI 枚举 hack 以数据中止异常结束

文章推荐： css - 定位一个只有一个类值的元素

文章推荐： linux - 如何解释 numademo 输出

jekyll - can't findexecutable jekyll for gem jekyll --- Jekyll 无法执行
bundle exec jekyll serve Traceback (most recent call last): 4: from /Users/Suwan_Long/.rvm/gems/
Jekyll:Jekyll 和 Jekyll bootstrap 有什么区别？
我对 jekyll 之间的关系感到困惑和 jekyll bootstrap .我想创建一个博客，但我不确定要使用哪个网站来提供教程等等。最佳答案 Jekyll 是主要的东西。它是将您的 Markdo
jekyll - Jekyll 中不同的标签列表
我正在重写我的博客以使用 Jekyll。 Jekyll 使用 Liquid 模板语言，因此学习如何自定义变得更加困难。我有很多 .md 文件(markdown)，每个帖子一个。对于我在前面的以下内容
jekyll - Jekyll 中的子模板
在 jekyll 中是否有等同于 laravel 的 @section('') block ？我想做的是创建一个模板，可以压缩多个 jekyll 页面之间共享的 html。例如: 默认布局
jekyll - jekyll 中帖子的点赞按钮
我想为我的 jekyll 博客主页上的每篇文章添加一个赞按钮我没有找到任何插件。我不想要任何连接到公司/产品页面点赞的 Facebook 点赞按钮。我想要一个独立于任何社交平台且仅与帖子相关的点赞
jekyll - Jekyll 中的分类模板
在我的网站上，会有两种类型的帖子:blog和 portfolio .我希望每个类别都有一个页面，只显示该类别的帖子。在 Jekyll 中实现这一目标的最佳方法是什么？我已经做了一些功课，但我正在努力
jekyll - Jekyll 中的帖子和页面有什么区别？
我正在使用 Jekyll。帖子和页面有什么区别？据我所知: 它们都可以包含 YAML 前端内容，以及一个帖子有一个日期和一个永久链接，但一个页面没有。还有更多不同吗？最佳答案以下是差异帖子文
jekyll - Jekyll 中的一篇文章如何拥有多个作者？
我在一个 jekyll 帖子上有以下标题，其中一个作者“usman”生成 this文章。我想要类似“作者:usman，someone_else”这样的同事也可以为这篇文章做出贡献。这可能吗？我将如何设
jekyll - Jekyll 现在支持反引号代码块吗？
我看官方文档的时候，只提到了{% highlight python %}语法: https://jekyllrb.com/docs/templates/ 但是我更喜欢使用反引号代码块来突出 Markd
jekyll - 多语言 Jekyll
是否可以拥有多语言 jekyll 网站而无需维护单独的 _post 文件？我知道可以通过 _posts/2014-02-27-post.md 实现它和 _posts/pt/2014-02-27-po
jekyll - jekyll 中的区域设置特定日期
我正在尝试使用 jekyll 来创建网站。我正在使用 jekyll-bootstrap。默认配置有页面存档，其中所有帖子都按帖子日期的年份和月份分组列出。目前，月份以英文显示。我看过代码，这是一段摘
jekyll - Jekyll 按月发布的帖子
我正在尝试从我的网站创建帖子的存档页面。我希望能够以这种格式为每个月的帖子列表提供一个页面: www.mywebsite.com/2016/11 将显示 2016 年 11 月的所有帖子。我可以为我
jekyll - Jekyll 按月发布的帖子
我正在尝试从我的网站创建帖子的存档页面。我希望能够以这种格式为每个月的帖子列表提供一个页面: www.mywebsite.com/2016/11 将显示 2016 年 11 月的所有帖子。我可以为我
jekyll - Jekyll 中的范围帖子
为了只显示 4 个帖子，我使用了以下代码段: {% for post in site.categories.mycategory limit:4 %} {{ post.content }} {%
jekyll - Jekyll 集合中文档的自定义永久链接
我要添加collections到我的 Jekyll 网站。在我的 _config.yml 文件中，我设置了 output: true: collections: faq: output:
jekyll - jekyll 中的动态链接
目前我在静态网站上工作，所以我使用 jekyll 来生成它。为了拥有漂亮的结构和精美的 URL，我使用永久链接。 permalink: /impressum/ 例如，impressum.html 被呈
jekyll - 在没有路径的情况下在 Jekyll 中设置全局永久链接？
我希望我的 Jekyll 站点上的所有帖子和页面都具有相同的链接结构:example.com/my-title ，无论我用来存储文件的目录结构如何。查看 documentation看来我应该能够通过
jekyll - 将变量与 Jekyll 的包含运算符一起使用
有什么办法可以做这样的事情吗？ {% if file.basename contains {{basename}} %} 我看到的所有示例都明确使用了一个值，如下所示: {% if file.base
jekyll - 如何在 Jekyll 中定义自定义集合？
关注 Jekyll Collections documentation ,我在_config.yml中写了如下代码 _config.yml collections: - popular_posts 所
jekyll - 在 Jekyll 中计算集合标签
我正在尝试计算和列出 Jekyll 中名为 _note 的集合中的标签。我认为，我非常接近解决它，但我对标签的实际计数有点困惑(列出唯一标签工作正常)并且可以用第二双眼睛查看液体标记看看我错过了什么。

首页

博学

6Ren·AI

商城

html - 在 Jekyll/Ruby 中缩进生成的标记