Hexo的Next主题美化——首页显示标签

前言

其他主题我不知道，但next主题Mist样式首页文章底下不显示标签，我个人喜欢首页文章下面也可以看到标签。Next其他样式可能还是没有标签好看。

因为文章首页隐藏的notshow会影响到首页显示标签,所以会在修改的一部分中提到首页隐藏的内容。
查看修改首页隐藏指定文章

我的小屋https://ahh666.com

---

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; 
	  }

结语

完成了！！效果参考首页