Jekyll博客搭建小记(附易用模板)_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:47:26
原创
1206人浏览过

这个博客是我在刚放暑假的时候花了几天时间写出来的. 那时是从阮一峰老师的某一篇博客看到关于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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2290">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/175686939683618.png" alt="AiPPT模板广场">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2290">AiPPT模板广场</a>
                            <p>AiPPT模板广场-PPT模板-word文档模板-excel表格模板</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AiPPT模板广场">
                                <span>147</span>
                            </div>
                        </div>
                        <a href="/ai/2290" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AiPPT模板广场">
                        </a>
                    </div>
                    <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 %}
登录后复制

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号