Jekyll 使用记录

垃圾站(SYN)已删除 2015-08-26)基本上能正常运行了,趁热打铁,把折腾的一些过程记录一下,算是笔记吧。需要的网友也可以参考一下。PS:可能会有些非常非常业余的代码,所以参考的自己看着办吧。

<!--more--> 标签

我在 WordPress 发布的所有文章,都在第一段后手工加了 <!--more--> 标签,这样首页内容能带 html 样式显示(WordPress 自动截断会把样式都去掉,虽然高度看起来统一了,但是内容看起来可能就怪怪的了)。Jekyll 会自动取每篇文章从开头到第一次出现 excerpt_separator 的地方作为文章的摘要。 如果没有配置 excerpt_separator,Jekyll 默认会截取文章第一段作为摘要。我用的是这个方法,所以把 WordPress 导出的文章的 <!--more--> 标签批量删除掉了。

如果想自己控制输出多段,可以在需要截断的地方添加 <!--more--> 标签,并且在 _config.yml 文件中添加配置:excerpt_separator: "<!--more-->"

当然,也可以像 WordPress 那样添加 <!--more--> 标签,并添加 Read More 链接。使用下面的代码就可以了,原文(没有测试)

{% if post.content contains '<!--more-->' %}
{{ post.content | split:'<!--more-->' | first }}
<p class="more"><a href="{{ post.url }}">Read More &raquo;</a></p>
{% else %}
{{ post.excerpt }}
{% endif %}

详细请参考:官方文档

分页功能

Jekyll 目前只能对首页进行分页,分类/标签下的文章无法分页,如有方法能实现,请留言告知,谢谢。

开启分页功能很简单,只需要在 _config.yml 里面添加一行 paginate 配置每页显示多少篇文章即可。如,每页最多显示 8 篇文章,添加如下代码即可。

paginate: 8

下面我的分页代码,修改自:V2EX,代码放到 index.html 恰当位置即可。

  <div id="post-pagination" class="pagination">
{% if paginator.page == 1 %}
<span class="page-numbers current">1</span>
{% else %}
<a class="page-numbers" href="/">1</a>
{% endif %}

{% assign pageSize = 2 %}
{% assign startPage = paginator.page | minus:pageSize %}
{% if 2 > startPage %}
{% assign startPage = 2 %}
{% endif %}
{% assign endPage = paginator.page | plus:pageSize %}
{% if endPage >= paginator.total_pages %}
{% assign endPage = paginator.total_pages | minus:1 %}
{% endif %}

{% assign pageTemp = pageSize | plus:2 %}
{% if paginator.page > pageTemp %}
<span class="page-numbers dots"></span>
{% endif %}

{% for count in (startPage..endPage) %}
{% if count == paginator.page %}
<span class="page-numbers current">{{ count }}</span>
{% else %}
<a class="page-numbers" href="/page{{ count }}">{{ count }}</a>
{% endif %}
{% endfor %}

{% assign pageTemp1 = pageSize | plus:1 %}
{% assign pageTemp = paginator.page | plus:pageTemp1 %}
{% if paginator.total_pages > pageTemp %}
<span class="page-numbers dots"></span>
{% endif %}

{% if paginator.page == paginator.total_pages %}
<span class="page-numbers current">{{paginator.total_pages}}</span>
{% else %}
<a class="page-numbers" href="/page{{paginator.total_pages}}/">{{paginator.total_pages}}</a>
{% endif %}

</div>

参考 CSS:

/*分页*/
.pagination {font-size: 14px;margin-top: 18px; text-align: center; }
.pagination .page-numbers{color:#111;display: inline-block;text-align: center;width: 24px;line-height:24px;margin:5px;background: #E4E5E1;}
.pagination .page-numbers.current{ background: #c30;color:#fff;}
.pagination .page-numbers.dots{border-color:rgba(0,0,0,0)}

效果如下图,修改 pageSize 值即可控制当前页前后输出的页码数。

详细参考:官方文档非官方中文(翻译不是很准确)

分类 & 标签功能

Jekyll 的分类和标签功能没有 WordPress 完善,凑合着用吧。

模板代码和样式参考自:谢益辉 & 天涯孤鸟

评论

必须得用第三方评论系统,这个是最大的硬伤,若不是,我可能彻底投奔 Jekyll 了。 国外的 Disqus 感觉更有节操,不过国内加载实在是太慢了。所以放弃了 Disqus + 多说 两种评论框一起用。

RSS

代码来自:jekyll-rss-feeds,只针对个人模板配置小改了一下——site.name 改为 site.title,需根据个人配置修改。

代码就不贴了,需要的可以到 Github 看源文件。

sitemap

对于 sitemap,WordPress 是安装插件解决的,Jekyll 好像也可以安装插件解决,比如:jekyll-sitemap,不过我是没有折腾成功。如果你愿意,也可以试试这个插件

不过我现在用的是免插件方法:Generating a Sitemap in Jekyll without a Plugin

SEO 优化

这个不大懂,目前只优化了一下网页 title,分页加上了"第 xx 页"字样。用下面的代码替换掉原始的 …… 之间的 title 代码即可。

    <title>
{% if page.title %}{{ page.title | strip_html }} &#8211; {% endif %}
{{ site.title | strip_html }}
{% if paginator.page > 1 %}
&#8211; 第 {{ paginator.page | strip_html }} 页
{% endif %}
{% if page.layout == 'default' %}&#8211; {{ site.description | strip_html }} {% endif %}
</title>

除非注明,垃圾站文章均为网络收集,本文地址 https://cyhour.com/189/,转载时烦请以链接形式注明原始出处。
声明:我们不销售主机,任何VPS主机均有跑路风险且需定期备份,防止数据丢失。信息以实际为准,评测仅供参考不代表权威!
🍄:Netflix 奈飞 YouTube 合租

升级新版 Google AdSense 代码提升广告效果

2021年7月19日,Google AdSense 最近发布了新版 AdSense 代码。通过新版 AdSense 代码,AdSense 可以更早触发优化功能,从而提升网站上广告效果。新广告代码适用于自动广告和广告单元。 如何获取 Google AdSense 新版代码? 无需采取任何措施。在下次登录 AdSense 后,您将拥有对新广告代码的访…

利用 Google Analytics 追踪 WordPress 站内搜索关键词

Google分析(Google Analytics)是一个由 Google 所提供的网站流量统计服务。Google 分析(Analytics)现在是互联网上使用最广泛的网络分析服务。 利用 Google Analytics 追踪 WordPress 站内搜索关键词 优化内容 如果网站/博客在 Google Analytics 流量统计,利用 Google Analytics 追踪 W…

Google Analytics 异步请求(服务端请求)

感谢伟大的祖国,使得好好的 Google,必须折腾一番才能好好的用起来。Google 搜索如此,Google Analytics 肯定也不例外(网上据说 Google Analytics 没有被屏蔽)。 Google Analytics 支持服务端发送统计信息(via:Jerry Qu),而通过服务端统计可以解决 Google Analytics 连接缓慢问题,提高页面…
浏览: 30 标签:  ,  , 

Gravatar 头像被墙及解决方案 Gravatar 头像国内镜像地址大全

Gravatar 头像真是一言难尽,时而正常时而抽风时而无法访问……就一个 Gravatar 头像,这有啥好强(现代通假字)的呢?(据说是被其它服务连累?) 解决办法 - 调用 ssl/cn 头像链接 历史解决办法:调用 ssl 头像链接——https还是没被墙的,而且速度还不错,直接调用这个最简单了。主题 functi…
浏览: 65 标签:  ,  ,  , 
浏览: 156 标签:  ,  ,  , 

Comments:4

  1. 个人觉得此类的静态博客完全属于一个玩具。

    2015.08.06 14:36 # 回复
    1楼
    • @寒烟 作为一个安心写文字的地方,Jekyll 还是挺不错的,基本功能与 WordPress 是一样的,只是资源没那么丰富。

      2015.08.06 15:45 # 回复
  2. 欢迎加入 hard 模式大家庭。

    2015.08.12 02:53 # 回复
    2楼

发表留言

Vultr 送$100,搬瓦工年付最低$49,优惠码 BWH3HYATVBJW,更多推荐VPS信息