将 jekyll 标签放入“onclick”中断

Question

在 jekyll 中，这是可行的：

---
layout: default
---
    <div class="brief">
        <ul>
            {% for post in site.posts %}
                <li class="postlist">
                    <a href="#" onclick='document.getElementById("one").innerHTML="{{post.url}}";'>{{post.title}}</a>
                    <p>{{post.meta}} <br>{{post.date}} <br>{{post.category}}</p>                
                </li>
            {% endfor %}
        </ul>
    </div>
    <div class="post" id="one"></div>

但是当我将第 8 行更改为：

<a href="#" onclick='document.getElementById("one").innerHTML="{{post.content}}";'>{{post.title}}</a>

它坏了。为什么会发生这种情况，我该怎么做才能改变这种情况并获得预期的结果？

Answer 1

您的帖子内容可能会创建无效的 HTML（例如，结束 onclick 引号）。

在我看来，实现此目的的更好方法是隐藏所有帖子内容，并让您的onclick 切换一个类以显示相关内容。这将使您免于通过属性值对内容进行编码和解码的无尽恐惧。

例如：

{% for post in site.posts %}
  <li>
    <a href="#" onclick='document.getElementById("post-content-{{ forloop.index }}").classList.toggle("hidden")'>{{ post.title }}</a>

    <p>{{ post.meta }} <br>{{ post.date }} <br>{{ post.category }}</p>
    <p id="post-content-{{ forloop.index }}" class="hidden">{{ post.content }}</p>
  </li>
{% endfor %}

外部 CSS：

.hidden {
  display: none;
}

您也可以扩展它以首先隐藏所有内容部分，因此一次只显示一个。