前言
其他主题我不知道,但next主题Mist样式首页文章底下不显示标签,我个人喜欢首页文章下面也可以看到标签。Next其他样式可能还是没有标签好看。
因为文章首页隐藏的notshow会影响到首页显示标签,所以会在修改的一部分中提到首页隐藏的内容。
查看修改首页隐藏指定文章
Step1:修改主题的index.swig
正式内容:
主题可能各不一样,但原理都是一样的,我拿我使用的next主题来示范。
路径:\themes\next\layout\index.swig
找到以下代码:
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{{ post_template.render(post, true) }}
{% endfor %}
</section>
{% include '_partials/pagination.swig' %}
{% endblock %}
通过文章的for循环,判断每个文章有没有标签,如果有就显示在首页。
改为:
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
{{ post_template.render(post, true) }}
<!-- 首页显示标签 -->
{% if post.tags and post.tags.length %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- 首页显示标签 end -->
{% endfor %}
</section>
{% include '_partials/pagination.swig' %}
{% endblock %}
补充内容:
以下是给纯小白讲的,如果同时使用了**首页隐藏指定文章**,则首页隐藏的if语句要把标签的if语句给包含进去,否则文章消失了标签还在。大致修改成这样:
{% block content %}
<section id="posts" class="posts-expand">
{% for post in page.posts %}
<!-- 在这里判断首页隐藏是否为true -->
{% if post.notshow != true %}
{{ post_template.render(post, true) }}
<!-- 首页显示标签 -->
{% if post.tags and post.tags.length %}
<div class="post-tags">
{% for tag in post.tags %}
<a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
{% endfor %}
</div>
{% endif %}
<!-- 首页显示标签 end -->
{% endif %}
<!-- 所有判断结束 -->
{% endfor %}
</section>
{% include '_partials/pagination.swig' %}
{% endblock %}
Step2:修改CSS
此时你可能发现标签是不是和文章间距很大?不要慌。(只适用于Next.Mist)
在themes\next\source\css\_schemes\Mist\_posts-expanded.styl
的_posts-expanded.styl中找到代码:
.post-tags {
text-align: left;
a {
padding: 1px 5px;
background: $whitesmoke;
border-bottom: none;
}
修改为:
.post-tags {
text-align: left;
a {
padding: 1px 5px;
background: $whitesmoke;
border-bottom: none;
}
a:hover { background: $grey-light; }
<!-- 下面的意思是上方文章的距离为2px,下方的距离为20px -->
margin-top: 2px;
margin-bottom: 20px;
}
结语
完成了!!效果参考首页