滴水穿石

海纳百川，有容乃大；壁立千仞，无欲则刚

Mathjax载入过慢，每个page设定是否加载Mathjax

前面文章中讲过如何在octopress中配置latex，但加入latex支持后打开网页的速度明显变慢，主要原因是国内MathJax的服务器经常被墙，导致加载每个page的速度非常慢。 针对上述问题，主要解决方法是每个post设定是否加载MathJax,这样就会使得博客主页以及不需要加载MathJax的页面加载速度变快。下面介绍如何进行修改： 在需要加载MathJax的post中加入latex: true，如果不需要加载，就直接不用添加，如下所示

1
2
3
4
5
6

layout: post
title: "Octopress Latex"
date: 2012-07-20 23:49
comments: true
latex: true
categories: [ octopress, linux, latex ]

修改主题，.themes/<使用的主题名>/source/_includes/head.html,在最后面加入“

字符串循环移位

问题描述

将一个n元一维向量向左循环移位k个位置。例如，n=9，k=3， 向量abcdefghi就变成了defghiabc，在考虑到节省内存的情况下，如何在O(n)的复杂度下对向量进行移位。

方法一

移动c = x[0], x[0] = x[k], x[k] = x[2*k], ...依次类推，直到返回到x[0]，改为从c取值。

Octopress Latex

首先安装kramdown包

1

gem install kramdown

再把下面的代码添加到.theme/<使用的主题名>/source/_includes/custom/head.html文件中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- mathjax config similar to math.stackexchange -->

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    }
  });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      }
    });
</script>

<script type="text/x-mathjax-config">
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for(i=0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>

<script type="text/javascript"
   src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

修改_config.yml

1

markdown: kramdown  #rdiscount

Attentation

使用kramdown时，对markdown的语法比rdiscount更加严格，例如```lang之前必须空行 以##为标题的之后不能有空行

右键点击页面消失

fix for right-click
1
2
3
4
5
6
7
8
9
10
11
12
13

diff --git a/sass/base/_theme.scss b/sass/base/_theme.scss
index 9a50a8b..fc9dc37 100644
--- a/sass/base/_theme.scss
+++ b/sass/base/_theme.scss
@@ -75,7 +75,7 @@ html {
   background: $page-bg image-url('line-tile.png') top left;
 }
 body {
-  > div {
+  > div#main {
     background: $sidebar-bg $noise-bg;
     border-bottom: 1px solid $page-border-bottom;
     > div {

样例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$$
\begin{align*}
  & \phi(x,y) = \phi \left(\sum_{i=1}^n x_ie_i, \sum_{j=1}^n y_je_j \right)
  = \sum_{i=1}^n \sum_{j=1}^n x_i y_j \phi(e_i, e_j) = \\
  & (x_1, \ldots, x_n) \left( \begin{array}{ccc}
      \phi(e_1, e_1) & \cdots & \phi(e_1, e_n) \\
      \vdots & \ddots & \vdots \\
      \phi(e_n, e_1) & \cdots & \phi(e_n, e_n)
    \end{array} \right)
  \left( \begin{array}{c}
      y_1 \\
      \vdots \\
      y_n
    \end{array} \right)
\end{align*}
$$

就会得到

1

段内插入公式：$\exp(-\frac{x^2}{2})$

段内插入公式：$\exp(-\frac{x^2}{2})$

Octopress 增加Navibar

首先用rake来增加一个需要增加的页面，例如:

1

rake new_page[About]

这是会在source/目录先生产about目录以及index.markdown，如果这样直接generate，是不会把about页面增加到navibar中的，需要在navigation.html中进行设置，如果直接在/source/_includes/custom/navigation.html中修改，那么在切换主题时，改修改是不会保存的，需要再次修改，所以最好的方法是在主题文件中修改

1

.theme/classic/source/_includes/custom/navigation.html

修改成

navigation.html
1
2
3
4
5

<ul class="main-navigation">
  <li><a href="/">Blog</a></li>
  <li><a href="/blog/archives">Archives</a></li>
  <li><a href="/about">About</a></li>
</ul>

然后重新安装主题，

1
2
3

rake install['theme name']
rake generate
rake deploy

Octopress 新浪微博侧边栏

首先到微博秀获取需要嵌入的code，例如

1
2
3
4
5
6
7
8
9
10
11
12

<iframe
	width="100%"
	height="550"
	class="share_self"
	frameborder="0"
	scrolling="no"
	src="http://widget.weibo.com/weiboshow/index.php?
        language=&width=0&height=550&
        fansRow=2&ptype=1&speed=0&
        skin=1&isTitle=1&noborder=1&
	isWeibo=1&isFans=1&uid=000000&verifier=00000&dpc=1">
</iframe>

其实就是各种参数，最后写成一个weibo.html,放到.theme/<所用的主题名>/source/_includes/asides，

此外，还需要修改_config.yml

_config.yml
1
2
3
4
5
6
7
8

# 在 default_asides中添加asides/weibo.thml
default_asides: [asides/recent_posts.html, asides/weibo.html, asides/github.html, asides/Twitter.html, asides/googleplus.html]
weibo_uid: # 通过微博秀中获得
weibo_verifier: #微博秀中获得
weibo_fansline: 0   # 粉丝显示多少行
weibo_show: true    # 是否显示最近微博内容
weibo_pic: true     # 是否显示微博中的图片
weibo_skin: 10      # 使用哪种配色风格，数字为从1开始的微博秀风格序号

weibo_uid和weibo_verifier从微博秀中的代码中得到

程序员语录

设计者确定其设计已经达到了完美的标准不是不能再增加任何东西，而是不能再减少任何东西。—–Anotine de Saint-Exupery 法国作家兼飞机设计师

Octopress 配置

安装rvm,用rvm来安装 Ruby 1.9.2

1

yum install rvm

安装 Ruby 1.9.2

1

rvm install 1.9.2 && rvm use 1.9.2

安装 Octopress

1
2

git clone git://github.com/imathis/octopress.git octopress
cd octopress

安装 bundler

1
2

gem install bundler
bundle install

如果在安装 bundler 出现以下错误

1
2
3
4

ERROR:  Loading command: install (LoadError)
    cannot load such file -- zlib
ERROR:  While executing gem ... (NameError)
    uninitialized constant Gem::Commands::InstallCommand

这是由于缺少zlib openssl 库的支持,安装zlib和openssl

1
2
3
4
5
6
7
8

cd /usr/local/rvm/src/ruby-1.9.2-p320/ext/zlib
ruby ./extconf.rb
make
make install
cd /usr/local/rvm/src/ruby-1.9.2-p320/ext/openssl
ruby ./extconf.rb
make
make install

安装默认主题

1

rake install

部署

1
2
3
4
5
6
7
8

git clone git@github.com:yourname/project.git
cd project
rake setup_github_pages
rake generate
rake deploy
git add .
git commit -am "   "
git push git@github.com:yourname/project.git HEAD:source

配置comments和社交网络工具

  • 在_config.yml中增加一项: weibo_share: true
  • 修改source/_includes/post/sharing.html，增加
1
2
3

{%  if site.weibo_share %}
	{% include post/weibo.html %}
{% endif %}