在 Jekyll Markdown 中转义渲染液体模板答案

【问题标题】：Escaping Rendering Liquid Template in Jekyll Markdown在 Jekyll Markdown 中转义渲染液体模板
【发布时间】：2023-03-11 10:26:01
【问题描述】：

有没有办法在 Jekyll 降价页面中逃避液体模板渲染？

我在 Markdown 文件中有以下防护代码块：

```html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example Title</title>
</head>

<body>
  <div id="app">
    {% raw %}
    {{ content }}
    {% endraw %}
  </div>
</body>

</html>
```

渲染到：

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Example Title</title>
</head>

<body>
  <div id="app">



  </div>
</body>

</html>

我不知道为什么，但是 Jekyll 正在处理 {% raw %} 标签之间的内容。我想保留{{ content }} 块原样，而不被渲染。

我也尝试过使用{ 作为页面变量并通过以下方式访问它的方法：

{{ page.lcb }}{ content }}

【问题讨论】：

How to escape liquid template tags?的可能重复

标签： markdown jekyll liquid

【解决方案1】：

事实证明，Vue.js 的模板问题使我的问题更加复杂，Vue.js 也使用 mustache 语法作为模板。我能够通过以下方式解决此问题：

{% raw %}{{ "{{ content "  }}}}{% endraw %}

它看起来不太好，但它确实有效。

【讨论】：

【解决方案2】：

我遇到了同样的问题。我将 CloudCannon 用于 Jekyll。我有几个地方使用了 {{}}，所以我最终将它放入组件文件中，模板可能应该驻留在其中以符合 Vue 的结构，例如：

var app = new Vue({
    el: "#app",
    data: {...} ,
    filters: {...} ,
    methods: {...},
    template: `
      <div>
        <ul class="services">
          <li class="services__item" v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ \'active\' : service.active }">
            <span>{{service.name}}</span> <span>{{service.price | currency}}</span>
          </li>
        </ul>
        <p class="total">
          <span>Total:</span> <span>{{total() | currency}}</span>
        </p>
      </div>
    `
});

【讨论】：