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

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

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

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

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

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

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

Force content to be converted as Markdown:

{{ content | markdownify }}

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