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

admin
admin
admin
101109
文章
87
评论
2021年4月24日21:49:23评论48 views字数 6578阅读21分55秒阅读模式


前言

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

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2021年4月24日21:49:23
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出)：
                   使用pelican搭建自己的静态博客https://cn-sec.com/archives/243803.html

发表评论

匿名网友 填写信息