关于用Jekyll建站的一些补充(I)

教大家如何设置留言板,添加文章分享,设置rss,邮箱图标以及开通域名邮箱

Posted by BH on March 23, 2018

关于用Jekyll建站的一些补充(I)

最近几天一直在给站点添加各种新功能,在这里给大家分享一些BY的教程中没有提到过的。如果你想从头开始学习,建议还是先去BY在简书上的教程学习用Jekyll在Github Pages上免费建站。

当然了这里的免费是指建站免费,如果你想拥有一个属于自己的域名的话可以去GoDaddy或者阿里云购买。要注意的是如果用阿里云的话需要有实名认证,所以你如果在国外身份证又不在身边,或者恰巧过期的话那还是果断选择godaddy吧。国内的同学还是选阿里云比较方便,虽然要实名认证但过程还是很方便的。前两天一早起来发现站点怎么也链接不上,本来以为是dns设置里面ip地址过期了,结果折腾了半天发现是没有实名认证😂😂😂

好了,接下来是我给自己网站上添加的新功能或者是对BY教程的一些额外补充。

留言板

Disqus

Disqus其实在BY的教程中已经讨论过,只不过我在实际应用中Disqus并没有显示出来。经过一番研究我发现_config.yml里面的disqus_username填的并不是username而是shortname。这里要注意username并不一定是shortname,首先你要去Disqus的admin页面添加你的站点。添加完成后就可以在这个页面找到你的shortname了。把这个shortname填进刚才说的disqus_username里面应该就可以了。

LiveRe(来必力)

在BY的教程中有提高过Gitalk,我实践了一下感觉不是很好用,毕竟这个Gitalk的本来目的是给广大程序猿交流的,每篇文章等于要重新添加一个issue,看着挺麻烦,对我这种非程序猿来说也并不太适用。既然Disqus国内访问不了,我就决定采用双留言板模式,以Disqus为主,LiveRe(来必力)为辅。选来必力的原因是他家覆盖了几乎全部中外社交网站,比如微信,微博等(前提是你要用他家的中文页面登录,一开始我用了英文页面也只显示了facebook,twitter等登录方式)。 登录进去以后一开始会问你选择一个版本安装,City版是免费的,Premium版是收费的。那我们自然选择City版安装了。最后就可以看到代码了。在代码管理里面直接复制粘贴一般网站下的代码到_layouts文件夹下的post.html里就可以了。如果你也想用双评论系统的话那就把这段代码粘贴到disqus那段代码的下面。

文章分享到社交网络

3月26日更新:

如果大家通过这篇文章实现https小绿标的话可能会发现这段百度分享上面的代码不work了,原因很可能是因为百度分享的这个网址竟然不是https。后来我网上有找了一些能实现类似功能的网站,发现这些国内网站几乎都不带https,由此可见安全性能令人堪忧啊。后来放狗搜了国外网站,搜索结果第一个是这家叫AddToAny的网站,带着可爱的小绿标,里面也支持微博和微信,代码导出方法和百度分享类似,把这段代码同意复制到_layouts文件夹下的post.html里就可以了。几分钟后再刷新页面这些分享按钮就又出现啦~当然如果您的网站不带小绿标百度分享还是可以用哒。

一般网页上的文章通常看完以后有一些各大社交网站的logo,点一下进去就可以把这篇文章分享给大家。实现这个功能很容易,在这里为了图方便我直接用了百度分享。第一步是代码功能选择,一共有三个选项:页面分享功能,图片分享功能和划词分享功能。大家按照自己的喜好选就好,我这里就选了页面分享功能,然后点击:下一步 页面按钮设置。在这里大家选好自己喜欢的样式,然后在调整按钮顺序里面把那些平时自己常用的社交网站选出来即可。最后点”直接复制代码“,同意把这段代码复制粘贴到_layouts文件夹下的post.html里就可以了。大家想一下应该贴在什么位置?没错,应该是在disqus和LiveRe代码的上面。

RSS

首先在根文件夹下看一下有没有feed.xml,如果没有的话就新建一个,输入代码见链接:feed.xml

然后在_layouts文件夹下的page.html下插入下面代码。里面你可以看到一系列社交网站的设置,你插入的顺序就决定了页面中图标的显示顺序。


<li>
<a href="/feed.xml" title="RSS订阅我的博客">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-rss fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

记得在_includes文件夹下的footer.html下加入同样代码,这样在尾页和侧边栏就会显示相同的图标。

最后别忘了在_config.yml里把rss的指改为true。

# SNS settings
rss: true

如果成功的话你应该在你的域名/feed.xml里看到rss的系统显示了。rss订阅我用的是Feedly,在里面直接输入你的域名/feed.xml就算是订阅成功。阅读工具我用的是Reeder,在ios和mac里都有应用,界面美观而且非常好用。

邮箱

与rss一样,邮箱的设置大致也是在page.htmlfooter.html在各种社交分享区域下插入如下代码,插入顺序也决定了那些图标的顺序。


<li>
<a href="mailto:[email protected]" title="Email me">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>

_config.yml里# SNS settings区域也加入你的邮箱地址:

# SNS settings
email: "你的邮箱地址"

这样完成后你的社交图标就多了两个很实用的功能,rss和email。rss可以让大家很方便地订阅你的博客,email的图标一点就可以直接弹出邮件应用写邮件,不用再复制粘贴你的邮箱地址了。

域名邮箱创建

有了域名后还可以为自己创建属于自己的域名邮箱,比如我这里的[email protected],设置起来很方便。首先你要选择一个邮箱服务商,国内国外有很多。这里我选择了腾讯企业邮箱的免费版,主要是因为可以绑定微信,这样来邮件直接就可以在微信里看到,不用自己额外在邮件应用里单独设置这个邮箱,毕竟这个邮箱大家平时也不会经常用到。

首先进腾讯企业邮箱立即开通免费版,然后根据页面的提示做就行了。设置完成后需要去你的域名服务商添加两条解析,如下所示,当然我记得腾讯里面会有提到。

完了以后选择“添加成员”在如下页面设置账号,密码等就好了。最后登录进邮箱以后可以选择绑定微信,这样以后收发邮件都可以在微信里面完成了。是不是很方便呢?

好了,先说到这里,下次继续咯~

如果您有什么疑问或者文章哪里有问题的话请及时提出,当然了如果这篇文章对您有帮助,欢迎打赏Binpedia!谢谢大家🙏🙏🙏