安装和使用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文件)加入:
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文件头部添加:
如果需要公开发表,将其删除或者改为:
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}
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日