| Comments

Octopress安装和使用

安装和使用Octopress的一些注意事项，详细的内容可以参考网址。

1. 安装

请参考官网，其他的博客介绍的安装已经失效或者错误。 常用命令:

1
2

# 预览，可自动更新。使用Ctrl+c终止。
$ rake preview

2. Ruby版本调整

Octopress推荐使用RVM安装Ruby 2.2.10版本。在安转过程中可能会出现"gpg: Can't check signature: public key not found"的错误提示，需要执行一下类似命名，添加公用匙。

1

$ gpg2 --keyserver hkp://keys.gnupg.net --recv-keys D39DC0E3

使用以下操作设定ruby版本：

1
2

$ source ~/.rvm/scripts/rvm
$ rvm use ruby-2.2.10

3. 预览错误

如果在预览博文时出现TCPServer Error: Address already in use - bind(2)的错误，表示端口（Octopress默认4000）被占，解决办法:

1
2
3

# 获取占据4000端口程序的PID
$ lsof -wni tcp:4000
$ kill -9 PID

4. 更新博文

博文放置在source/_posts目录下。

1
2
3
4
5
6
7
8
9

$ rake new_post["new post"]
$ git add .
$ git commit -m "my comment"
$ git push origin source
$ rake generate
$ rake deploy

# 或者generate和deploy一步执行
$ rake gen_deploy

如果需要在首页显示部分博文，在需要隔断的地方（博文markdown文件）加入：

1

<!--more-->

5. 使用主题

当前博客使用的是octostrap主题。

6. 修改标签图标记

可以使用在线转换工具，将png格式图片转换为ico格式（比如32*32），例如文件favicon.ico。之后，将favicon.ico移动到source/目录下。之后修改文件source/_includes/head.html，找到favicon.png将其改为favicon.ico。

7. 404公益

在source文件夹下添加404.markdown文件，之后写入

1
2
3
4
5
6
7
8
9
10

---
layout: page
title: "404 Error"
date: 2014-07-22
comments: false
sharing: false
footer: false
---

<script type="text/javascript" src="http://www.qq.com/404/search_children.js?edition=small" charset="utf-8"></script>

8. 私密博文

Octopress提供了隐藏博文的功能，即使文章已经推送到了github，也可以不在博客主页显示。具体方法是在每篇markdown文件头部添加：

1

published: false

如果需要公开发表，将其删除或者改为：

1

published: true

9. 代码高亮设置

安装coderay和kramdown

1
2

$ gem install coderay
$ gem install kramdown

在_config.yml文件中写入：

1
2
3
4
5
6

markdown: kramdown
kramdown:
  use_coderay: true
  coderay:
    coderay_line_numbers: table
    coderay_css: class

10. Kramdown语法小技巧##

  • 代码高亮

代码段高亮参考Octopress codeblock，其中[lang:language]设置高亮语言种类。[url]和[linktext]非必须。

1
2
3

{% codeblock [lang:language] [title] [url] [link text] %}
code snippet
{% endcodeblock %}

行内引用代码使用 `source/_includes/custom/head.html`{:.language-bash}

  • 四个空格或者一个Tab可以生成一个文本块

11. 链接在新的选择卡中打开##

在source/_includes/custom/head.html的末尾添加：

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

<!-- link open with new tab  -->
<script>
  function addBlankTargetForLinks () {
  $('a[href^="http"]').each(function(){
  $(this).attr('target', '_blank');
  });
  }

  $(document).bind('DOMNodeInserted', function(event) {
  addBlankTargetForLinks();
  });
</script>

12. 修改分页数

修改_config.yml文件

1
2
3
4
5

# 每页最多展示的博文数目
paginate: 5

# 分页后博文地址
paginate_path: "posts/:num"

13. 添加图片

将需要添加的图片移动到目录source/images/，之后在正文中添加：

1
2
3
4
5

<img class="[class names]" src="/path/to/image" title="[width] [height] [title text [alt text]]" >

# 例子
<img class="left" src="/images/testimg.png" width="350" height="350" title="image" alt="images">
<img class="right" src="http://placekitten.com/300/500" width="150" height="250" title="Place Kitten #3" >

14. 添加新页面

首先，添加新的页面：

1

rake new_page[ANewPage]

这会生成一个新的文件source/anewpage/index.markdown。之后，修改source/_includes/custom/navigation.html文件，根据自己主题，添加如下类似内容

1
2
3

<li {% if page.navbar == 'ANewPage' %}class="active"{% endif %}>
  <a href="{{ root_url }}/anewpage">ANewPage</a>
</li>

15. 添加表格

建立新文件source/stylesheets/data-table.css，写入以下内容，其中#00B9E3是表头的背景颜色，可以更改为自己喜欢的颜色：

data-table 
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

* + table {
  border-style:solid;
  border-width:1px;
  border-color:#e7e3e7;
}

* + table th, * + table td {
  border-style:dashed;
  border-width:1px;
  border-color:#e7e3e7;
  padding-left: 3px;
  padding-right: 3px;
}

* + table th {
  border-style:solid;
  font-weight:bold;
  background: url("/images/noise.png?1330434582") repeat scroll left top #00B9E3;
}

* + table th[align="left"], * + table td[align="left"] {
  text-align:left;
}

* + table th[align="right"], * + table td[align="right"] {
  text-align:right;
}

* + table th[align="center"], * + table td[align="center"] {
  text-align:center;
}

之后，在source/_includes/head.html中修改或者添加：

1
2
3
4
5


<link href="{{ root_url }}/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
{% if page.styles contains 'data-table' %}
<link href="{{ root_url }}/stylesheets/data-table.css" media="screen, projection" rel="stylesheet" type="text/css" />
{% endif %}

使用方法，在每篇博客头部位置添加styles: [data-table]，之后使用表格样式即可。如果使用Kramdown，表格对其方法如下：

X/Y 1(Presence) 0(Absence) Sum
1(Presence) a b a+b
0(Absence) c d c+d
Sum a+c b+d n=a+b+c+d 
1
2
3
4
5
6
7
8
9

|---------------|---------------|--------------|---------|
|**X/Y**        |**1(Presence)**|**0(Absence)**|**Sum**  |
|:--------------|:-------------:|:------------:|--------:|
|**1(Presence)**|a              |b             |a+b      |
|---------------|---------------|--------------|---------|
|**0(Absence)** |c              |d             |c+d      |
|---------------|---------------|--------------|---------|
|**Sum**        |a+c            |b+d           |n=a+b+c+d|
|---------------|---------------|--------------|---------|

如果使用Emacs，可以使用Emacs的org模式快速建立和编辑表格。

16. 设置MathJax

在source/_includes/custom/head.html设置：

Setting MathJax for https 
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
32
33
34

<!-- mathjax config similar to math.stackexchange -->
<script type="text/x-mathjax-config">
 MathJax.Hub.Config({
     tex2jax: {
         inlineMath: [ ['$','$'], ["\\(","\\)"] ],
         processEscapes: true,
         extensions: ["color.js"]
     }
 });
</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>

<!-- latest mathjax -->
<script type="text/javascript" async
        src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
</script>

<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/ ; script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/ 'unsafe-eval';style-src 'self' 'unsafe-inline'; font-src 'self'; img-src 'self';">

17. 重新克隆github上的博文和设置

Re-set Octopress on local computer 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 注意切换到指定ruby版本
# 克隆source分支到本地，注意替换“YulongNiu”为自己的GitHub名称
$ git clone -b source git@github.com:YulongNiu/YulongNiu.github.io.git octopress

# 安装bundle
$ cd octopress
$ gem install bundler
$ bundle update
$ bundle install

# 克隆master分支到_deploy文件夹
$ mkdir _deploy
$ cd _deploy
$ git init
$ git remote add origin git@github.com:YulongNiu/YulongNiu.github.io.git
$ git pull origin master
$ cd ..
$ rake gen_deploy

18. 多台电脑共同编写博客

Writing Octopress on more than one computer 
1
2
3
4
5

# 设定好Octopress，假定Octopress目录为octopress
$ cd octopress
$ git pull origin source
$ cd ./_deploy
$ git pull origin master

参考资料

更新记录

2018年10月21日

Comments