forked from guidao/guidao.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathemacs_blog.html
271 lines (253 loc) · 12.4 KB
/
emacs_blog.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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- 2016-08-23 二 17:40 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>使用org-mode写blog</title>
<meta name="generator" content="Org-mode" />
<style type="text/css">
<!--/*--><![CDATA[/*><!--*/
.title { text-align: center;
margin-bottom: .2em; }
.subtitle { text-align: center;
font-size: medium;
font-weight: bold;
margin-top:0; }
.todo { font-family: monospace; color: red; }
.done { font-family: monospace; color: green; }
.priority { font-family: monospace; color: orange; }
.tag { background-color: #eee; font-family: monospace;
padding: 2px; font-size: 80%; font-weight: normal; }
.timestamp { color: #bebebe; }
.timestamp-kwd { color: #5f9ea0; }
.org-right { margin-left: auto; margin-right: 0px; text-align: right; }
.org-left { margin-left: 0px; margin-right: auto; text-align: left; }
.org-center { margin-left: auto; margin-right: auto; text-align: center; }
.underline { text-decoration: underline; }
#postamble p, #preamble p { font-size: 90%; margin: .2em; }
p.verse { margin-left: 3%; }
pre {
border: 1px solid #ccc;
box-shadow: 3px 3px 3px #eee;
padding: 8pt;
font-family: monospace;
overflow: auto;
margin: 1.2em;
}
pre.src {
position: relative;
overflow: visible;
padding-top: 1.2em;
}
pre.src:before {
display: none;
position: absolute;
background-color: white;
top: -10px;
right: 10px;
padding: 3px;
border: 1px solid black;
}
pre.src:hover:before { display: inline;}
pre.src-sh:before { content: 'sh'; }
pre.src-bash:before { content: 'sh'; }
pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
pre.src-R:before { content: 'R'; }
pre.src-perl:before { content: 'Perl'; }
pre.src-java:before { content: 'Java'; }
pre.src-sql:before { content: 'SQL'; }
table { border-collapse:collapse; }
caption.t-above { caption-side: top; }
caption.t-bottom { caption-side: bottom; }
td, th { vertical-align:top; }
th.org-right { text-align: center; }
th.org-left { text-align: center; }
th.org-center { text-align: center; }
td.org-right { text-align: right; }
td.org-left { text-align: left; }
td.org-center { text-align: center; }
dt { font-weight: bold; }
.footpara { display: inline; }
.footdef { margin-bottom: 1em; }
.figure { padding: 1em; }
.figure p { text-align: center; }
.inlinetask {
padding: 10px;
border: 2px solid gray;
margin: 10px;
background: #ffffcc;
}
#org-div-home-and-up
{ text-align: right; font-size: 70%; white-space: nowrap; }
textarea { overflow-x: auto; }
.linenr { font-size: smaller }
.code-highlighted { background-color: #ffff00; }
.org-info-js_info-navigation { border-style: none; }
#org-info-js_console-label
{ font-size: 10px; font-weight: bold; white-space: nowrap; }
.org-info-js_search-highlight
{ background-color: #ffff00; color: #000000; font-weight: bold; }
/*]]>*/-->
</style>
<link rel="stylesheet" type="text/css" href="./css/org-css.css"/>
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
JavaScript code in this tag.
Copyright (C) 2012-2013 Free Software Foundation, Inc.
The JavaScript code in this tag is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this tag.
*/
<!--/*--><![CDATA[/*><!--*/
function CodeHighlightOn(elem, id)
{
var target = document.getElementById(id);
if(null != target) {
elem.cacheClassElem = elem.className;
elem.cacheClassTarget = target.className;
target.className = "code-highlighted";
elem.className = "code-highlighted";
}
}
function CodeHighlightOff(elem, id)
{
var target = document.getElementById(id);
if(elem.cacheClassElem)
elem.className = elem.cacheClassElem;
if(elem.cacheClassTarget)
target.className = elem.cacheClassTarget;
}
/*]]>*///-->
</script>
</head>
<body>
<div id="org-div-home-and-up">
<a accesskey="h" href="index.html"> UP </a>
|
<a accesskey="H" href="index.html"> HOME </a>
</div><div id="content">
<h1 class="title">使用org-mode写blog</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgheadline1">1. 介绍org-mode</a></li>
<li><a href="#orgheadline2">2. markdown的写作模式</a></li>
<li><a href="#orgheadline3">3. 配置orgmode</a></li>
<li><a href="#orgheadline4">4. 参考资料</a></li>
</ul>
</div>
</div>
<div id="outline-container-orgheadline1" class="outline-2">
<h2 id="orgheadline1"><span class="section-number-2">1</span> 介绍org-mode</h2>
<div class="outline-text-2" id="text-1">
<p>
orgmode是emacs的一个插件，对于写作有非常好的体验。而且非常强大，实时渲染，日程管理，支持导出pdf，html等多种格式，日期，TODO，表格等操作十分方便，只有你想不到，没有做不到,HAHA。
</p>
</div>
</div>
<div id="outline-container-orgheadline2" class="outline-2">
<h2 id="orgheadline2"><span class="section-number-2">2</span> markdown的写作模式</h2>
<div class="outline-text-2" id="text-2">
<p>
以前也使用过markdown的方式写过blog，开始的时候觉得很新鲜，但是对于体验来说并不能让我很专心的写作。很多markdown工具实时渲染需要新开一个标签。我需要一边写文字一边照顾样式，而且写作窗口不能占据我所有的视野，很是别扭。直到我遇到emacs，从而遇到orgmode，才真正的觉得写作是一件比较舒服的事情。
</p>
</div>
</div>
<div id="outline-container-orgheadline3" class="outline-2">
<h2 id="orgheadline3"><span class="section-number-2">3</span> 配置orgmode</h2>
<div class="outline-text-2" id="text-3">
<p>
要使用orgmode写blog，还是需要一定的符合个人的配置，也需要css对导出的html进行一些美化, 下面是我配置的地方.(我使用的是spacemacs)
</p>
<ol class="org-ol">
<li>开启org layer</li>
</ol>
<p>
在spacemacs中使用orgmode需要在spacemacs的配置文件中开启org layer
</p>
<div class="org-src-container">
<pre class="src src-elisp">dotspacemacs-configuration-layers '<span style="color: #AE81FF;">(</span>org<span style="color: #AE81FF;">)</span>
</pre>
</div>
<ol class="org-ol">
<li>设置org-publish-project-alist</li>
</ol>
<div class="org-src-container">
<pre class="src src-elisp"><span style="color: #AE81FF;">(</span><span style="color: #F92672;">setq</span> org-publish-project-alist
'<span style="color: #66D9EF;">(</span>
<span style="color: #75715E;">;; </span><span style="color: #75715E;">... add all the components here (see below)...</span>
<span style="color: #A6E22E;">(</span><span style="color: #E6DB74;">"org-notes"</span>
<span style="color: #F92672;">:base-directory</span> <span style="color: #E6DB74;">"~/guidao.github.io/org/"</span> <span style="color: #75715E;">;</span><span style="color: #75715E;">org文件的目录</span>
<span style="color: #F92672;">:base-extension</span> <span style="color: #E6DB74;">"org"</span> <span style="color: #75715E;">;</span><span style="color: #75715E;">扩展名</span>
<span style="color: #F92672;">:publishing-directory</span> <span style="color: #E6DB74;">"~/guidao.github.io/"</span> <span style="color: #75715E;">;</span><span style="color: #75715E;">导出目录</span>
<span style="color: #F92672;">:html-head</span> <span style="color: #E6DB74;">"<link rel=\"stylesheet\" type=\"text/css\" href=\"./css/org-css.css\"/>"</span><span style="color: #75715E;">;</span><span style="color: #75715E;">自定义样式</span>
<span style="color: #F92672;">:recursive</span> t
<span style="color: #F92672;">:publishing-function</span> org-html-publish-to-html
<span style="color: #F92672;">:headline-levels</span> <span style="color: #AE81FF;">4</span> <span style="color: #75715E;">; </span><span style="color: #75715E;">Just the default for this project.</span>
<span style="color: #F92672;">:auto-preamble</span> t
<span style="color: #F92672;">:timestamp</span> nil
<span style="color: #F92672;">:author</span> nil
<span style="color: #A6E22E;">)</span>
<span style="color: #A6E22E;">(</span><span style="color: #E6DB74;">"org"</span> <span style="color: #F92672;">:components</span> <span style="color: #E6DB74;">(</span><span style="color: #E6DB74;">"org-notes"</span><span style="color: #E6DB74;">)</span><span style="color: #A6E22E;">)</span>
<span style="color: #66D9EF;">)</span><span style="color: #AE81FF;">)</span>
<span style="color: #AE81FF;">(</span><span style="color: #F92672;">setq</span> org-html-validation-link nil<span style="color: #AE81FF;">)</span> <span style="color: #75715E;">; </span><span style="color: #75715E;">去掉validation显示</span>
<span style="color: #AE81FF;">(</span><span style="color: #F92672;">setq</span> org-html-link-home <span style="color: #E6DB74;">"index.html"</span><span style="color: #AE81FF;">)</span><span style="color: #75715E;">; </span><span style="color: #75715E;">设置home超链接</span>
<span style="color: #AE81FF;">(</span><span style="color: #F92672;">setq</span> org-html-link-up <span style="color: #E6DB74;">"index.html"</span><span style="color: #AE81FF;">)</span>
</pre>
</div>
<p>
我是把guidao.github.io/org/目录的文件导出到guidao.github.io/下,在guidao.github.io下会有org文件的同名的html格式的文件，之所以我把org也放在github上，是因为我工作跟家里使用两台不同的电脑，需要在两个地方进行修改。
</p>
<p>
现在可以执行命令 <code>M-x org-publish</code> 选择org导出文件了。但是blog一般来说需要一个首页对所有文件进行汇总。目前这个功能是手动进行.在org目录想创建一个index.org文件，贴上下面内容:
</p>
<div class="org-src-container">
<pre class="src src-org"><span style="color: #75715E;">#+OPTIONS: TOC:nil ;关闭目录</span>
<span style="color: #75715E;">#+OPTIONS: NUM:nil ;关闭标题前面的数字</span>
<span style="color: #75715E;">#+OPTIONS: AUTHOR:nil ;不显示作者</span>
<span style="color: #75715E;">#+OPTIONS: TIMESTAMP:nil ;不显示创建时间</span>
* 2016年8月
- <span style="color: #66D9EF; text-decoration: underline;"><a href="file:xxx.org">xxx</a></span>
</pre>
</div>
<p>
然后就可以看见跟我一样的首页了。
</p>
</div>
</div>
<div id="outline-container-orgheadline4" class="outline-2">
<h2 id="orgheadline4"><span class="section-number-2">4</span> 参考资料</h2>
<div class="outline-text-2" id="text-4">
<ul class="org-ul">
<li><a href="http://dayigu.github.io/WhyUseOrgModeToWriteBlog.html">http://dayigu.github.io/WhyUseOrgModeToWriteBlog.html</a></li>
<li><a href="http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html">http://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html</a></li>
<li><a href="http://wiki.houye.xyz/blogwithorg-mode.html">http://wiki.houye.xyz/blogwithorg-mode.html</a></li>
</ul>
<p>
有兴趣的可以一起交流交流
</p>
</div>
</div>
</div>
<div id="postamble" class="status">
<p class="date">Created: 2016-08-23 二 17:40</p>
<p class="validation"></p>
</div>
</body>
</html>