-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathShell-Script-Jekyll-Markdown-Generator.html
More file actions
349 lines (272 loc) · 18.2 KB
/
Shell-Script-Jekyll-Markdown-Generator.html
File metadata and controls
349 lines (272 loc) · 18.2 KB
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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html>
<head>
<!-- [[! Document Settings ]] -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- [[! Page Meta ]] -->
<title>Shell Script : Jekyll Markdown Generator</title>
<meta name="description" content="Make Today Better Than Yesterday - Code, Food, Photo and some Geek stuff ..." />
<meta name="HandheldFriendly" content="True" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="/assets/images/favicon.ico" >
<!-- [[! Styles'n'Scripts ]] -->
<link rel="stylesheet" type="text/css" href="/assets/css/screen.css" />
<link rel="stylesheet" type="text/css"
href="//fonts.googleapis.com/css?family=Merriweather:300,700,700italic,300italic|Open+Sans:700,400" />
<link rel="stylesheet" type="text/css" href="/assets/css/syntax.css" />
<!-- [[! Ghost outputs important style and meta data with this tag ]] -->
<link rel="canonical" href="/" />
<meta name="referrer" content="origin" />
<link rel="next" href="/page2/" />
<meta property="og:site_name" content="Make Today Better Than Yesterday" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Make Today Better Than Yesterday" />
<meta property="og:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta property="og:url" content="/" />
<meta property="og:image" content="/assets/images/cover1.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Make Today Better Than Yesterday" />
<meta name="twitter:description" content="Code, Food, Photo and some Geek stuff ..." />
<meta name="twitter:url" content="/" />
<meta name="twitter:image:src" content="/assets/images/cover1.jpg" />
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Website",
"publisher": "Finding The Way Home",
"url": "/",
"image": "/assets/images/cover1.jpg",
"description": "Code, Food, Photo and some Geek stuff ..."
}
</script>
<meta name="generator" content="Jekyll 3.0.0" />
<link rel="alternate" type="application/rss+xml" title="Make Today Better Than Yesterday" href="/rss.xml" />
</head>
<body class="home-template nav-closed">
<div class="nav">
<h3 class="nav-title">Menu</h3>
<a href="#" class="nav-close">
<span class="hidden">Close</span>
</a>
<ul>
<li class="nav-home " role="presentation"><a href="/">Home</a></li>
<li class="nav-about " role="presentation"><a href="/about">About</a></li>
<li class="nav-photo " role="presentation"><a href="/tag/photo">Photo</a></li>
<li class="nav-food " role="presentation"><a href="/tag/food">Food</a></li>
<li class="nav-geek " role="presentation"><a href="/tag/geek">Geek</a></li>
<li class="nav-code " role="presentation"><a href="/tag/code">Code</a></li>
<li class="nav-author " role="presentation"><a href="/author/CT">Author</a></li>
</ul>
<a class="subscribe-button icon-feed" href="/rss.xml">Subscribe</a>
</div>
<span class="nav-cover"></span>
<div class="site-wrapper">
<!-- [[! Everything else gets inserted here ]] -->
<!-- < default -->
<!-- The comment above "< default" means - insert everything in this file into -->
<!-- the [body] of the default.hbs template, which contains our header/footer. -->
<!-- Everything inside the #post tags pulls data from the post -->
<!-- #post -->
<header class="main-header post-head " style="background-image: url(/assets/images/cover_2.jpg) ">
<nav class="main-nav overlay clearfix">
<a class="blog-logo" href="/"><img src="/assets/images/ghost.png" alt="Blog Logo" /></a>
<a class="menu-button icon-menu" href="#"><span class="word">Menu</span></a>
</nav>
</header>
<main class="content" role="main">
<article class="post tag-code">
<header class="post-header">
<h1 class="post-title">Shell Script : Jekyll Markdown Generator</h1>
<section class="post-meta">
<!-- <a href='/'>Ching Tsai</a> -->
<time class="post-date" datetime="2016-03-07">07 Mar 2016</time>
<!-- [[tags prefix=" on "]] -->
on
<a href='/tag/code'>Code</a>
</section>
</header>
<section class="post-content">
<p>很多人都問我說為什麼要用 MAC？除了做工精良，續航力高，還有一點非常棒的就是他可以和 Linux 共用大部分的 Unix Script。以下就用一個小小的例子來解釋能寫一些簡單的 Script 可以讓工程師一天過的更愉快。</p>
<p>一開始的緣由在於 Jekyll 的 Markdown 有一個既定的格式，就是檔名要是 <code>日期-標題.md</code> 並且內部要以特定的 tag ，不過如果每次發一篇文章都還要去填寫日期的話，並修改檔名的話，就顯得太費工夫了，所以初始的概念就是能 input <code>title</code> 和 <code>tag</code> ， 然後剩下重複的格式就交由 Script。</p>
<h3>I/O</h3>
<p>所以首先就先做簡單 I/O 來得到 <code>title</code> 和 <code>tag</code> 。</p>
<p>First of all, we should handle some I/O to get the input arguments <code>title</code> and <code>tag</code> .</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">printf</span> <span class="s">"Title : "</span>
<span class="n">read</span> <span class="n">title</span>
<span class="n">printf</span> <span class="s">"Tags : "</span>
<span class="n">read</span> <span class="n">tags</span>
</code></pre></div>
<h3>Parse</h3>
<p>再來由於我們要直接把 <code>title</code> 拿來當做檔名，不過由於其中多少會有一些標點符號，在這裡我們就要先把他們移除。所以我們用 <code>sed</code> 來做取代的動作，由於 <code>sed</code> 支援正規表示，所以我們可以用 <code>[[:punct:]]</code> 來指定標點符號，若之後有延伸的取代動作的話可以參考<a href="https://en.wikipedia.org/wiki/Regular_expression">這裡</a>更多正規表示。</p>
<p>Next, since there will be some punctuations in the title (e.g. .,;/?), we should remove them before we use it as part of the filename later. Here, we are using <code>sed</code> to remove the punctuations. Fortunately, <code>sed</code> support regular expression, so we can use <code>[[:punct:]]</code> to represent the punctuations and remove them. You could find more regular expression <a href="https://en.wikipedia.org/wiki/Regular_expression">here</a> , if we want to do more extensions.</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">parse</span><span class="o">=</span><span class="sb">`echo $title | sed -e "s/[[:punct:]]//g"`</span>
</code></pre></div>
<p>最後再把空白都換成一槓。
Also, we do the same handling to the space, but this time we replace it with <code>-</code>.</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="n">parse</span><span class="o">=</span><span class="sb">`echo $parse | sed -e "s/ /-/g"`</span>
</code></pre></div>
<h3>Date</h3>
<p>再來我們要取得 Post 當下的時間，把它加到檔名裡，這裡使用 <code>date</code> 來取得時間並且用內建輸出syntax 。這裡列舉一些簡單的表示方式。</p>
<p>We also need to get the time as the create time when we lunch the script. We use <code>date</code> to get then current time, and since it supports output format , we can simply transform the date to the format we want. Here is a handy lookup table.</p>
<table><thead>
<tr>
<th style="text-align: center">Example</th>
<th style="text-align: center">Format</th>
<th style="text-align: center">Outcome</th>
</tr>
</thead><tbody>
<tr>
<td style="text-align: center">年(year)</td>
<td style="text-align: center">％Y</td>
<td style="text-align: center">2016</td>
</tr>
<tr>
<td style="text-align: center">月(month)</td>
<td style="text-align: center">%m</td>
<td style="text-align: center">03</td>
</tr>
<tr>
<td style="text-align: center">日(day)</td>
<td style="text-align: center">%d</td>
<td style="text-align: center">07</td>
</tr>
<tr>
<td style="text-align: center">時(hour)</td>
<td style="text-align: center">%H</td>
<td style="text-align: center">16</td>
</tr>
<tr>
<td style="text-align: center">分(minute)</td>
<td style="text-align: center">%M</td>
<td style="text-align: center">12</td>
</tr>
<tr>
<td style="text-align: center">秒(second)</td>
<td style="text-align: center">%S</td>
<td style="text-align: center">00</td>
</tr>
</tbody></table>
<p>如此我們可以把現在時間轉成我們要的格式。</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="c"># 2016-03-07</span>
<span class="n">create_date</span><span class="o">=</span><span class="sb">`date +"%Y-%m-%d"`</span>
<span class="c"># 2016-03-07 22:56:00</span>
<span class="n">create_date_time</span><span class="o">=</span><span class="sb">`date +"%Y-%m-%d %H:%M:%S"`</span>
</code></pre></div>
<h3>Demo</h3>
<p>最後展示一下使用的情況</p>
<p>Here is the screenshot.</p>
<div class="highlight"><pre><code class="language-python" data-lang="python"><span class="o">></span> <span class="n">sh</span> <span class="n">auto_post</span><span class="o">.</span><span class="n">sh</span>
<span class="n">Title</span> <span class="p">:</span> <span class="n">Shell</span> <span class="n">Script</span> <span class="p">:</span> <span class="n">Jekyll</span> <span class="n">Markdown</span> <span class="n">Generator</span>
<span class="n">Tags</span> <span class="p">:</span> <span class="n">code</span>
<span class="o">></span> <span class="n">ls</span> <span class="n">_posts</span><span class="o">/</span>
<span class="mi">2016</span><span class="o">-</span><span class="mo">03</span><span class="o">-</span><span class="mo">07</span><span class="o">-</span><span class="n">Shell</span><span class="o">-</span><span class="n">Script</span><span class="o">-</span><span class="n">Jekyll</span><span class="o">-</span><span class="n">Markdown</span><span class="o">-</span><span class="n">Generator</span><span class="o">.</span><span class="n">md</span>
<span class="o">></span> <span class="n">cat</span> <span class="n">_posts</span><span class="o">/</span><span class="mi">2016</span><span class="o">-</span><span class="mo">03</span><span class="o">-</span><span class="mo">07</span><span class="o">-</span><span class="n">Shell</span><span class="o">-</span><span class="n">Script</span><span class="o">-</span><span class="n">Jekyll</span><span class="o">-</span><span class="n">Markdown</span><span class="o">-</span><span class="n">Generator</span><span class="o">.</span><span class="n">md</span>
<span class="o">---</span>
<span class="n">layout</span> <span class="p">:</span> <span class="n">post</span>
<span class="n">cover</span><span class="p">:</span> <span class="n">false</span>
<span class="n">title</span><span class="p">:</span> <span class="s">'Shell Script : Jekyll Markdown Generator'</span>
<span class="n">date</span><span class="p">:</span> <span class="s">'2016-03-07 22:56:00'</span>
<span class="n">tags</span><span class="p">:</span> <span class="n">code</span>
<span class="n">subclass</span><span class="p">:</span> <span class="s">'post tag-code'</span>
<span class="n">categories</span><span class="p">:</span> <span class="s">''</span>
<span class="n">cover</span><span class="p">:</span> <span class="s">''</span>
<span class="o">---</span>
</code></pre></div>
<h3>Source Code</h3>
<p>由於不同得 template 會有不同 Front Matter ， 所以可以自行視需求多加argument 進去，不過作法是雷同的。可以從<a href="https://github.com/ChingTsai/Jekyll-Markdown-Generator">這裡</a>拿到原始碼。</p>
<p>Since different Jekyll template has different Front Matter, feel free to add more arguments in the script to make it compatible to your Jekyll template. You can find the Source code <a href="https://github.com/ChingTsai/Jekyll-Markdown-Generator">here</a>.</p>
</section>
<footer class="post-footer">
<!-- Everything inside the #author tags pulls data from the author -->
<!-- #author-->
<figure class="author-image">
<a class="img" href="/author/CT" style="background-image: url(/assets/images/ct.png)"><span class="hidden">'s Picture</span></a>
</figure>
<section class="author">
<h4><a href="/author/CT">Ching Tsai</a></h4>
<p> 每天努力學習的研究攻城獅，略懂平行運算，分散式系統及機器學習，平時偶爾攝影，興趣是看 YouTube 學煮菜。</p>
<div class="author-meta">
<span class="author-location icon-location"> Hsinchu, Taiwan</span>
<span class="author-link icon-link"><a href="http://ChingTsai.github.io/chingtsai.github.io/"> ChingTsai.github.io/chingtsai.github.io/</a></span>
</div>
</section>
<!-- /author -->
<section class="share">
<h4>Share this post</h4>
<a class="icon-twitter" href="http://twitter.com/share?text=Shell Script : Jekyll Markdown Generator&url=http://ChingTsai.github.io/chingtsai.github.io/Shell-Script-Jekyll-Markdown-Generator"
onclick="window.open(this.href, 'twitter-share', 'width=550,height=235');return false;">
<span class="hidden">Twitter</span>
</a>
<a class="icon-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://ChingTsai.github.io/chingtsai.github.io/Shell-Script-Jekyll-Markdown-Generator"
onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">
<span class="hidden">Facebook</span>
</a>
<a class="icon-google-plus" href="https://plus.google.com/share?url=http://ChingTsai.github.io/chingtsai.github.io/Shell-Script-Jekyll-Markdown-Generator"
onclick="window.open(this.href, 'google-plus-share', 'width=490,height=530');return false;">
<span class="hidden">Google+</span>
</a>
</section>
<!-- Add Disqus Comments -->
<div id="disqus_thread"></div>
<script type="text/javascript">
//var disqus_developer = 1;
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'maketodaybetterthanyesterday'; // required: replace example with your forum shortname
var disqus_identifier = '/Shell-Script-Jekyll-Markdown-Generator';
var disqus_url = 'http://ChingTsai.github.io/chingtsai.github.io//Shell-Script-Jekyll-Markdown-Generator';
//console.log(disqus_shortname+" "+disqus_identifier+" "+disqus_url);
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</div>
</footer>
</article>
</main>
<aside class="read-next">
<!-- [[! next_post ]] -->
<a class="read-next-story " style="background-image: url(/assets/images/cover_2.jpg)" href="/LeetCode-94-Binary-Tree-Inorder-Traversal">
<section class="post">
<h2>LeetCode 94 : Binary Tree Inorder Traversal</h2>
<p>>Given a binary tree, return the inorder traversal of its nodes' values. > For example:...</p>
</section>
</a>
<!-- [[! /next_post ]] -->
<!-- [[! prev_post ]] -->
<a class="read-next-story prev " style="background-image: url(/assets/images/cover_2.jpg)" href="/LeetCode-147-Insertion-Sort-List">
<section class="post">
<h2>LeetCode 147 : Insertion Sort List</h2>
<p>Sort a linked list using insertion sort. Initial Though 這題很有意思， insertion sort 可能是大家最熟悉的 n^2 sorting...</p>
</section>
</a>
<!-- [[! /prev_post ]] -->
</aside>
<!-- /post -->
<footer class="site-footer clearfix">
<section class="copyright"><a href="/">Make Today Better Than Yesterday</a> © 2016</section>
<section class="poweredby">Proudly published with <a href="https://jekyllrb.com/">Jekyll</a> using <a href="https://github.com/biomadeira/jasper">Jasper</a></section>
</footer>
</div>
<!-- [[! Ghost outputs important scripts and data with this tag ]] -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- [[! The main JavaScript file for Casper ]] -->
<script type="text/javascript" src="/assets/js/jquery.fitvids.js"></script>
<script type="text/javascript" src="/assets/js/index.js"></script>
<!-- Add Google Analytics -->
<!-- Google Analytics Tracking code -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>