{% for post in site.posts %}
<article class="post" tags="{% for tag in post.tags %}{{tag}}{% if forloop.last == false %}{{" "}}{% endif %}{% endfor %}">
<h3><a href="{{post.url}}">{{post.title}}</a></h3>
</article>
{% endfor %}
然后在CSS中,默认隐藏所有帖子,只显示标签与url id/ hash匹配的帖子
.post {
display: none;
}
{% for tag in site.tags %}#{{tag[0]}}:target ~ [tags~={{tag[0]}}]{% if forloop.last == false %}, {% endif %}{% endfor %} {
display: block;
}
/*
The compiled version will look like this
#tagname:target ~ [tags~="tagname"], #tagname2:target ~ [tags~="tagname2"] {
display: block;
}
*/
8条答案
按热度按时间wyyhbhjk1#
以下是一个解决方案**,标签在一页上按字母顺序排序**。
它只使用Liquid,这意味着它可以在GitHub页面上工作:
您可以在here操作中看到它。
还有一种方法可以为每个标签生成一个单独的页面,而不需要插件 (这将在GitHub页面上工作)。
我在博客上有更详细的解释:
Separate pages per tag/category with Jekyll (without plugins)
首先,您需要一个新的布局文件:
/_layouts/tagpage.html
:有了这个布局文件,您可以通过添加一个只有两行YAML前页的新文件来添加一个新的标记页。
以下是
jekyll
标记的示例:/tags/jekyll/index.html
:这种方法的唯一缺点是:每次你第一次使用一个新的标记时,你必须记住为它创建一个新的两行文件。
要生成根索引文件 (即链接到
/tags/jekyll/index.html
等的标记列表),可以使用类似的解决方案,如本答案顶部的解决方案,我生成了一个带有按字母顺序排序的标记的页面:这将生成如下所示的链接列表:
q9yhzks02#
此要点将为您生成每个类别的页面:https://gist.github.com/524748
它使用了一个Jekyll Generator插件,外加一个Page子类。
suzh9iv83#
看一下sites using jekyll。有一些定制的fork实现了标记功能,希望也是你想要的方式:-)
q3aa05254#
我也有同样的问题,偶然发现了这个:http://gist.github.com/143571.
这是一个rake任务,它生成一个标签列表。我稍微修改了一下,我的版本是:http://github.com/mattfoster/mattfoster.github.com/blob/master/Rakefile.
虽然这不会给你一个页面每个标签,你可以使用锚,这是一半的道路!
q7solyqu5#
我使用的是一个很棒的Jekyll Tagging插件,它可以自动生成标签云和标签页面,安装和使用都很方便。
这是我博客上的a page for the "photo" tag(法语),你可以在底部看到标签云。
zengzsys6#
根据Christian上面的回答,我制作了一个bash脚本,它可以实现他所描述的功能。
https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh
确保在
/non_website_resources/
目录中包含附带的14行vim script以及
创建上面Christian的答案中所示的
/_layouts/tagpage.html
,但将其重命名为/_layouts/tag_pages.html
文件结构应如下所示:
从根目录
./rebuild_tags.sh
运行如果出现权限被拒绝错误,请确保运行
chmod 777 rebuild_tags.sh
如果您查看脚本注解,它相当简单:
sed
查找_post
目录下每个.md
文件中的所有标记sed
将数据转换为正确的格式index.html
这样,如果您有任何新标记,只需在推送到github之前运行脚本来重建页面
一个很好的简单的非插件方式做标记
删除了对其他文件的依赖。只需要一个脚本!
bogh5gae7#
我用CSS做这些。首先列出一个元素,并使用标签名作为它的id。
然后列出所有帖子并使用其标签作为“tags”自定义属性的值。
然后在CSS中,默认隐藏所有帖子,只显示标签与url id/ hash匹配的帖子
我写了一篇关于here的文章。
dtcbnfnu8#
我写了一个
pre-push
钩子来检测缺失的标签页,它会用bash脚本gentag
创建缺失的标签页,如果推送草稿,钩子还会发出警告。为简单起见,假设标签作为yaml数组输入到front matter中,并使用
yq
收集。还有一个
pre-receive
钩子,用于将站点部署到个人Web服务器上。