说好的下一期来啦~,新的"约伊兹的萌狼乡手札"是怎么样诞生呐~马上就告诉汝呗~
安装Pelican然后进行初始设置
在咱写这篇文章时, farsserfc 已经把Pelican打好包放进Arch Linux 官方软件仓库啦好棒~
Arch Linux用户可以这样安装:
sudo pacman -S pelican
其它操作系统可以通过pip安装:
sudo pip install pelican
接着运行设置程序建立一个工作文件夹:
pelican-quickstart
接着开始挖坑呗~,用 reStructuredText 或 Markdown 开始写文章然后放到
contents
文件夹里,像这样:
(reStructuredText)
这里是标题
===========================================
:lang: 这里填语言
:date: 写文章的日期
:Category: 分类
这里是内容
(Markdown)
Title: 这里是标题
date: 写文章的日期
Category: 分类
这里是内容
然后运行一个命令来测试
make html # 生成html
make serve # 在127.0.0.1:8000 运行一个测试服务器.
然后打开浏览器输入
localhost:8000
，你就能看到一个初生的很
修改 Pelican的主题
可能是一时抽风没找到合适的Material Design风格的框架，于是走上了Metro UI CSS的不归路......
Metro UI CSS的项目主页在这里 http://metroui.org.ua
咱拿了pelican内置的simple主题做起步,把Metro UI CSS文件夹里的
/css
和
/js
复制到主题的
/statics
文件夹里.
现在的文件夹结构大概像这样:
. ├── cache 生成頁面的 pickle 緩存 ├── content 讀取的全部內容 │ ├── <categories> 按分類存放的文章 │ ├── pages 像 About 這樣的固定頁面 │ └── static 文章內用到的靜態內容 ├── drafts 文章的草稿箱 ├── Makefile 生成用的 makefile ├── pelicanconf.py 測試時用的快速 Pelican 配置 ├── publishconf.py 部署時用的耗時 Pelican 配置 ├── output -> ../kenookamihoro.github.io ├── plugins -> ../plugins └── theme -> ../yoitsu
然后这个内容 repo 中的三个符号链接分别指向三个子 repo（为啥没用
git submodule
? 因为咱技术不精还不会用......）。
theme 指向 yoitsu ，是咱修改过的 pelican 主题啦。
plugins 指向 pelican-plugins
最后 output 指向 kenookamihoro.github.io 也就是发布的静态网站啦。
而主题文件夹的结构大概像这样：
. ├── static 主题中用到的静态文件，例如js和css ├── templates 供jinja使用的模板页面 │ ├── archives.html 文章归档 │ ├── article.html 每个文章 │ ├── author.html 作者 │ ├── base.html 所有模板的基础 │ ├── category.html 分类 │ ├── index.html 首页 │ ├── page.html 每个页面 │ ├── pageination.html 分页 │ ├── search.html 搜索 │ └── tag.html 标签 └──
然后记得修改pelican.conf告诉Pelican那些页面是模板那些页面是直接生成的呐~
# DIRECT_TEMPLATES 告诉Pelican哪些页面是直接用来生成特定页面的......
DIRECT_TEMPLATES = (('index', 'archives', 'search'))
接下来开始调教主题呗~,直接给出官方的教程呗~ Pelican doc:Creating Themes
经过一番
PS:咱自己做的这套主题还木有到能拿来复用的程度(原因主要是咱有很多是直接写死在主题里的设置),所以这又是一个坑呗~
装插件
作为一套博客系统,Pelican自然有很多的插件可以安装呐~,不信的话去看看`pelican-plugins里有多少插件呗~ <https://github.com/getpelican/pelican-plugins>`_
咱启用的插件有这些:
PLUGINS = ["better_codeblock_line_numbering",
'tipue_search',
'neighbors',
'series',
"render_math",
'extract_toc',
'tag_cloud',
'sitemap',
'summary',
'bootstrapify',
'twitter_bootstrap_rst_directives']
具体的设置流程嘛,请允许咱引用一下 farseerfc.me:重新設計了 Pelican 的主題與插件 呗~
实现动态格言
动态格言的实现来自 fiveyellowmice 啦~(咱不是JavaScript专家呐~,就不谈具体的实现了呗~)
首先是一段修改某一个元素的类的JavaScript(当然还需要 velocity ):
<script src="/theme/js/velocity.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
$(".menu-button").on("touchstart", function() {
$(".menu-wrapper").removeClass("trigger");
if ( $(".nav-items").is(":visible") ) {
$(".nav-items").velocity("finish")
.velocity("slideUp", { delay: 200, duration: 400, easing: "easeInQuad" })
.velocity("fadeOut", { delay: 200, duration: 400, easing: "easeInQuad", queue: false });
} else {
$(".nav-items").velocity("finish")
.velocity("slideDown", { delay: 200, duration: 400, easing: "easeOutQuad" })
.velocity("fadeIn", { delay: 200, duration: 400, easing: "easeOutQuad", queue: false });
}
});
});
</script>
然后新建一个 Github gist 填上动态格言,像这样(大括号里的内容可以添加多个):
[
{
"content":"example",
"author":"someone"
},
]
再写个JavaScript来从JSON中提取格言然后填到html里:
<script>
document.addEventListener("DOMContentLoaded", function() {
$(".site-description").after($("<blockquote>").attr("id", "fortune").css("display", "none"));
$(".site-description").after($("<blockquote>").attr("id", "fortune").css("line-height", "1.4rem"));
$.getJSON( "https://api.github.com/gists/07ca2edea6e507bf40f5", function(data) {
fortunes = JSON.parse(data.files["quotes.json"].content);
randomFortune = fortunes[ Math.floor( Math.random() * fortunes.length ) ];
if ( randomFortune.author === undefined ) {
$("#fortune").html( "<p>"+randomFortune.content+"</p>" );
} else {
$("#fortune").html( "<p>"+randomFortune.content+"</p>" + "<small>" + randomFortune.author + "</small>");
}
$("#fortune").velocity("slideDown", { duration: 400, easing: "easeOutQuad" });
});
});
</script>
最后的效果汝也应该看到了呗~