前言
最近想要搭建自己的静态博客,去网上搜了一下,直接就选择了搜到的第一个——pelican
我把网站项目托管到了码云,需要代码的朋友可以在公众号后台留言
最后的效果可以在http://144.34.164.217/查看最终的效果
环境搭建
pelican的环境搭建相当简单,首先我们安装管理python包和python虚拟环境的工具pipenv(推荐使用python3进行安装)
python3 -m pip install --user pipenv
安装完成后,使用sudo find / -type f -name "pipenv"
找到pipenv所在的位置,然后使用export临时添加到path环境变量中
之后创建一个目录用于存放我们的项目文件:
mkdir /home/x/wochinijiamile
cd /home/x/wochinijiamile
pipenv install --three #选择python3安装虚拟环境
pipenv shell #用于激活当前的虚拟环境
pipenv install markdown pelican#安装必要的依赖
在content目录下编辑一个md文件内容如下:
Title: My First Review
Date: 2010-12-03 10:20
Category: Review
之后执行make publish,会在output目录下生成同名的html文件,会分类到Review目录下,创建日期为2010-12-03 10:20
,如果没有在makrdown文件中加上这些==元数据==,那么在生成html文件时会报错
此时我们的pelican环境就已经搭建好了,非常的方便
对网站进行改造
添加统计脚本并更换背景
因为觉着改pelican和jinja的源代码太麻烦,就直接写了一个render.py对生成的html文件进行处理
实现的方式就是把footer部分替换成我们自己的
因为是多行字符串的替换,所以直接替换的话会比较麻烦,我实现的方式就是先将html文件处理成单行的
fin = open(dir, "rt")
lines = fin.readlines()
data = 'biaojizifuchuangiuqerygisdgfjks'.join([line.replace('n', '') for line in lines])
上面的代码就是将换行替换为空,然后使用自定义的链接符进行连接,在后面的代码中将要替换的内容替换完成后,再将链接符替换为换行符,这样做的目的是防止文章中的源代码也被处理成单行的
另外,通过给所有的html文件添加样式表对网站的背景做了调整,类似于网格的效果,其实就是由一个小像素点重复出来的
添加的样式表的完整内容如下:
body {
background: url(/theme/images/page_bg.gif) repeat left top;
}
img {
max-width: 100%;
max-height: 100%;
}
.post-info {
background-color: yellow;
}
然后我们再使用replace方法进行替换即可,完整代码如下:
import os
import fileinput
def get_filelist(dir):
newDir = dir
if os.path.isfile(dir):
if os.path.splitext(dir)[-1] == ".html":
replace(dir)
elif os.path.isdir(dir):
for s in os.listdir(dir):
newDir=os.path.join(dir,s)
get_filelist(newDir)
def replace(dir):
after = """<footer id="contentinfo" class="body"> <address id="about" class="vcard body"> Proudly powered by <a href="http://getpelican.com/">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>. </address><!-- /#about --><p>The theme is by <a href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/">Smashing Magazine</a>, thanks!<br/><script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278862900'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278862900%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script><script> let item = document.getElementsByTagName("img"); for (let index = 0; index < item.length; index++) { let class_name = item[index].getAttribute("src"); if(class_name.indexOf("assets") != -1) item[index].setAttribute("src", "/theme/images/" + class_name) }</script></p> </footer><!-- /#contentinfo -->"""
before = """<footer id="contentinfo" class="body">biaojizifuchuangiuqerygisdgfjks <address id="about" class="vcard body">biaojizifuchuangiuqerygisdgfjks Proudly powered by <a href="http://getpelican.com/">Pelican</a>, which takes great advantage of <a href="http://python.org">Python</a>.biaojizifuchuangiuqerygisdgfjks </address><!-- /#about -->biaojizifuchuangiuqerygisdgfjksbiaojizifuchuangiuqerygisdgfjks <p>The theme is by <a href="http://coding.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/">Smashing Magazine</a>, thanks!</p>biaojizifuchuangiuqerygisdgfjks </footer><!-- /#contentinfo -->"""
before1 = """<link rel="stylesheet" href="./theme/css/main.css" />"""
after1 = """<link rel="stylesheet" href="./theme/css/main.css" /><link rel="stylesheet" href="/theme/css/1.css" />"""
#read input file
print(dir)
fin = open(dir, "rt")
#read file contents to string
lines = fin.readlines()
data = 'biaojizifuchuangiuqerygisdgfjks'.join([line.replace('n', '') for line in lines])
#replace all occurrences of the required string
data = data.replace(before, after)
data = data.replace(before1, after1)
data = data.replace('biaojizifuchuangiuqerygisdgfjks', 'n')
#close the input file
fin.close()
#open the input file in write mode
fin = open(dir, "wt")
#overrite the input file with the resulting data
fin.write(data)
#close the file
fin.close()
if __name__ =="__main__":
get_filelist("/var/www/html")
解决图片路径问题
因为我本地使用的是typora进行文章的编写,所以文章中的图片都是存储在当前目录下的以文件名.assets
命名的文件夹中,pelican在生成的html文件的图片路径也是文件名.assets/xxx.png
,这样的问题是在一些页面中会显示不出来,因此可以将其改成绝对路径以解决此问题
首先将content目录下的所有包含assets字符串的目录复制到输出目录/var/www/html/theme/images
中,然后使用上面加入网站统计脚本的时候加入的另一个js脚本对当前dom树中的所有img节点进行处理,代码如下:
let item = document.getElementsByTagName("img");
for (let index = 0; index < item.length; index++) {
let class_name = item[index].getAttribute("src");
if (class_name.indexOf("assets") != -1) item[index].setAttribute("src", "/theme/images/" + class_name)
}
生成目录
其实要想生成目录,越是挺简单的,只需要添加一个js脚本即可
<script>
var toc = "";
var level = 0;
obj = document.getElementById("featured");
if (obj == null) {
document.getElementById("content").innerHTML = document.getElementById("content").innerHTML.replace(/<h([d])>([^<]+)</h([d])>/gi, function(str, openLevel, titleText, closeLevel) {
if (openLevel != closeLevel) {
return str;
}
if (openLevel > level) {
toc += (new Array(openLevel - level + 1)).join("<ul>");
} else if (openLevel < level) {
toc += (new Array(level - openLevel + 1)).join("</ul>");
}
level = parseInt(openLevel);
var anchor = titleText.replace(/ /g, "_");
toc += `<li><a href="#` + anchor + `">` + titleText + "</a></li>";
return `<h` + openLevel + ` class="wusoifghbsudfgbuslfhnsdl"><a name="` + anchor + `">` + titleText + "</a></h" + closeLevel + ">";
});
if (level) {
toc += (new Array(level + 1)).join("</ul>");
}
document.getElementById("toc").innerHTML += toc;
}
</script>
这里有个地方需要注意,那就是如果在一个分类里面有两篇或者以上的文章,那么pelican默认会对第二篇及以后的文章进行一个简化,类似于如下的形式:
第一篇文章是整个都会展示出来,但是后面的文章只会展示一部分,因此我们只需要为第一篇文章生成目录,这个时候就有一个问题,第一篇文章在专栏页面和正文页面都是完全显示的,因此在这两个地方都要生成目录,在专栏页面正文存在于<aside id="featured" class="body">
,在正文页面文章存在于<section id="content" class="body">
,因此需要进行判断,如果存在featured
这个ID,就要从featured
中去取出文章正文进行标题的提取和目录生成,如果不存在,则从content
这个ID中处理,这样可以避免,在专栏页面出现后记篇文章的目录也合并到第一篇的目录中的问题,具体代码可以参考网站html源码
本地预览
cd /var/www/html
python -m SimpleHTTPServer
然后使用如下方式执行该脚本:
. ./shell.sh
这样执行可以将当前工作目录切换为脚本中cd的目录
完整的处理脚本如下:
publish.sh
make publish
python3 /home/x/wochinijiamile/render.py
chmod -R 777 /home/x/wochinijiamile/*
cp /home/x/wochinijiamile/47yr3w8gbhisrydus.html /var/www/html
cp /home/x/wochinijiamile/favicon.ico /var/www/html
cp -r /home/x/wochinijiamile/content/*assets* /var/www/html/theme/images
cp -r /home/x/wochinijiamile/css/* /var/www/html/theme/css
cp -r /home/x/wochinijiamile/images/* /var/www/html/theme/images
. /home/x/wochinijiamile/1.sh
1.sh的内容如下
#!/bin/bash
cd /var/www/html
python -m SimpleHTTPServer
然后使用如下方式执行该脚本:
. ./shell.sh
这样执行可以将当前工作目录切换为脚本中cd的目录
使用shot.sh调用publish.sh:
shot.sh
#!/bin/bash
sudo /home/x/wochinijiamile/publish.sh
下一步的工作
添加评论功能
免责声明:本站提供安全工具、程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负!
转载声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
订阅查看更多复现文章、学习笔记
thelostworld
安全路上,与你并肩前行!!!!
个人知乎:https://www.zhihu.com/people/fu-wei-43-69/columns
个人简书:https://www.jianshu.com/u/bf0e38a8d400
个人CSDN:https://blog.csdn.net/qq_37602797/category_10169006.html
个人博客园:https://www.cnblogs.com/thelostworld/
FREEBUF主页:https://www.freebuf.com/author/thelostworld?type=article
欢迎添加本公众号作者微信交流,添加时备注一下“公众号”
本文始发于微信公众号(thelostworld):使用pelican搭建自己的静态博客
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论