Notes on building a Jekyll blog (with easy-to-use template)_html/css

Notes on building a Jekyll blog (with easy-to-use template)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:47:26

Original

1102 people have browsed it

I spent a few days writing this blog during my summer vacation. At that time, I read about Git from a blog of teacher Ruan Yifeng Regarding the establishment of Pages blog, to be honest, although the blog post is very easy to understand, it is too simple and does not have much content worth referencing.

The GitHub address is: https://github.com /LastAvenger/LastAvenger.github.io

I am slowly modifying it during the summer vacation, from supporting only displaying blog posts to supporting tag clouds, archiving, and comments, thanks to Jekyll It is so powerful that each function only requires a very small amount of code to implement. Looking back, it is not difficult to build such a blog, but the process of starting from scratch is really worth enjoying.

The whole The process of building a blog mainly involves two things, one is the front-end of the web page, and the other is the implementation of the function.

Front-end

My website mainly refers to the appearance of a template from LOFTER. Use Firefox's F12 to view the elements on the web page one by one, and then go to the W3C to see what this attribute is used for. In the process of making the web page, I finally have a little understanding of css.

Functions

This part is mainly implemented using Jekyll’s own functions. No plug-ins are used. The more important lines of code are:
Generate a one-page blog post directory and display the date and summary:

{% for post in paginator.posts %}    <a href="{{ post.url }}">{{ post.title }}</a><hr>    <p> {{ post.excerpt | strip_html }} </p>    <a href="">{{ post.date | date_to_string }}</a> {% endfor %}

Copy after login

Page switching of blog post list:

{% if paginator.previous_page %}    {% if paginator.page == 2 %}        <a href="../">? 上 ? 一页</a>    {% else %}        <a href="/page{{ paginator.previous_page }}">? 上 ? 一页</a>    {% endif %}{% else %}    <a>? 上 ? 尽头</a>{% endif %}{% if paginator.next_page %}    <a href="/page{{ paginator.next_page }}">下 ? 一页 ? </a>{% else %}    <a>下 ? 尽头 ? </a>{% endif %}

Copy after login

Generate tag cloud, and increase the font size by 20% for every five blog posts under a certain tag:

 {% for tag in site.tags %}    <a href="#{{ tag[0] }}"         title="{{ tag[0] }}"         style="font-size: {{ tag[1].size | divided_by:5 | times:20 | plus:100 }}%;">{{ tag[0] }}({{ tag[1].size }})</a>{% endfor %}

Copy after login

Generate a tag cloud with date Tag list:

{% for tag in site.tags %}    <blockquote id="{{ tag[0] }}">{{ tag[0] }}</blockquote>    <ul>        {% for post in tag[1] %}        <li>        <time datetime="{{ post.date | date_to_string }}">{{ post.date | date_to_string}}</time>        <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>        </li>        {% endfor %}        </ul>{% endfor %}

Copy after login

Generate archived article navigation:

{% for post in site.posts %}    {% capture ym %}        {{ post.date | date:"%Y 年 %m 月" }}    {% endcapture %}    {% if yearmonth != ym %}        {% assign yearmonth = ym %}    <li><a href="#{{ ym }}">{{ ym }}</a></li>    {% endif %}{% endfor %}

Copy after login

Generate archived article list:

{% for post in site.posts %}    {% capture ym %}{{ post.date | date:"%Y 年 %m 月" }}{% endcapture %}    {% if yearmonth != ym %}        {% assign yearmonth = ym %}        </ul>        <blockquote id="{{ ym }}">{{ ym }}</blockquote>        <ul>    {% endif %}    <li>    <time datetime="{{ post.date | date_to_string }}">{{ post.date | date_to_string }}</time>    <a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a>    </li>{% endfor %}

Copy after login

Force content to be converted as Markdown:

{{ content | markdownify }}

Copy after login

Switching between blog posts:

{% if page.previous %}    <a href="{{ page.previous.url }}">? 上 ? {{ page.previous.title }}</a>{% else %}    <a>? 上 ? 尽头</a>{% endif %}{% if page.next %}    <a href="{{ page.next.url }}">下 ? {{ page.next.title }} ? </a>{% else %}     <a>下 ? 尽头 ? </a>{% endif %}

Copy after login