[Jekyll]从模板开始创建博客：提高篇

create: 2018-12-08 | update:2018-12-08

摘要

感觉入门篇创建好的博客还有很多不完善的地方？此篇将教你如何美化这个博客。

相关系列文章

入门篇 提高篇 常见问题

修改Tags.md的导航标签

这是效果图：效果图TagNavigation

如果你要理解这一部分内容，需要掌握基础的html+css的知识，主要是css中的类选择器，css语法。不过，完成这个步骤你并不要任何这部分的知识。

1.打开tags.md文件，会看到第18~22行如下：
<div id='tag_cloud'>
{% for tag in site.tags %}
<a href="#{{ tag[0] }}" title="{{ tag[0] }}" rel="{{ tag[1].size }}">{{ tag[0] }}</a>
{% endfor %}
</div>

请将源文件第18行(此处第一行修改为)

<div id='tag_cloud' class='tags'>
2.在css文件夹中创建名为beantech.css(注意后缀要css)，然后用记事本打开，将下列内容复制到该文件，并保存。
/* Hux add tags support */

.tags {
    margin-bottom: -5px;
}

    .tags a,
    .tags .tag {
        display: inline-block;
        border: 1px solid rgba(255, 255, 255, 0.8);
        border-radius: 999em;
        padding: 0 10px;
        color: #ffffff;
        line-height: 24px;
        font-size: 12px;
        text-decoration: none;
        margin: 0 1px;
        margin-bottom: 6px;
    }

        .tags a:hover,
        .tags .tag:hover,
        .tags a:active,
        .tags .tag:active {
            color: white;
            border-color: white;
            background-color: rgba(255, 255, 255, 0.4);
            text-decoration: none;
        }

@media only screen and (min-width: 768px) {

    .tags a,
    .tags .tag {
        margin-right: 5px;
    }
}

#tag_cloud {
    margin: 20px 0 15px 0;
}

    #tag_cloud a,
    #tag_cloud .tag {
        font-size: 14px;
        border: none;
        line-height: 28px;
        margin: 0 2px;
        margin-bottom: 8px;
        background: #D6D6D6;
    }

        #tag_cloud a:hover,
        #tag_cloud .tag:hover,
        #tag_cloud a:active,
        #tag_cloud .tag:active {
            background-color: #0085a1 !important;
        }

@media only screen and (min-width: 768px) {

    #tag_cloud {
        margin-bottom: 25px;
    }
}
3.打开_includes\head.html文件，并在head标签内部插入两行文本：(意思是将上面的css文件导入到网页中)
	<!-- Tag And OtherElements-->
	<link rel="stylesheet" href="{{ "/css/beantech.css" | prepend: site.baseurl }}">

在此，在Github Desktop上Commit更改并上传，在等几分钟，你就能看到效果图的样子了。

修改Tags.md的导航列表

这是效果图：效果图TagNavigation

1.打开tags.md，会看到第24~34行如下：
<ul class="listing">
{% for tag in site.tags %}
  <li class="listing-seperator" id="{{ tag[0] }}">{{ tag[0] }}</li>
{% for post in tag[1] %}
  <li class="listing-item">
  <time datetime="{{ post.date | date:"%Y-%m-%d" }}">{{ post.date | date:"%Y-%m-%d" }}</time>
  <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>
  </li>
{% endfor %}
{% endfor %}
</ul>

将其修改为

<!--标签列表-->
<div class="one-tag-list">
{% for tag in site.tags %}
  <span class="fa fa-tag listing-seperator" id="{{ tag[0] }}">
	<span class="tag-text">{{ tag[0] }}</span>
  </span>
{% for post in tag[1] %}
  <div class="post-preview">
	<a href="{{ post.url }}" title="{{ post.title }}">
		<h2 class="post-title">{{ post.title }}</h2>
		{% if post.subtitle and post.subtitle.length %}
			<h3 class="post-subtitle">{{ post.subtitle }}</h3>
		{% endif %}
	</a>
  </div>
{% endfor %}
{% endfor %}
 </div>
2.打开css\beantech.css添加以下内容
.post-preview > a {
  color: #404040;
}
.post-preview > a:hover,
.post-preview > a:focus {
  text-decoration: none;
  color: #0085a1;
}
.post-preview > a > .post-title {
  font-size: 21px;
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 8px;
}
.post-preview > a > .post-subtitle {
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  margin-bottom: 10px;
}
.post-preview > .post-meta {
  font-family: 'Lora', 'Times New Roman', serif;
  color: #808080;
  font-size: 16px;
  font-style: italic;
  margin-top: 0;
}
.post-preview > .post-meta > a {
  text-decoration: none;
  color: #404040;
}
.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
  color: #0085a1;
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .post-preview > a > .post-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .post-preview > a > .post-subtitle {
    font-size: 16px;
  }
  .post-preview .post-meta {
    font-size: 18px;
  }
}

.one-tag-list .tag-text {
  font-weight: 200;
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.one-tag-list .post-preview {
  position: relative;
}
.one-tag-list .post-preview > a .post-title {
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}
.one-tag-list .post-preview > a .post-subtitle {
  font-size: 12px;
}
.one-tag-list .post-preview > .post-meta {
  position: absolute;
  right: 5px;
  bottom: 0px;
  margin: 0px;
  font-size: 12px;
  line-height: 12px;
}
@media only screen and (min-width: 768px) {
  .one-tag-list .post-preview {
    margin-left: 20px;
  }
  .one-tag-list .post-preview > a > .post-title {
    font-size: 18px;
    line-height: 1.3;
  }
  .one-tag-list .post-preview > a > .post-subtitle {
    font-size: 14px;
  }
  .one-tag-list .post-preview .post-meta {
    font-size: 18px;
  }
}

修改子页导航标签

1.打开_layouts\post.html，第16~20行内容如下:
<div class="Tags">
    {% for tag in page.tags %}
    <a class="tag" href="/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
    {% endfor %}
</div>

将其修改为

<div id="tag_cloud" class="tags">
    {% for tag in page.tags %}
    <a href="/tags/#{{ tag }}" title="{{ tag }}">{{ tag }}</a>
    {% endfor %}
</div>

在此，在Github Desktop上Commit更改并上传，在等几分钟，你就能看到效果图的样子了。

添加对Latex数学公式的支持。

1.打开_includes\head.html，在<html>标签内添加以下内容:

© 2019 ht c ❖ Powered by Jekyll.