gpt4 book ai didi

Reusable components using Tera/Zola(使用Tera/Zola的可重复使用组件)

转载 作者:bug小助手 更新时间:2023-10-22 17:34:45 25 4
gpt4 key购买 nike



I am making a theme based on another Zola theme and it is going great so far. The only problem I have run into is the following:
I am using Tailwind. It works well, but because Tailwind classes can add up, the Tailwind team reccomends using components. I know how to do this in Vue using Slots, but I have no idea how to do this with Tera/Zola or if this is even possible at all. Does anyone have an idea how to solve this problem elegantly in Zola/Tera

我正在根据左拉的另一个主题制作一个主题,到目前为止进展顺利。我遇到的唯一问题是:我正在使用Tailwind。它工作得很好,但由于Tailwind类可以相加,所以Tailwind团队建议使用组件。我知道如何在Vue中使用Slots来做到这一点,但我不知道如何使用Tera/Zola来做到,也不知道这是否可能。有人知道如何在左拉/特拉身上优雅地解决这个问题吗


I am now using the following hack. It works, but it is quite ugly and requires 2 files per "component".

我现在正在使用以下破解。它可以工作,但它非常难看,每个“组件”需要2个文件。


~It enables me to use consistent classes for links:

~它使我能够为链接使用一致的类:


_startlink.html

_startlink.html


<div class="tailwind classes here">

_endlink.html

_endlink.html


</div>

When using the "component"

使用“组件”时


{% include "_startlink.html" %}
<a href="/blog">blog</a>
{% include "_endlink.html" %}

My intuition says to do something like the following:


_link.html

_链接.html


<a class="Tailwind classes here" href=link> {%block link%} {% endblock link %} </a>

Using the component:

使用组件:


{% block link link="example.com" %} Link to example.com {% endblock link %}

Edit: I found a new way. I prefer it over the other one, but I still don't like it:

编辑:我找到了一条新路。我更喜欢它而不是另一个,但我仍然不喜欢它:


{% set tl_link = "tailwind classes here" %}
<a class="{{ tl_link }}"> text here </a>

更多回答
优秀答案推荐
更多回答

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com