生成 Jekyll Liquid 内容而不包含它（仅来自 JQuery 加载函数）答案

【问题标题】：Generate Jekyll Liquid content without including it (just from JQuery load function)生成 Jekyll Liquid 内容而不包含它（仅来自 JQuery 加载函数）
【发布时间】：2019-07-29 01:19:40
【问题描述】：

好吧，我正在尝试拨打$('element').load()。因为，我只想在台式机和平板电脑上加载内容，而不是在移动设备上。因此，为了避免数据冗余，我正在执行以下操作（在我的 $(document).ready(func...) 之后）：

  $('section[data-showif="only-sm"]').each(function(index) {
     if($(window).width() > 992)
         $(this).load("/html/" + $(this).data("htmlinclude") + ".html");
  });

我有一个包含以下数据的部分：

<section id="github-cards" data-showif="only-sm" data-htmlinclude="github-cards-content">
</section>

然后，在我的 html/github-cards-content.html 文件中，我有这个：

<div class="container gitcards">
    <div class="row">
        {% for repo in site.data.repos %}
            <div class="col-md-4">
                <div class="github-card" data-github="{{ repo }}" data-theme="default"></div>
            </div>
        {% endfor %}
    </div>
</div>

这并不重要，但我使用Github Cards 来显示我的项目。

这是我的 yml 文件，位于：_data/repos.yml:

- "uta-org/QuickFork"
- "uta-org/ZWSetup"
- "uta-org/uzLib.Lite"

如果我只是将github-cards-content.html 中的内容放入我的部分，这将非常有效。但是，如果我按照我的解释进行操作，则会显示 Liquid 代码（我想避免它）。

我可以想象如果不调用 {% include file... %} 就无法加载流动模板/内容，但我想知道是否有任何解决方法。

编辑：

这是一个人说的：

Liquid 在服务器端渲染，因此您将无法渲染使用 jquery 加载页面后的液体。你可以绕过这个通过从一开始，但是通过向 div 添加一个类来隐藏它显示设置为无。然后，您可以在用户删除该类点击“点击”。

https://stackoverflow.com/a/44398827/3286975

我可以想象这样的事情。但是是否有任何插件可以使服务器在需要时才进行渲染而不向客户端发送数据？（我需要这个，因为在移动设备中，由于漫游，我需要尽可能少地避免发送给客户端的数据）

【问题讨论】：

标签： jquery html jekyll liquid jquery-load

【解决方案1】：

我不是 100% 确定我了解您遇到的问题。查看您指出的问题的示例会很有帮助，因为它是模棱两可的：

如果我只是将 github-cards-content.html 中的内容放入我的部分，这将非常有效。但是，如果我按照我的解释进行操作，则会显示 Liquid 代码（我想避免它）。

也就是说，指出 Jekyll 将解析任何顶部有 front-matter block 的文件中的流动语法可能会有所帮助：

---
---

// Some code...

这包括 Javascript 文件以及 HTML、CSS 等。如果您在顶部有这些连字符，则可以通过流动语法添加动态模板逻辑。

还应该指出，Jekyll 是一个静态站点生成器。这意味着它不像 PHP 或其他脚本语言那样提供实时动态视图。一旦生成并提供了静态资源，就无法通过 Liquid 执行其他逻辑，因为此时您处于静态 HTML 领域。

【讨论】：