前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >静态站点生成器:makesite.py

静态站点生成器:makesite.py

作者头像
IT派
发布2018-07-30 14:47:32
2K0
发布2018-07-30 14:47:32
举报
文章被收录于专栏:IT派

通过在Python中编写自己的简单、轻量级、无魔法的静态站点生成器,完全控制静态网站/博客生成。对的!重新发明轮子,伙计们!

目录

  • 简介
  • 但是为什么呢?
  • 开始
  • 代码
  • 布局
  • 内容
  • 信用
  • 许可证
  • 支持

简介

这个库包含一个含两个静态博客和几个静态页面的网站例子的源代码。网站通过运行makesite.py生成。结果像这个例子(https://tmug.github.io/makesite-demo)。就这样!

因此,请继续,创建此库的分支,替换成自己的内容,并生成静态网站。 就这么简单!

您可以自由地为博客或网站复制,使用和修改此项目,因此请继续并分发此库并将其作为自己的项目。 如果愿意,可以更改布局,根据自己的想法改进样式表,如果需要可以增强makesite.py,并按照需要开发网站/博客。

但是为什么?

为了娱乐和利润! 好吧,也许不是为了赢利,而是希望有趣。

你有没有使用像Jekyll这样流行的静态网站生成器来生成你的博客? 我也有过。 它很简单,很棒。 但是,您是否渴望使用更简单的方式来生成您的博客? 你喜欢Python吗? 也许你也萌生过编写自己的静态网站生成器的想法,但你认为要付出相当大的工作量? 如果你对这些问题的回答“是”,那么这个项目就是为你准备的。

通过makesite.py,你可以完全控制。 没有隐藏的魔法! 无需阅读任何文档即可了解其工作原理。 没有必要学习如何编写配置文件来产生一些预期的效果。

通过makesite.py:

  • 代码即是文档。
  • 代码即是配置。

一切都按照简单易懂的Python代码进行布置,供您阅读和增强。 它少于120行代码(不包括注释,文档字符串和空白行)。 它让你快速开始。 你只需要执行makesite.py。

您可以在几分钟内开发一个体面的网站/博客,然后您可以开始修改源代码,布局和样式表,以自定义您的网站的外观和感觉,从而达到满意的效果。

开始

本节提供了一些快速步骤,让您尽快开始。

要在本地系统上进行快速演示,只需输入以下命令:

如果你没有make,但有Python 3.x,输入这个命令:

注意:在某些环境中,您可能需要使用python而不是python3来调用Python 3.x.

如果您只有Python 2.7,请输入以下命令:

然后访问http//localhost:8000/。 它应该看起来像这样。

注意:您可以使用Python 2.7或Python 3.x运行makesite.py。

您可能会在前一个命令的输出中看到一些Markdown的警告消息无法渲染。 这是由于这个项目中的一个示例博客有一些用Markdown编写的帖子。 要正确渲染它们,请使用以下命令安装commonmark软件包:

然后再次尝试上一步。

对于一个面向互联网的网站,您将静态网站/博客放在某个托管服务和/或Web服务器,如Apache HTTP服务器,Nginx等。您可能只需要生成静态文件,并知道这些静态文件在哪里,并将它们移动到您的托管位置。

如果您有make命令,请输入以下命令以生成您的网站:

如果你没有make但是有python3,输入这个命令:

注意:在某些环境中,您可能需要使用python而不是python3来调用Python 3.x.

如果你只有python,输入这个命令:

_site目录包含整个生成的网站。 该目录的内容可以被复制到您的网站托管位置。

代码

现在您已经知道如何生成此项目附带的静态网站,现在该查看makesite.py的功能了。 您可能并不需要阅读整个部分。 源代码非常明了,但以防万一,您需要详细了解它的功能,下面是详细信息:

  1. main()函数是网站生成的起点。 它调用了完成网站生成所需的其他功能。
  2. 首先它从头开始创建一个全新的_site目录。 静态目录中的所有文件都将复制到此目录中。 稍后将生成静态网站并写入此目录。
  3. 然后它创建一个带有一些默认参数的params字典。这个字典被传递给其他功能。其他函数将从此字典中选择值以填充布局模板文件中的占位符。 例如,让我们以副标题参数为例。它被设置为我们的示例网站的虚拟品牌名称:“Lorem Ipsum”。我们希望每个页面在标题中包含此品牌名称作为后缀。例如,关于页面的标题中有“About - Lorem Ipsum”。现在查看用作静态网站中所有页面布局的页面布局模板。此布局文件使用{{subtitle}}语法表示它是一个占位符,应该在呈现模板时填充该占位符。 另一个值得注意的事情是,内容文件可以通过在内容标题中定义自己的参数来覆盖这些参数。例如,查看主页的内容文件。在其内容标题中,即具有键值对的顶部的HTML注释中,它定义了一个名为title的新参数并且覆盖了副标题参数。 稍后我们将讨论占位符和内容标题的语法。这很简单。
  4. 然后加载所有布局模板。 这个项目中有6个。 layout/page.html:它包含适用于所有页面的基本模板。 它以和开头,并以结尾。 此模板中的{{content}}占位符将替换为页面的实际内容。 例如,对于关于页面,将{{content}}占位符替换为content/about.html中的全部内容。 这是通过在代码中进一步调用make_pages()完成的。 layout/post.html:它包含博客文章的模板。 请注意,它不以开头,也不包含和标签。 这不是一个完整的独立模板。 该模板仅定义博客帖子特定的一小部分博客帖子页面。 它包含HTML代码和占位符,用于显示博客文章的标题,发布日期和作者。 此模板必须与页面布局模板组合才能创建最终的独立模板。 为此,我们用页面布局模板中的HTML代码替换页面布局模板中的{{content}}占位符以获取最终的独立模板。 这是通过在代码中进一步调用render()来完成的。 生成的独立模板仍然包含帖子布局模板中的{{content}}占位符。 然后将此{{content}}占位符替换为博客文章中的实际内容。 layout/list.html:它包含博客列表页面的模板,该页面按反向时间顺序列出博客中的所有帖子。 除了在顶部提供一个标题和在底部提供一个RSS链接之外,这个模板并没有太多的作用。 {{content}}占位符以反向时间顺序填充博客帖子列表。 就像帖子版面模板一样,该模板必须与页面布局模板结合才能到达最终的独立模板。 layout/item.html:它包含博客列表页面中每个博客文章项目的模板。 make_list()函数使用此模板呈现每个博客文章项目,并将它们插入到列表布局模板中以创建博客列表页面。 layout/feed.xml:它包含RSS源的XML模板。 {{content}}占位符填充了订阅项目列表。 layout/item.xml:它包含每个要收入到RSS源中的博客文章项目的XML模板。 make_list()函数使用此模板呈现每个博客文章项目,并将它们插入到layout/feed.xml模板中以创建完整的RSS源。
  5. 加载完所有布局模板后,它会调用render()以将帖子布局模板与页面布局模板组合起来,以形成最终的独立帖子模板。 同样,它将列表布局模板模板与页面布局模板组合在一起以形成最终列表模板。
  6. 然后它会两次调用make_pages()来呈现主页和其他几个网站页面:联系页面和关于页面。
  7. 然后,它再两次调用make_pages()来呈现两个博客:一个名为blog,另一个名为news。 请注意,make_pages()调用接受三个位置参数: 作为glob模式提供的内容源文件的路径。 将路径模板输出为字符串。 布局模板代码作为一个字符串。

这三个位置参数之后是关键字参数。 这些关键字参数用作输出路径模板和布局模板中的模板参数,以便用占位符的相应值替换占位符。

如上面第2点所述,内容文件可以在其内容头中覆盖这些参数。

  1. 然后,它会两次调用make_list()来呈现两个博客的博客列表页面。 这些调用与make_pages()调用非常相似。 make_list()调用只有两点不同: 再次阅读由make_pages()读取的相同博客帖子是没有意义的,因此我们不会将路径传递给内容源文件,而是将make_pages()返回的博客帖子按时间顺序排序的反向排序索引提供给make_list()。 还有一个额外的参数可以将项目布局模板作为字符串传递。
  2. 最后,它再两次调用make_list()来为这两个博客生成RSS源。 除了我们在这里使用源XML模板来生成RSS源之外,这些调用与以前的调用没有什么不同。 快速回顾一下,我们创建一个_site目录来编写生成的静态网站,定义一些默认参数,加载所有布局模板,然后调用make_pages()来渲染带有这些模板的页面和博客帖子,调用make_list()来呈现博客列表页面和RSS源。 就这样! 看看make_pages()和make_list()函数是如何实现的。 它们非常简单,每个函数代码少于20行。 一旦你熟悉这段代码,你可以开始修改它来添加更多的博客或减少它们。 例如,您可能不需要新闻博客,因此您可以删除“新闻”的make_pages()和make_list()调用及其content/news处的内容。

布局

在这个项目中,布局模板文件位于布局目录中。 但他们不一定要在那里。 您可以将布局文件放在任何地方并相应地更新makesite.py。

本项目附带的makesite.py的源代码理解布局模板中占位符的概念。 模板占位符具有以下语法:

围绕的{{之前,}}之后的任何空白都会被忽略。应该是一个有效的Python标识符。 以下是模板占位符的示例:

这是在makesite.py中已经实现的一个非常简单的模板机制。 对于简单的网站或博客,这应该足够了。 如果您需要更复杂的模板引擎(如Jinja2或Cheetah),则需要修改makesite.py以添加对它的支持。

内容

在这个项目中,内容文件位于内容目录中。 大多数内容文件都是用HTML编写的。 但是,博客博客的内容文件是用Markdown编写的。

makesite.py支持内容文件中标题的概念。 每个内容文件可以以包含标题的一个或多个连续HTML注释开始。 每个头文件都有以下语法:

在标记之前,之后和周围的任何空白都将被忽略。 以下是一些示例标题:

它会在每个内容文件的顶部查找标题。 只要遇到一些非标题文本,就不会检查该标题的其余内容。

答谢

致谢:

Susam的文档和单元测试。

Keith Gaughan改进了模板的单次渲染。

许可

这是免费的开源软件。 根据MIT许可证的条款,您可以使用,复制,修改,合并,发布,分发,再许可和/或出售其副本。

本软件按“原样”提供,不附有任何明示或暗示的担保。 详细信息请参见MIT许可证。

支持

要报告错误,提出改进建议或提出问题,请访问https://github.com/sunainapai/makesite/issues。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IT派 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档