我想成为聪明的人,所以我在学习。
前言
在搭建好博客之后,又给自己增加的评论模块,还建了一个我自己比较喜欢关于页面,简单地介绍了下自己。
参考
写作环境
- 使用Macbook,我一般是使用Mou写,实时预览功能很好用,
Help -> Mou Help
打开语法提示 - 在Windows下,我直接在简书上写,也有实时预览效果,而且会实时保存,需要联网
Markdown
- Markdown上手还是很快的,使用简便,语法简单Markdown语法介绍,写一篇练手文章就差不多能掌握了
文字发布
- 文章标题遵守
YYYY-MM-DD-文章标题.markdown
格式,.md
结尾也是可以的 - 文字顶部加入:
<pre>
<code>---</code>
title: 这个是标题
date: 2016-04-16 11:11:11.000000000 +09:00
tags: Jekyll
author: xx
layout: post
<code>---</code>
</pre> - 按照上面指定格式保存好文章之后,放进
_posts
文件夹里 - 执行
$ bundler exec jekyll serve
后就能在博客里看到自己的文字了
增加评论模块
- 打开
_config.yml
编辑:
# Comment
comment:
duoshuo: 约定的Name
- 在多说注册好帐号,注册好之后
点击右上角 用户名->工具->获取代码->复制代码
- 打开
_includes
文件夹,编辑comments.html
文件,输入复制代码,例如:
# 如果自动生成了duoshuo相关代码 则不需要添加
<section class="post-comments">
{% if site.comment.disqus %}
<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = "{{ page.url | prepend: site.baseurl | prepend: site.url }}";
this.page.identifier = "{{ page.url }}";
};
var disqus_shortname = '{{ site.comment.disqus }}';
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//' + disqus_shortname + '.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>要查看<a href="http://disqus.com/?ref_noscript"> Disqus </a>评论,请启用 JavaScript</noscript>
{% elsif site.comment.duoshuo %}
<div class="ds-thread" data-thread-key="{{ page.url }}" data-title="{{ page.title }}" data-url="{{ page.url | prepend: site.baseurl | prepend: site.url }}"></div>
<script type="text/javascript">
var duoshuoQuery = {short_name:"{{ site.comment.duoshuo }}"};
(function() {
var ds = document.createElement('script');
ds.type = 'text/javascript';ds.async = true;
ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
ds.charset = 'UTF-8';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
})();
</script>
{% endif %}
- 重新打开文章详情页,底部就出现评论模块啦!
结语
在修改关于我页面UI的时候,因为不懂CSS,花费了大量时间去找对应的参数,不放弃不将就,最终全部修改成自己希望看到的样子。