约伊兹的萌狼乡手札 - Pelican/2016-03-30T00:00:00+08:00自定 Pelican 主题2016-03-30T00:00:00+08:002016-03-30T00:00:00+08:00ホロtag:None,2016-03-30:/pelican/pelican_theming.html
<p><del>论颜值的重要性 (雾</del></p>
<p>谁叫这是个看脸的世界呢~</p>
<p>Pelican 的默认主题的效果是啥, <a class="reference external" href="http://blog.getpelican.com/">大概像这个样子 (╯>_<)╯ ┻━┻</a></p>
<p>觉得不爽,那就改它呗~</p>
<p>首先把默认的 <ruby><rb>simple</rb><rp>(</rp><rt>什么都没有</rt><rp>)</rp></ruby> 主题复制出来,接下来就基于它来修改呗~</p>
<blockquote>
<p># cp 的 -R (--recursive) 参数表示递归的复制文件夹中的文件.</p>
<p># 如果汝的 Python 安装在不同的目录下,记得改了.</p>
<p>cp -R /usr/lib/python3.5/site-packages/pelican/themes/simple /path/to/your/pelican/</p>
</blockquote>
<p>不过话说回来为啥不直接看 Pelican 官方的文档咧?</p>
<blockquote>
<a class="reference external" href="http://docs.getpelican.com/en/3.6.3/themes.html">Creating themes</a></blockquote>
<div class="section" id="step-1-pelican">
<h2><a class="toc-backref" href="#id2">Step 1 : 了解一下 Pelican 主题的结构</a></h2>
<p>典型的 Pelican 主题大概像这样:</p>
<div class="highlight"><pre><span class="code-line"><span></span>├── static …</span></pre></div></div>
<p><del>论颜值的重要性 (雾</del></p>
<p>谁叫这是个看脸的世界呢~</p>
<p>Pelican 的默认主题的效果是啥, <a class="reference external" href="http://blog.getpelican.com/">大概像这个样子 (╯>_<)╯ ┻━┻</a></p>
<p>觉得不爽,那就改它呗~</p>
<p>首先把默认的 <ruby><rb>simple</rb><rp>(</rp><rt>什么都没有</rt><rp>)</rp></ruby> 主题复制出来,接下来就基于它来修改呗~</p>
<blockquote>
<p># cp 的 -R (--recursive) 参数表示递归的复制文件夹中的文件.</p>
<p># 如果汝的 Python 安装在不同的目录下,记得改了.</p>
<p>cp -R /usr/lib/python3.5/site-packages/pelican/themes/simple /path/to/your/pelican/</p>
</blockquote>
<p>不过话说回来为啥不直接看 Pelican 官方的文档咧?</p>
<blockquote>
<a class="reference external" href="http://docs.getpelican.com/en/3.6.3/themes.html">Creating themes</a></blockquote>
<div class="section" id="step-1-pelican">
<h2><a class="toc-backref" href="#id2">Step 1 : 了解一下 Pelican 主题的结构</a></h2>
<p>典型的 Pelican 主题大概像这样:</p>
<div class="highlight"><pre><span class="code-line"><span></span>├── static // 各类静态数据</span>
<span class="code-line">│ ├── css // 例如 CSS.....</span>
<span class="code-line">│ └── images // 和图像</span>
<span class="code-line">└── templates // 用来生成页面的模板</span>
<span class="code-line"> ├── base.html // 模板的基础</span>
<span class="code-line"> ├── archives.html // 文章归档</span>
<span class="code-line"> ├── period_archives.html // 分时段的文章归档</span>
<span class="code-line"> ├── article.html // 文章</span>
<span class="code-line"> ├── author.html // 按作者分类的文章归档</span>
<span class="code-line"> ├── authors.html // 作者列表</span>
<span class="code-line"> ├── categories.html // 分类列表</span>
<span class="code-line"> ├── category.html // 按分类的文章归档</span>
<span class="code-line"> ├── index.html // 首页</span>
<span class="code-line"> ├── page.html // 页面</span>
<span class="code-line"> ├── tag.html // 标签</span>
<span class="code-line"> ├── pagination.html // 分页</span>
<span class="code-line"> └── tags.html // 标签列表</span>
</pre></div>
<p>如果觉得哪个用不到,直接删掉好了~</p>
<p>另外,像首页啦,分类列表,标签列表这些直接生成一个页面的模板 ( 区分于文章和页面这样的模板 ),如果汝有用到其他的,记得在
<code class="code">
pelican.conf</code>
里设置:</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="c1"># 直接生成的页面的列表,不用加上 .html 的扩展名.</span></span>
<span class="code-line"></span>
<span class="code-line"><span class="n">DIRECT_TEMPLATES</span> <span class="o">=</span> <span class="p">((</span><span class="s1">'index'</span><span class="p">,</span> <span class="s1">'archives'</span><span class="p">,</span> <span class="s1">'search'</span><span class="p">))</span></span>
</pre></div>
</div>
<div class="section" id="step-2-base-html">
<h2><a class="toc-backref" href="#id3">Step 2 : 修改基础模板 ( base.html )</a></h2>
<p>(请允许咱不厌其烦的把 html 代码贴在上面 _(:з」∠)_ )</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="cp"><!DOCTYPE html></span></span>
<span class="code-line"> <span class="c"><!--</span></span>
<span class="code-line"><span class="c"> 像这样用大括号包围起来的是变量啦,可以来自 pelicanconf.py</span></span>
<span class="code-line"><span class="c"> 文章,页面,和分类也提供了一些变量呐~</span></span>
<span class="code-line"><span class="c"> --></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">"{{ DEFAULT_LANG }}"</span><span class="p">></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">head</span><span class="p">></span></span>
<span class="code-line"> <span class="c"><!--</span></span>
<span class="code-line"><span class="c"> 其它模板页面可以扩展或是替换掉 block 中的内容呗~</span></span>
<span class="code-line"><span class="c"> --></span></span>
<span class="code-line"> {% block head %}</span>
<span class="code-line"> <span class="p"><</span><span class="nt">title</span><span class="p">></span>{% block title %}{{ SITENAME }}{% endblock title %}<span class="p"></</span><span class="nt">title</span><span class="p">></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">"utf-8"</span> <span class="p">/></span></span>
<span class="code-line"> <span class="c"><!--</span></span>
<span class="code-line"><span class="c"> Python 中的 if 语句,如果后面的变量有内容的话,显示块中的内容呗~</span></span>
<span class="code-line"><span class="c"> --></span></span>
<span class="code-line"> {% if FEED_ALL_ATOM %}</span>
<span class="code-line"> ......</span>
<span class="code-line"> {% endblock head %}</span>
<span class="code-line"><span class="p"></</span><span class="nt">head</span><span class="p">></span></span>
<span class="code-line"></span>
<span class="code-line"><span class="p"><</span><span class="nt">body</span> <span class="na">id</span><span class="o">=</span><span class="s">"index"</span> <span class="na">class</span><span class="o">=</span><span class="s">"home"</span><span class="p">></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">header</span> <span class="na">id</span><span class="o">=</span><span class="s">"banner"</span> <span class="na">class</span><span class="o">=</span><span class="s">"body"</span><span class="p">></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">h1</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ SITEURL }}/"</span><span class="p">></span>{{ SITENAME }} <span class="p"><</span><span class="nt">strong</span><span class="p">></span>{{ SITESUBTITLE }}<span class="p"></</span><span class="nt">strong</span><span class="p">></</span><span class="nt">a</span><span class="p">></</span><span class="nt">h1</span><span class="p">></span></span>
<span class="code-line"> <span class="p"></</span><span class="nt">header</span><span class="p">></span><span class="c"><!-- /#banner --></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">nav</span> <span class="na">id</span><span class="o">=</span><span class="s">"menu"</span><span class="p">><</span><span class="nt">ul</span><span class="p">></span></span>
<span class="code-line"> <span class="c"><!--</span></span>
<span class="code-line"><span class="c"> Python 中的 for 循环 <(=﹁"﹁=)></span></span>
<span class="code-line"><span class="c"> --></span></span>
<span class="code-line"> {% for title, link in MENUITEMS %}</span>
<span class="code-line"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ link }}"</span><span class="p">></span>{{ title }}<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span></span>
<span class="code-line"> {% endfor %}</span>
<span class="code-line"> {% block content %}</span>
<span class="code-line"> {% endblock %}</span>
<span class="code-line"> <span class="p"><</span><span class="nt">footer</span> <span class="na">id</span><span class="o">=</span><span class="s">"contentinfo"</span> <span class="na">class</span><span class="o">=</span><span class="s">"body"</span><span class="p">></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">address</span> <span class="na">id</span><span class="o">=</span><span class="s">"about"</span> <span class="na">class</span><span class="o">=</span><span class="s">"vcard body"</span><span class="p">></span></span>
<span class="code-line"> Proudly powered by <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://getpelican.com/"</span><span class="p">></span>Pelican<span class="p"></</span><span class="nt">a</span><span class="p">></span>,</span>
<span class="code-line"> which takes great advantage of <span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">"http://python.org"</span><span class="p">></span>Python<span class="p"></</span><span class="nt">a</span><span class="p">></span>.</span>
<span class="code-line"> <span class="p"></</span><span class="nt">address</span><span class="p">></span><span class="c"><!-- /#about --></span></span>
<span class="code-line"> <span class="p"></</span><span class="nt">footer</span><span class="p">></span><span class="c"><!-- /#contentinfo --></span></span>
<span class="code-line"><span class="p"></</span><span class="nt">body</span><span class="p">></span></span>
<span class="code-line"><span class="p"></</span><span class="nt">html</span><span class="p">></span></span>
</pre></div>
<p>因为 Pelican 用的是 Jinja2 模板引擎嘛,所以 <a class="reference external" href="http://jinja.pocoo.org/docs/dev/">先去看看 Jinja 的文档嘛~</a></p>
<p>如果看不懂的话,pia 啦~ (╯・﹏・)╯ ┻━┻ 这里只举一个加入 CSS 的栗子:</p>
<p>首先把 CSS 放到 <code class="code">
static/css</code>
文件夹里,然后修改 <code class="code">
base.html</code>
</p>
<div class="highlight"><pre><span class="code-line"><span></span>{% block head %}</span>
<span class="code-line"> <span class="c"><!-- static 文件夹输出以后就是 /theme 啦~ --></span></span>
<span class="code-line"> <span class="p"><</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">"{{ SITEURL }}/theme/css/metro.css"</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span><span class="p">></span></span>
<span class="code-line"></span>
<span class="code-line">{% endblock head %}</span>
</pre></div>
<p>就这样 ~(>_<~)</p>
</div>
<div class="section" id="step-3">
<h2><a class="toc-backref" href="#id4">Step 3 : 修改子模板</a></h2>
<p>再举一个文章的栗子 (´・ω・`)</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="c"><!-- entends 就是扩展啦,后面是基于的模板页面的名称 --></span></span>
<span class="code-line">{% extends "base.html" %}</span>
<span class="code-line">{% block head %}</span>
<span class="code-line"><span class="c"><!-- 用 super () 来包含 block 默认的内容 --></span></span>
<span class="code-line">{{ super() }}</span>
<span class="code-line">{% for keyword in article.keywords %}</span>
<span class="code-line"><span class="p"><</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">"keywords"</span> <span class="na">content</span><span class="o">=</span><span class="s">"{{keyword}}"</span> <span class="p">/></span></span>
<span class="code-line">{% endfor %}</span>
<span class="code-line"></span>
<span class="code-line">{% endblock %}</span>
<span class="code-line">{% block content %}</span>
<span class="code-line"><span class="c"><!-- 这里加上需要的内容 --></span></span>
<span class="code-line">{% endfor %}</span>
<span class="code-line"><span class="p"></</span><span class="nt">dl</span><span class="p">></span></span>
<span class="code-line">{% endblock %}</span>
</pre></div>
<p>本来打算贴出模板里能用的变量的,不过咱有了要翻译 Pelican 文档的想法了呐~ ( todo list 要爆炸的节奏 )</p>
</div>
发布 Pelican 博客的几种方式2016-03-19T00:00:00+08:002016-03-19T00:00:00+08:00ホロtag:None,2016-03-19:/pelican/pelican_output.html
<p>汝的 Pelican 博客有几篇文章了没?想不想让其他人也看到?</p>
<p>如果汝在一开始使用了 <code class="code">
pelican-quickstart</code>
来创建汝的博客的话,后面可能会方便点呗~
( 因为它帮汝生成了一个 Makefile 呐~ 然而 baka Windows 并不能用 Makefile (ノ=Д=)ノ┻━┻ )</p>
<div class="section" id="pelican-quickstart-makefile">
<h2><a class="toc-backref" href="#id6">没用 pelican-quickstart ? 可以自己来写一个 Makefile 呗~</a></h2>
<p>样例在这:</p>
<script src="https://gist.github.com/KenOokamiHoro/223974ff5884c6eb82a5.js"></script><p>(这里用到了 Github Gist 嘛,如果看不到的话, <a class="reference external" href="https://gist.github.com/KenOokamiHoro/223974ff5884c6eb82a5">链接在这</a> )</p>
<p>对于喜欢自己动手的 <del>菊苣</del> 来说, Makefile 里的命令稍加改造就可以直接执行呐~</p>
<p>在下面的例子中,上面是 Make 规则,下面是实际运行的命令呗~</p>
<p>( <code class="code">
/path/to/your/content/</code>
是汝的内容存放的目录, <code class="code">
path/to/your/settings …</code></p></div>
<p>汝的 Pelican 博客有几篇文章了没?想不想让其他人也看到?</p>
<p>如果汝在一开始使用了 <code class="code">
pelican-quickstart</code>
来创建汝的博客的话,后面可能会方便点呗~
( 因为它帮汝生成了一个 Makefile 呐~ 然而 baka Windows 并不能用 Makefile (ノ=Д=)ノ┻━┻ )</p>
<div class="section" id="pelican-quickstart-makefile">
<h2><a class="toc-backref" href="#id6">没用 pelican-quickstart ? 可以自己来写一个 Makefile 呗~</a></h2>
<p>样例在这:</p>
<script src="https://gist.github.com/KenOokamiHoro/223974ff5884c6eb82a5.js"></script><p>(这里用到了 Github Gist 嘛,如果看不到的话, <a class="reference external" href="https://gist.github.com/KenOokamiHoro/223974ff5884c6eb82a5">链接在这</a> )</p>
<p>对于喜欢自己动手的 <del>菊苣</del> 来说, Makefile 里的命令稍加改造就可以直接执行呐~</p>
<p>在下面的例子中,上面是 Make 规则,下面是实际运行的命令呗~</p>
<p>( <code class="code">
/path/to/your/content/</code>
是汝的内容存放的目录, <code class="code">
path/to/your/settings.py</code>
是汝设置文件的目录,
记得用汝实际的位置替换呗~ )</p>
<blockquote>
make html</blockquote>
<hr class="docutils"/>
<blockquote>
pelican /path/to/your/content/ -s path/to/your/settings.py</blockquote>
</div>
<div class="section" id="id2">
<h2><a class="toc-backref" href="#id7">首先当然是要生成汝的博客啦~</a></h2>
<p>如果加上 <code class="code">
-r</code>
或者 <code class="code">
--autoreload</code>
参数, Pelican 就会在源文件更改时自动更新输出哟~</p>
<p>如果汝在一开始使用了 <code class="code">
pelican-quickstart</code>
,会生成一个发布时使用的 <code class="code">
publishconf.py</code>
文件呐~</p>
<p>(需要时就用它呗)</p>
<blockquote>
make html</blockquote>
<hr class="docutils"/>
<blockquote>
pelican /path/to/your/content/ [-s path/to/your/settings.py]</blockquote>
</div>
<div class="section" id="id3">
<h2><a class="toc-backref" href="#id8">接下来先在本机上预览一下~</a></h2>
<p>如果出了错再重新上传一遍岂不是很痛苦 (╯>_<)╯ ┻━┻</p>
<p>如果汝在一开始使用了 <code class="code">
pelican-quickstart</code>
会在汝的文件夹下生成一个 <code class="code">
developer_server.sh</code>
文件,像这样?</p>
<script src="https://gist.github.com/KenOokamiHoro/011731f75ee363ef4460.js"></script><p>(这里用到了 Github Gist 嘛,如果看不到的话, <a class="reference external" href="https://gist.github.com/KenOokamiHoro/011731f75ee363ef4460">链接在这 again~</a> )</p>
<p>如果是这样的话让它帮忙就好了啦~</p>
<blockquote>
<p># 一共有 start | stop | restart 三个选项,该知道是啥了吧 (´・ω・`)</p>
<p>sh developer_server.sh start</p>
</blockquote>
<p>或者切换到输出的目录,然后直接运行 <code class="code">
pelican.server</code>
</p>
<blockquote>
python -m pelican.server</blockquote>
<p>在汝的浏览器上打开 <code class="code">
http://localhost:8000</code>
看看效果呗~</p>
<p>如果一切 OK 的话,用 <code class="code">
publishconf.py</code>
生成发布时用的文件呗~</p>
</div>
<div class="section" id="id4">
<h2><a class="toc-backref" href="#id9">如果汝用自己的服务器?</a></h2>
<p>如果汝用自己的服务器的话,修改汝的 Makefile 的这一段:</p>
<p>如果汝在用FTP : ( 不过为啥还在用不安全的 FTP 啊 (╯‵Д′)╯ ┻━┻ )</p>
<blockquote>
<p>FTP_HOST=localhost # 这是主机的域名或者 IP 地址</p>
<p>FTP_USER=anonymous # 这是用户名</p>
<p>FTP_TARGET_DIR=/ # 这是上传到的文件夹</p>
</blockquote>
<p>然后安装 lftp ( Makefile 里用的是这个 )</p>
<p>如果汝在用 SFTP (SCP/SSH) :</p>
<blockquote>
<p>SSH_HOST=localhost # 这是主机的域名或者 IP 地址</p>
<p>SSH_PORT=22 # 如果主机的 SSH 端口不是默认的记得改~</p>
<p>SSH_USER=root # 这是用户名</p>
<p>SSH_TARGET_DIR=/var/www # 这是上传到的文件夹</p>
</blockquote>
<p>然后安装 scp ( Makefile 里用的是这个 )</p>
<p>接下来只要直接 Make 相应的目标就可以啦~</p>
<blockquote>
make ssh_upload</blockquote>
<hr class="docutils"/>
<blockquote>
<p>pelican /path/to/your/content/ -s path/to/your/publishconf.py</p>
<p>scp -P $(SSH_PORT) -r $(OUTPUTDIR)/* $(SSH_USER)@$(SSH_HOST):$(SSH_TARGET_DIR)</p>
</blockquote>
<hr class="docutils"/>
<blockquote>
make ftp_upload</blockquote>
<hr class="docutils"/>
<blockquote>
<p>pelican /path/to/your/content/ -s path/to/your/publishconf.py</p>
<p>lftp <a class="reference external" href="ftp://$(FTP_USER)@$(FTP_HOST">ftp://$(FTP_USER)@$(FTP_HOST</a>) -e "mirror -R $(OUTPUTDIR) $(FTP_TARGET_DIR) ; quit"</p>
</blockquote>
</div>
<div class="section" id="github-pages">
<h2><a class="toc-backref" href="#id10">如果汝打算用 Github Pages ?</a></h2>
<p><a class="reference external" href="/links.html#farseerfc">farseerfc</a> 写过一篇利用 Travis 生成 Github Pages 的教程:</p>
<blockquote>
<a class="reference external" href="http://farseerfc.me/travis-push-to-github-pages-blog.html">用 Travis-CI 生成 Github Pages 博客</a></blockquote>
<hr class="docutils"/>
<p>要上传到像 Amazon S3 ,Dropbox 一类的地方 , <a class="reference external" href="http://docs.getpelican.com/en/3.6.3/publish.html">还是看Pelican官方的文档吧</a></p>
</div>
在 Windows 上编织 Pelican 博客 -- MSYS2篇2016-03-04T21:00:00+08:002016-03-04T21:00:00+08:00ホロtag:None,2016-03-04:/pelican/pelican_on_windows_msys2.html
<p>用 Windows 那是迫不得已……</p>
<p><del>人生赢家</del> <a class="reference external" href="/links.html#farseerfc">farseerfc</a> 这样写到......</p>
<blockquote>
<p>寄宿在 Github Pages 上的静态博客通常有两种方案,其一是使用 Jekyll 方式撰写,
这可以利用 Github Pages 原本就有的 Jekyll支持 生成静态网站。
另一种是在 本地 也就是自己的电脑上生成好,然后把生成的 HTML 网站 push 到 Github Pages ,
这种情况下 Github Pages 就完全只是一个静态页面宿主环境。</p>
<p>我用 Pelican 生成博客,当然就只能选择后一种方式了。
这带来一些不便,比如本地配置 pelican 还是有一点点复杂的,所以不能随便找台电脑就开始写博客。
有的时候只是想修正一两个错别字, 这时候必须打开某台特定的电脑才能编辑博客就显得不太方便了。
再比如 pelican 本身虽然是 python 写的所以跨平台,但是具体到博客的配置方面 …</p></blockquote>
<p>用 Windows 那是迫不得已……</p>
<p><del>人生赢家</del> <a class="reference external" href="/links.html#farseerfc">farseerfc</a> 这样写到......</p>
<blockquote>
<p>寄宿在 Github Pages 上的静态博客通常有两种方案,其一是使用 Jekyll 方式撰写,
这可以利用 Github Pages 原本就有的 Jekyll支持 生成静态网站。
另一种是在 本地 也就是自己的电脑上生成好,然后把生成的 HTML 网站 push 到 Github Pages ,
这种情况下 Github Pages 就完全只是一个静态页面宿主环境。</p>
<p>我用 Pelican 生成博客,当然就只能选择后一种方式了。
这带来一些不便,比如本地配置 pelican 还是有一点点复杂的,所以不能随便找台电脑就开始写博客。
有的时候只是想修正一两个错别字, 这时候必须打开某台特定的电脑才能编辑博客就显得不太方便了。
再比如 pelican 本身虽然是 python 写的所以跨平台,但是具体到博客的配置方面, Windows 环境和 Linux/OSX/Unix-like 环境下还是有 些许出入 的。
还有就是没有像 wordpress 那样的基于 web 的编辑环境,在手机上就不能随便写一篇博客发表出来
(不知道有没有勇士尝试过在 Android 的 SL4A 环境下的 python 中跑 pelican ,还要配合一个 Android 上的 git 客户端 )。</p>
<p>---- <a class="reference external" href="https://farseerfc.me/travis-push-to-github-pages-blog.html">Farseerfc.me:用 Travis-CI 生成 Github Pages 博客</a></p>
</blockquote>
<p>确实,Pelican 虽然是跨平台的,但是......</p>
<p>如果汝用了 <code class="code">
pelican-quickstart</code>
,汝的目录下会有一个 <code class="code">
Makefile</code>
文件,那么问题来了,
Windows 里上哪读 Makefile 啦(ノ=Д=)ノ┻━┻</p>
<p>所以只好在 Windows 里搞个类 <ruby><rb>Unix</rb><rp>(</rp><rt>Linux</rt><rp>)</rp></ruby> 环境了(´・ω・`)</p>
<p><del>某人:其实把 Makefile 魔改成批处理文件也是可以的$#W#@$##%$^&%^%^$^%&%</del></p>
<div class="section" id="msys2">
<h2><a class="toc-backref" href="#id6">为啥是msys2?</a></h2>
<blockquote>
<a class="reference external" href="/links.html#quininer">quininer</a> :明明是 OneGet + PowerShell 大法好嘛~</blockquote>
<p>在 Windows 世界里最出名的类 Unix 环境不是 <a class="reference external" href="http://cygwin.com/">Cygwin</a> 么?</p>
<blockquote>
<p>因为 msys2 有 pacman 啦~</p>
<p>因为 msys2 有 pacman 啦 ~ (╯T▽T)╯ ┻━┻</p>
<p>因为 msys2 有 pacman 啦 ~ (ノ=Д=)ノ┻━┻</p>
<p class="attribution">—<del>重要的事情说三遍</del> (๑•̀ㅂ•́)و✧</p>
</blockquote>
<p>总之为了 pacman 咱最后选了 msys2 😂😂😂</p>
</div>
<div class="section" id="id1">
<h2><a class="toc-backref" href="#id7">安装和设置 msys2</a></h2>
<p>去 <a class="reference external" href="http://msys2.github.io/">官方网站</a> 或是 <a class="reference external" href="http://mirrors.ustc.edu.cn/msys2/Base/">崔主席的镜像源</a> 下载基本组件包啦~ ( <a class="reference external" href="/links.html#cuihao">cuihao</a> 好棒~ )</p>
<p>如果需要, <a class="reference external" href="https://lug.ustc.edu.cn/wiki/mirrors/help/msys2">把软件仓库换成崔主席的镜像呗~</a></p>
<p>接下来更新msys2和安装基本工具 ( 咱用了 Github 所以再装个 Git ):</p>
<blockquote>
pacman -Syu
pacman -S base-devel make git</blockquote>
<div class="tag warning fg-white compound">
<p class="compound-first">截至写这篇文章时,咱从pacman安装的 pip ( <code class="code">
mingw-w64-x86_64-python3-pip</code>
) 会因为一个 ImportError 没法装任何软件包呐~ ( pia之 (╯@ω@)╯ ┻━┻ )</p>
<p class="compound-last">所以只好装个 Windows 版的 Python 😂</p>
</div>
</div>
<div class="section" id="pelican-windows-python">
<h2><a class="toc-backref" href="#id8">安装 pelican 和 Windows 版 Python</a></h2>
<p><a class="reference external" href="https://www.python.org/downloads/windows/">去 Python.org 下载啦~</a> ,记得把 <code class="code">
python</code>
和 <code class="code">
pip</code>
添加到系统的 <code class="code">
PATH</code>
中.( msys2 好像可以用 Windows 的 PATH ~)</p>
<p>接下来打开 msys2 shell (其实就是 Bash 啦 😂) 把 Windows 里的 python 软连接到 <code class="code">
/usr/bin/python</code>
上</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="c1"># 不知道在哪? 用 whereis 命令查一下啦~</span></span>
<span class="code-line">$ whereis python</span>
<span class="code-line">/c/python35/python.exe</span>
<span class="code-line"><span class="c1"># 用 ln -s <源路径> <目标路径> 创建一个符号链接.</span></span>
<span class="code-line">$ ln -s /c/python35/python.exe /usr/bin/python</span>
</pre></div>
<p>然后用 pip 安装 pelican _(:з」∠)_</p>
<blockquote>
pip install pelican</blockquote>
</div>
<div class="section" id="id5">
<h2><a class="toc-backref" href="#id9">试验</a></h2>
<p>先用各种不同的方法把汝的 pelican 文件夹复制到 msys2 的主文件夹里啦~ ( 在汝安装 msys2 的文件夹中有一个 <code class="code">
home/<汝 Windows 系统的用户名>/</code>
的文件夹啦 (╯°∧°)╯ ┻━┻ )</p>
<p>如果汝用了 <code class="code">
pelican-quickstart</code>
生成了 develop_server.sh 那它喂给 sh 啦~</p>
<blockquote>
sh develop_server.sh start</blockquote>
<p>如果没有的话,那就自己 make 呗~</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="c1"># 生成html</span></span>
<span class="code-line">make html</span>
<span class="code-line"><span class="c1"># 运行测试服务器</span></span>
<span class="code-line">make serve</span>
</pre></div>
<p>有时汝可能用到一些其它程序,那么汝只好通过 pacman 安装或者自己编译啦 (╯‵﹏′)╯ ┻━┻</p>
<p><del>这篇文章其实是在 Arch Linux 上完成的所以并没有啥截图😂😂😂</del></p>
</div>
新约伊兹的萌狼乡手札诞生全过程伪实录2016-01-18T09:35:00+08:002016-01-18T09:35:00+08:00ホロtag:None,2016-01-18:/pelican/new_yoitsu_birth_notes.html
<p>说好的下一期来啦~,新的"约伊兹的萌狼乡手札"是怎么样诞生呐~马上就告诉汝呗~</p>
<div class="section" id="pelican">
<h2><a class="toc-backref" href="#id5">安装Pelican然后进行初始设置</a></h2>
<p>在咱写这篇文章时, <a class="reference external" href="/links.html#farsserfc">farsserfc</a> 已经把Pelican打好包放进Arch Linux 官方软件仓库啦好棒~</p>
<p>Arch Linux用户可以这样安装:</p>
<div class="highlight"><pre><span class="code-line"><span></span>sudo pacman -S pelican</span>
</pre></div>
<p>其它操作系统可以通过pip安装:</p>
<div class="highlight"><pre><span class="code-line"><span></span>sudo pip install pelican</span>
</pre></div>
<p>接着运行设置程序建立一个工作文件夹:</p>
<div class="highlight"><pre><span class="code-line"><span></span>pelican-quickstart</span>
</pre></div>
<p>接着开始挖坑呗~,用 <a class="reference external" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> 或 <a class="reference external" href="http://wowubuntu.com/markdown/">Markdown</a> 开始写文章然后放到 <code class="code">
contents</code>
文件夹里,像这样:</p>
<p>(reStructuredText)</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="gh">这里是标题</span></span>
<span class="code-line"><span class="gh">===========================================</span></span>
<span class="code-line"></span>
<span class="code-line"><span class="nc">:lang:</span> 这里填语言</span>
<span class="code-line"><span class="nc">:date:</span> 写文章的日期</span>
<span class="code-line"><span class="nc">:Category:</span> 分类</span>
<span class="code-line"></span>
<span class="code-line">这里是内容</span>
</pre></div>
<p>(Markdown)</p>
<div class="highlight"><pre><span class="code-line"><span></span>Title: 这里是标题</span>
<span class="code-line">date: 写文章的日期</span>
<span class="code-line">Category: 分类</span>
<span class="code-line"></span>
<span class="code-line">这里是内容 …</span></pre></div></div>
<p>说好的下一期来啦~,新的"约伊兹的萌狼乡手札"是怎么样诞生呐~马上就告诉汝呗~</p>
<div class="section" id="pelican">
<h2><a class="toc-backref" href="#id5">安装Pelican然后进行初始设置</a></h2>
<p>在咱写这篇文章时, <a class="reference external" href="/links.html#farsserfc">farsserfc</a> 已经把Pelican打好包放进Arch Linux 官方软件仓库啦好棒~</p>
<p>Arch Linux用户可以这样安装:</p>
<div class="highlight"><pre><span class="code-line"><span></span>sudo pacman -S pelican</span>
</pre></div>
<p>其它操作系统可以通过pip安装:</p>
<div class="highlight"><pre><span class="code-line"><span></span>sudo pip install pelican</span>
</pre></div>
<p>接着运行设置程序建立一个工作文件夹:</p>
<div class="highlight"><pre><span class="code-line"><span></span>pelican-quickstart</span>
</pre></div>
<p>接着开始挖坑呗~,用 <a class="reference external" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> 或 <a class="reference external" href="http://wowubuntu.com/markdown/">Markdown</a> 开始写文章然后放到 <code class="code">
contents</code>
文件夹里,像这样:</p>
<p>(reStructuredText)</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="gh">这里是标题</span></span>
<span class="code-line"><span class="gh">===========================================</span></span>
<span class="code-line"></span>
<span class="code-line"><span class="nc">:lang:</span> 这里填语言</span>
<span class="code-line"><span class="nc">:date:</span> 写文章的日期</span>
<span class="code-line"><span class="nc">:Category:</span> 分类</span>
<span class="code-line"></span>
<span class="code-line">这里是内容</span>
</pre></div>
<p>(Markdown)</p>
<div class="highlight"><pre><span class="code-line"><span></span>Title: 这里是标题</span>
<span class="code-line">date: 写文章的日期</span>
<span class="code-line">Category: 分类</span>
<span class="code-line"></span>
<span class="code-line">这里是内容</span>
</pre></div>
<p>然后运行一个命令来测试</p>
<div class="highlight"><pre><span class="code-line"><span></span>make html <span class="c1"># 生成html</span></span>
<span class="code-line">make serve <span class="c1"># 在127.0.0.1:8000 运行一个测试服务器.</span></span>
</pre></div>
<p>然后打开浏览器输入 <code class="code">
localhost:8000</code>
,你就能看到一个初生的很 <ruby><rb>简洁</rb><rp>(</rp><rt>难看</rt><rp>)</rp></ruby> 的博客了,不过不要担心,它是只丑小鸭,很快就会像天鹅般美丽(真的么?)。</p>
</div>
<div class="section" id="ruby-rb-rb-rp-rp-rt-rt-rp-rp-ruby-pelican">
<h2><a class="toc-backref" href="#id6"><ruby><rb>修改</rb><rp>(</rp><rt>调教</rt><rp>)</rp></ruby> Pelican的主题</a></h2>
<p>可能是一时抽风没找到合适的Material Design风格的框架,<del>于是走上了Metro UI CSS的不归路......</del></p>
<p>Metro UI CSS的项目主页在这里 <a class="reference external" href="http://metroui.org.ua">http://metroui.org.ua</a></p>
<p>咱拿了pelican内置的simple主题做起步,把Metro UI CSS文件夹里的 <code class="code">
/css</code>
和 <code class="code">
/js</code>
复制到主题的 <code class="code">
/statics</code>
文件夹里.</p>
<p>现在的文件夹结构大概像这样:</p>
<pre><span class="code-line"></span>
<span class="code-line"><span style="color:blue;font-weight:bold;">.</span></span>
<span class="code-line">├── <span style="color:blue;font-weight:bold;">cache</span> 生成頁面的 pickle 緩存</span>
<span class="code-line">├── <span style="color:blue;font-weight:bold;">content</span> 讀取的全部內容</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;"><categories></span> 按分類存放的文章</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">pages</span> 像 About 這樣的固定頁面</span>
<span class="code-line">│ └── <span style="color:blue;font-weight:bold;">static</span> 文章內用到的靜態內容</span>
<span class="code-line">├── <span style="color:blue;font-weight:bold;">drafts</span> 文章的草稿箱</span>
<span class="code-line">├── <span style="color:green;font-weight:bold;">Makefile</span> 生成用的 makefile</span>
<span class="code-line">├── <span style="color:green;font-weight:bold;">pelicanconf.py</span> 測試時用的快速 Pelican 配置</span>
<span class="code-line">├── <span style="color:green;font-weight:bold;">publishconf.py</span> 部署時用的耗時 Pelican 配置</span>
<span class="code-line">├── <span style="color:teal;font-weight:bold;">output</span> -> <span style="color:blue;font-weight:bold;">../kenookamihoro.github.io</span></span>
<span class="code-line">├── <span style="color:teal;font-weight:bold;">plugins</span> -> <span style="color:blue;font-weight:bold;">../plugins</span></span>
<span class="code-line">└── <span style="color:teal;font-weight:bold;">theme</span> -> <span style="color:blue;font-weight:bold;">../yoitsu</span></span>
</pre><p>然后这个内容 repo 中的三个符号链接分别指向三个子 repo(为啥没用 <code class="code">
git submodule</code>
? 因为咱技术不精还不会用......)。
theme 指向 <a class="reference external" href="https://github.com/KenOokamiHoro/yoitsu">yoitsu</a> ,是咱修改过的 pelican 主题啦。
plugins 指向 <a class="reference external" href="https://github.com/getpelican/pelican-plugins">pelican-plugins</a>
最后 output 指向 <a class="reference external" href="https://github.com/KenOokamiHoro/kenookamihoro.github.io">kenookamihoro.github.io</a> 也就是发布的静态网站啦。</p>
<p>而主题文件夹的结构大概像这样:</p>
<pre><span class="code-line"></span>
<span class="code-line"><span style="color:blue;font-weight:bold;">.</span></span>
<span class="code-line">├── <span style="color:blue;font-weight:bold;">static</span> 主题中用到的静态文件,例如js和css</span>
<span class="code-line">├── <span style="color:blue;font-weight:bold;">templates</span> 供jinja使用的模板页面</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">archives.html</span> 文章归档</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">article.html</span> 每个文章</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">author.html</span> 作者</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">base.html</span> 所有模板的基础</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">category.html</span> 分类</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">index.html</span> 首页</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">page.html</span> 每个页面</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">pageination.html</span> 分页</span>
<span class="code-line">│ ├── <span style="color:blue;font-weight:bold;">search.html</span> 搜索</span>
<span class="code-line">│ └── <span style="color:blue;font-weight:bold;">tag.html</span> 标签</span>
<span class="code-line">└──</span>
<span class="code-line"></span>
</pre><p>然后记得修改pelican.conf告诉Pelican那些页面是模板那些页面是直接生成的呐~</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="c1"># DIRECT_TEMPLATES 告诉Pelican哪些页面是直接用来生成特定页面的......</span></span>
<span class="code-line"><span class="n">DIRECT_TEMPLATES</span> <span class="o">=</span> <span class="p">((</span><span class="s1">'index'</span><span class="p">,</span> <span class="s1">'archives'</span><span class="p">,</span> <span class="s1">'search'</span><span class="p">))</span></span>
</pre></div>
<p>接下来开始调教主题呗~,直接给出官方的教程呗~ <a class="reference external" href="http://docs.getpelican.com/en/3.6.3/themes.html">Pelican doc:Creating Themes</a></p>
<p>经过一番 <ruby><rb>仔细</rb><rp>(</rp><rt>无脑</rt><rp>)</rp></ruby> 调教以后,就成了汝等现在看到的样子了呐~</p>
<p>PS:咱自己做的这套主题还木有到能拿来复用的程度(原因主要是咱有很多是直接写死在主题里的设置),所以这又是一个坑呗~</p>
</div>
<div class="section" id="id2">
<h2><a class="toc-backref" href="#id7">装插件</a></h2>
<p>作为一套博客系统,Pelican自然有很多的插件可以安装呐~,不信的话去看看`pelican-plugins里有多少插件呗~ <<a class="reference external" href="https://github.com/getpelican/pelican-plugins">https://github.com/getpelican/pelican-plugins</a>>`_</p>
<p>咱启用的插件有这些:</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="n">PLUGINS</span> <span class="o">=</span> <span class="p">[</span><span class="s2">"better_codeblock_line_numbering"</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'tipue_search'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'neighbors'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'series'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s2">"render_math"</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'extract_toc'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'tag_cloud'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'sitemap'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'summary'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'bootstrapify'</span><span class="p">,</span></span>
<span class="code-line"> <span class="s1">'twitter_bootstrap_rst_directives'</span><span class="p">]</span></span>
</pre></div>
<p>具体的设置流程嘛,请允许咱引用一下 <a class="reference external" href="http://farseerfc.me/redesign-pelican-theme.html#pelican-restructuredtext">farseerfc.me:重新設計了 Pelican 的主題與插件</a> 呗~</p>
</div>
<div class="section" id="id3">
<h2><a class="toc-backref" href="#id8">实现动态格言</a></h2>
<p>动态格言的实现来自 <a class="reference external" href="/links.html#fiveyellowmice">fiveyellowmice</a> 啦~(咱不是JavaScript专家呐~,就不谈具体的实现了呗~)</p>
<p>首先是一段修改某一个元素的类的JavaScript(当然还需要 <a class="reference external" href="http://julian.com/research/velocity/">velocity</a> ):</p>
<div class="highlight"><pre><span class="code-line"><span></span> <span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"/theme/js/velocity.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span></span>
<span class="code-line"></span>
<span class="code-line"> <span class="p"><</span><span class="nt">script</span><span class="p">></span></span>
<span class="code-line"> <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"DOMContentLoaded"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".menu-button"</span><span class="p">).</span><span class="nx">on</span><span class="p">(</span><span class="s2">"touchstart"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".menu-wrapper"</span><span class="p">).</span><span class="nx">removeClass</span><span class="p">(</span><span class="s2">"trigger"</span><span class="p">);</span></span>
<span class="code-line"> <span class="k">if</span> <span class="p">(</span> <span class="nx">$</span><span class="p">(</span><span class="s2">".nav-items"</span><span class="p">).</span><span class="nx">is</span><span class="p">(</span><span class="s2">":visible"</span><span class="p">)</span> <span class="p">)</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".nav-items"</span><span class="p">).</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"finish"</span><span class="p">)</span></span>
<span class="code-line"> <span class="p">.</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"slideUp"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">delay</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> <span class="nx">easing</span><span class="o">:</span> <span class="s2">"easeInQuad"</span> <span class="p">})</span></span>
<span class="code-line"> <span class="p">.</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"fadeOut"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">delay</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> <span class="nx">easing</span><span class="o">:</span> <span class="s2">"easeInQuad"</span><span class="p">,</span> <span class="nx">queue</span><span class="o">:</span> <span class="kc">false</span> <span class="p">});</span></span>
<span class="code-line"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".nav-items"</span><span class="p">).</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"finish"</span><span class="p">)</span></span>
<span class="code-line"> <span class="p">.</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"slideDown"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">delay</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> <span class="nx">easing</span><span class="o">:</span> <span class="s2">"easeOutQuad"</span> <span class="p">})</span></span>
<span class="code-line"> <span class="p">.</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"fadeIn"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">delay</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> <span class="nx">easing</span><span class="o">:</span> <span class="s2">"easeOutQuad"</span><span class="p">,</span> <span class="nx">queue</span><span class="o">:</span> <span class="kc">false</span> <span class="p">});</span></span>
<span class="code-line"> <span class="p">}</span></span>
<span class="code-line"> <span class="p">});</span></span>
<span class="code-line"> <span class="p">});</span></span>
<span class="code-line"><span class="p"></</span><span class="nt">script</span><span class="p">></span></span>
</pre></div>
<p>然后新建一个 Github gist 填上动态格言,像这样(大括号里的内容可以添加多个):</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="p">[</span></span>
<span class="code-line"> <span class="p">{</span></span>
<span class="code-line"> <span class="nt">"content"</span><span class="p">:</span><span class="s2">"example"</span><span class="p">,</span></span>
<span class="code-line"> <span class="nt">"author"</span><span class="p">:</span><span class="s2">"someone"</span></span>
<span class="code-line"> <span class="p">},</span></span>
<span class="code-line"><span class="p">]</span></span>
</pre></div>
<p>再写个JavaScript来从JSON中提取格言然后填到html里:</p>
<div class="highlight"><pre><span class="code-line"><span></span><span class="p"><</span><span class="nt">script</span><span class="p">></span></span>
<span class="code-line"> <span class="nb">document</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s2">"DOMContentLoaded"</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".site-description"</span><span class="p">).</span><span class="nx">after</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"<blockquote>"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"id"</span><span class="p">,</span> <span class="s2">"fortune"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">"display"</span><span class="p">,</span> <span class="s2">"none"</span><span class="p">));</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">".site-description"</span><span class="p">).</span><span class="nx">after</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s2">"<blockquote>"</span><span class="p">).</span><span class="nx">attr</span><span class="p">(</span><span class="s2">"id"</span><span class="p">,</span> <span class="s2">"fortune"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="s2">"line-height"</span><span class="p">,</span> <span class="s2">"1.4rem"</span><span class="p">));</span></span>
<span class="code-line"></span>
<span class="code-line"> <span class="nx">$</span><span class="p">.</span><span class="nx">getJSON</span><span class="p">(</span> <span class="s2">"https://api.github.com/gists/07ca2edea6e507bf40f5"</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span></span>
<span class="code-line"></span>
<span class="code-line"> <span class="nx">fortunes</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">parse</span><span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="s2">"quotes.json"</span><span class="p">].</span><span class="nx">content</span><span class="p">);</span></span>
<span class="code-line"> <span class="nx">randomFortune</span> <span class="o">=</span> <span class="nx">fortunes</span><span class="p">[</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">fortunes</span><span class="p">.</span><span class="nx">length</span> <span class="p">)</span> <span class="p">];</span></span>
<span class="code-line"> <span class="k">if</span> <span class="p">(</span> <span class="nx">randomFortune</span><span class="p">.</span><span class="nx">author</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="p">)</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">"#fortune"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span> <span class="s2">"<p>"</span><span class="o">+</span><span class="nx">randomFortune</span><span class="p">.</span><span class="nx">content</span><span class="o">+</span><span class="s2">"</p>"</span> <span class="p">);</span></span>
<span class="code-line"> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">"#fortune"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span> <span class="s2">"<p>"</span><span class="o">+</span><span class="nx">randomFortune</span><span class="p">.</span><span class="nx">content</span><span class="o">+</span><span class="s2">"</p>"</span> <span class="o">+</span> <span class="s2">"<small>"</span> <span class="o">+</span> <span class="nx">randomFortune</span><span class="p">.</span><span class="nx">author</span> <span class="o">+</span> <span class="s2">"</small>"</span><span class="p">);</span></span>
<span class="code-line"> <span class="p">}</span></span>
<span class="code-line"></span>
<span class="code-line"> <span class="nx">$</span><span class="p">(</span><span class="s2">"#fortune"</span><span class="p">).</span><span class="nx">velocity</span><span class="p">(</span><span class="s2">"slideDown"</span><span class="p">,</span> <span class="p">{</span> <span class="nx">duration</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span> <span class="nx">easing</span><span class="o">:</span> <span class="s2">"easeOutQuad"</span> <span class="p">});</span></span>
<span class="code-line"> <span class="p">});</span></span>
<span class="code-line"> <span class="p">});</span></span>
<span class="code-line"> <span class="p"></</span><span class="nt">script</span><span class="p">></span></span>
</pre></div>
<p>最后的效果汝也应该看到了呗~</p>
</div>
<div class="section" id="id4">
<h2><a class="toc-backref" href="#id9">发布</a></h2>
<p>通过几条命令可以发布~</p>
<div class="highlight"><pre><span class="code-line"><span></span>make publish</span>
</pre></div>
<p>然后用git提交到Github就好......</p>
<p>好吧这就是咱的全过程啦(雾)</p>
</div>
新的"约伊兹的萌狼乡手札"诞生啦~2016-01-16T09:35:00+08:002016-01-16T09:35:00+08:00ホロtag:None,2016-01-16:/pelican/new_yoitsu_birth.html
<p>就像标题描述的一样,新的"约伊兹的萌狼乡手札"以Pelican之姿再次出发啦~</p>
<div class="section" id="id2">
<h2><a class="toc-backref" href="#id7">为啥要重做?</a></h2>
<p>原来的 <a class="reference external" href="https://wiki.yoitsu.moe/">约伊兹的萌狼乡手札</a> 是基于MediaWiki搭建的,但是MediaWiki的本来用途并不是来做博客的呐~,不过咱还是一直拖着......直到 <a class="reference external" href="https://www.archlinux.org/news/php-70-packages-released/">Arch Linux 宣布PHP7进入官方软件仓库</a> ,咱升级以后两个关键的RSS扩展都坏掉啦~(应该都知道RSS对于博客型网站的重要性呗~),于是咱痛定思痛决定升级😂</p>
</div>
<div class="section" id="pelican">
<h2><a class="toc-backref" href="#id8">为啥是Pelican?</a></h2>
<p>主要的原因是 <del>人生赢家</del> <a class="reference external" href="/links.html#farseerfc">farseerfc</a> 用的也是Pelican,这样咱可以照着他的经历少走一些弯路......</p>
<p>为啥不用Hexo,Ghost一类的博客系统呢?因为咱不太会设置Node.js(想当初给MediaWiki装可视化编辑器就折腾了半天)😂😂😂</p>
</div>
<div class="section" id="id4">
<h2><a class="toc-backref" href="#id9">那么有哪些问题咧?</a></h2>
<p>首先Pelican用的标记语言是rst(重组的文本)或是MarkDown,不过看情况Markdown是刚加入进来的,处理的还不够好,就先用rst呗~</p>
<p>然而咱并不会rst的语法......只好找来个 <a class="reference external" href="http://docutils.sourceforge.net/docs/ref/rst/restructuredtext.html">语法指南</a> 先照着看......</p>
</div>
<div class="section" id="id6">
<h2><a class="toc-backref" href="#id10">关于旧站的打算?</a></h2>
<p>介于原来的网站也是咱折腾了一阵子才出来的,于是决定先留着.(这个新站的评论要靠它呐~)</p>
<p>咱以后也会继续折腾MediaWiki,顺便在这记下来一些过程和经验呗~</p>
<p>作为新博客的第一篇博文就说到这里,咱具体是怎么做的 <del>请听下回分解</del> 😂😂😂</p>
</div>