Jekyll ブログ構築の注意点 (使いやすいテンプレート付き)_html/css_WEB-ITnose

私は夏休み中に数日間このブログを書いていましたが、その時、Ruan Yifeng 先生が書いたブログから Git Pages ブログの設立について読みました。とても分かりやすく書いており、シンプルすぎて参考になる内容はあまりありません

GitHubのアドレスはhttps://github.com/LastAvenger/LastAvenger.github.io

夏休み中ですまた、ブログ投稿の表示だけをサポートするものから、タグ クラウド、アーカイブ、コメントをサポートするものまで、徐々に変更されています。Jekyll の機能のおかげで、それぞれの機能はほんの少量のコードで実装できます。難しいことではありませんが、ゼロから始めるプロセスは本当に楽しむ価値があります

ブログ構築プロセス全体には主に 2 つのことが含まれます。1 つは Web ページのフロントエンドで、もう 1 つは実装です。

フロント。 -end

私の Web サイトでは、主に LOFTER での特定のテンプレートの外観を参照しています。Firefox の F12 を使用して Web ページ上の要素を 1 つずつ表示し、この属性が何に使用されているかを確認します。 Web ページを作成するプロセスでは、Zhongzong が CSS について少し理解しました。

関数

この部分は主に Jekyll 独自の関数を使用して実装されています。 より重要なコード行は次のとおりです。 - ページのブログ投稿ディレクトリ、日付と概要の表示:

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

ブログ投稿リストのページ切り替え:

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

タグ クラウドを生成し、特定のタグの下にあるブログ投稿のフォント サイズが 5 つの投稿ごとに 20% ずつ増加します:

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

日付付きのタグリストを生成する:

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

アーカイブを生成する 記事ナビゲーション:

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

アーカイブされた記事リストを生成する:

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

コンテンツを強制的にマークダウンとして変換する:

{{ content | markdownify }}

ブログ投稿を前後に切り替える:

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