在“onclick”中添加jekyll标签断裂

putting jekyll tags in an "onclick" breaks

本文关键字：jekyll 标签 添加 onclick      更新时间：2023-09-26

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

优惠。为什么会发生这种情况，我能做些什么来改变这种情况并获得预期的结果?

很可能你的帖子内容是创建无效的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;
}

您也可以扩展它来首先隐藏所有的内容部分，这样每次只显示一个。

相关文章：