基于emacs 在线博客系统优化(2)

我的博客

style

我把所有的辅助css，js文件全放到七牛云上，这样不会出现访问google卡死的问题了。

#+HTML_HEAD: 
#+HTML_HEAD: 
#+HTML_HEAD: 
#+HTML_HEAD: 
#+HTML_HEAD: 

有需要的朋友也可以直接用我的文件链接.

加入顶部的panel

在小屏上会出现一个顶部panel,如图

Paste_Image.png

滑动文本时,panel会始终出现在顶部.为了实现2个功能:

1. 点击panel, 左侧会出现table of Contents,便于跳转.
2. 点击panel右侧Back时, 会回到Home 文章列表页.

实现很简单:

#+HTML_HEAD: 
Table of Contents
Back

加入触摸划动

在触屏手机上,为了用户体验更好,我希望

toc.gif

• 左划可以划出Table of Contents
• 如果Table of Contents被划出, 右划可以隐藏它
• 如果Table of Contents没被划出, 则右划可以回到Home 文章列表页

我把实现的代码写在一个js文件中:

 1  document.addEventListener('touchstart', handleTouchStart, false);
 2  document.addEventListener('touchmove', handleTouchMove, false);
 3  var xDown = null;
 4  var yDown = null;
 5  
 6  function handleTouchStart(evt) {
 7    xDown = evt.touches[0].clientX;
 8    yDown = evt.touches[0].clientY;
 9  };
10  
11  function handleTouchMove(evt) {
12    if ( ! xDown || ! yDown ) {
13      return;
14    }
15  
16    var xUp = evt.touches[0].clientX;
17    var yUp = evt.touches[0].clientY;
18  
19    var xDiff = xDown - xUp;
20    var yDiff = yDown - yUp;
21  
22    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
23      if ( xDiff > 0 ) {
24        /* left swipe */
25        if(window.location.hash === "#table-of-contents") {
26          console.log('will dis');
27          window.history.back();
28        } else {
29          console.log('will back');
30          window.location.href = "/";
31        }
32      } else {
33        /* right swipe */
34        window.location.href = "#table-of-contents";
35      }
36    } else {
37      if ( yDiff > 0 ) {
38        /* up swipe */
39      } else {
40        /* down swipe */
41      }
42    }
43    /* reset values */
44    xDown = null;
45    yDown = null;
46  };

然后去setup文件中加一行

#+HTML_HEAD: 

存在的问题:(待解决)

1. 文章中的代码块一般会比网页宽,需要左右滑动来看,这个时候会触发滑动事件,引起相应的切换,要想办法去掉.

加入文章访问数量

Paste_Image.png

使用网站 提供的服务，先去生成一段html代码，再在每个新文章的title下插一段html代码例如本文的

加入多说评论系统

使用多说 提供的服务。效果大概如下

Paste_Image.png

1. 注册帐号，把源码的js文件抽出来放到一个文件中

   1  var duoshuoQuery = {short_name:"linchen2chris"};
   2  (function() {
   3  var ds = document.createElement('script');
   4  ds.type = 'text/javascript';ds.async = true;
   5  ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
   6  ds.charset = 'UTF-8';
   7  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds);
   8  })();
   

2. 把js放到SETUP文件中，

3. 在每篇文章最后加一段html代码
   把xx换成文章的名字和路经。

加入自动发布系统

使用org-publish来自动发布

1  (setq org-publish-project-alist
2        '(("blog"
3           :base-directory "~/Documents/Blog/"
4           :recursive t
5           :base-extension "org"
6           :publishing-directory "~/Documents/Blog/"
7           :publishing-function org-html-publish-to-html
8           :with-toc 1
9           )))

未来计划

加入Table of Contents划出时的动画

这样会更好看.最好能让Table of Contents跟随滑出时的手指的位置.

把code区域disable 滑动区域.（DONE）

加了一句:

if (!xDown || !yDown || /^src src-*/.test(evt.target.className)) {
   return;
}

优化my-org-screenshot 图片可以直接上传到七牛,加速图片加载.

做个类似my-org-screenshot的实现一键录gif上传七牛. :)