使用pelican搭建自己的静态博客

  • A+
所属分类:安全闲碎


前言

最近想要搭建自己的静态博客,去网上搜了一下,直接就选择了搜到的第一个——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环境变量中

使用pelican搭建自己的静态博客

之后创建一个目录用于存放我们的项目文件:


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 osimport 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默认会对第二篇及以后的文章进行一个简化,类似于如下的形式:

使用pelican搭建自己的静态博客

第一篇文章是整个都会展示出来,但是后面的文章只会展示一部分,因此我们只需要为第一篇文章生成目录,这个时候就有一个问题,第一篇文章在专栏页面和正文页面都是完全显示的,因此在这两个地方都要生成目录,在专栏页面正文存在于<aside id="featured" class="body">,在正文页面文章存在于<section id="content" class="body">,因此需要进行判断,如果存在featured这个ID,就要从featured中去取出文章正文进行标题的提取和目录生成,如果不存在,则从content这个ID中处理,这样可以避免,在专栏页面出现后记篇文章的目录也合并到第一篇的目录中的问题,具体代码可以参考网站html源码

本地预览

#!/bin/bashcd /var/www/htmlpython -m SimpleHTTPServer

然后使用如下方式执行该脚本:

. ./shell.sh

这样执行可以将当前工作目录切换为脚本中cd的目录

完整的处理脚本如下:

publish.sh

#!/bin/bashmake publishpython3 /home/x/wochinijiamile/render.pychmod -R 777 /home/x/wochinijiamile/*cp /home/x/wochinijiamile/47yr3w8gbhisrydus.html /var/www/htmlcp /home/x/wochinijiamile/favicon.ico /var/www/htmlcp -r /home/x/wochinijiamile/content/*assets* /var/www/html/theme/imagescp -r /home/x/wochinijiamile/css/* /var/www/html/theme/csscp -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

使用pelican搭建自己的静态博客

使用pelican搭建自己的静态博客

下一步的工作

添加评论功能



免责声明:本站提供安全工具、程序(方法)可能带有攻击性,仅供安全研究与教学之用,风险自负!

转载声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


订阅查看更多复现文章、学习笔记

thelostworld

安全路上,与你并肩前行!!!!

使用pelican搭建自己的静态博客

个人知乎: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

使用pelican搭建自己的静态博客

欢迎添加本公众号作者微信交流,添加时备注一下“公众号”

使用pelican搭建自己的静态博客


本文始发于微信公众号(thelostworld):使用pelican搭建自己的静态博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: