Rumah > Artikel > hujung hadapan web > Jekyll博客搭建小记(附易用模板)_html/css_WEB-ITnose
这个博客是我在刚放暑假的时候花了几天时间写出来的. 那时是从阮一峰老师的某一篇博客看到关于Git Pages博客的搭建, 说实话那篇博文写得虽然很易懂, 但是实在是太简单了一点, 没有太多值得参考的内容.
GitHub地址是: https://github.com/LastAvenger/LastAvenger.github.io
在暑假的时间也又在对它慢慢地做修改, 从只支持显示博文, 到支持标签云, 支持归档, 支持评论, 得益于Jekyll的强大, 每一个功能只需要极少的代码就可以实现, 回头看搭建这么个博客并不是什么难事, 但是那个从无到有的过程实在是很值得去享受的.
整个博客搭建的过程主要是两件事情, 一件是网页的前端, 另一个是功能的实现.
我的网站主要参考了LOFTER某个模板的外观, 用火狐的F12在网页上一个个元素地查看, 再去W3C查看这个属性是干嘛用的, 在做网页的过程中总算对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 %}
生成标签云, 某标签下博文每超过五个字号增大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 %}
强制将内容作为Markdown转换:
{{ 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 %}