非理性繁荣

使用django模板的复杂静态网站

9月15日,2008。根据丹戈蟒蛇

更新时间:2008年9月15日对于任何对本文中讨论的技术感兴趣的人,我把它们放在一起艾马拉语CMS它是一个可重用的模板,用于使用django模板构建复杂的静态网站。


对于我正在进行的项目,我需要创建一个简单的网站:一些截图,一些静态页面,等。最初的倾向是只使用静态HTML和CSS做静态网站,在这一点上,这个久负盛名的解决方案已经运行了几十年,但我想要更好的东西。

最近我一直在为我的静态网站构建越来越复杂的构建脚本,将渲染的降价注入静态模板,或者生成自己的缩略图。这种方法允许静态页面的好处(即使在最糟糕的硬件上也可以疯狂地扩展)。同时消除了编写静态HTML的大部分缺点(更新和修改占用了太多的人力时间)。

昨天,当我盯着复制粘贴一个通用html模板的前景看了六次(希望我以后不需要做任何修改),我对自己说:“该死的,我只使用django模板。”

这是多么甜蜜的想法。

先决条件

此示例将要求您同时拥有丹戈皮尔安装。

开始

  1. 第一,继续创建一个文件夹来存储此项目。我在呼唤我的my_cms.

    mkdir my_cms光盘my_cms
  2. 接下来我们将创建一些文件夹:

    mkdir模板mkdir static mkdir deploy mkdir images
  3. 然后我们将创建一个非常简单的设置.py文件my_cms目录。

    进口操作系统日期时间根路径=操作系统.路径.目录名_文件__#设置目录路径模板目录=操作系统.路径.参加根路径'模板'STATIC_DIR=操作系统.路径.参加根路径“静态”部署目录=操作系统.路径.参加根路径'部署'图像目录=操作系统.路径.参加根路径'图像'#设置一些有用的值静态URL格式=u“/静态/%s静态缩略图格式=静态URL格式%u“缩略图/%s静态图像格式=静态URL格式%u”的形象/%s缩略图大小=一百二十八一百二十八电子邮件=u“您的邮箱地址@gmail.com”#创建默认呈现上下文上下文={'电子邮件'电子邮件W”:datetime.datetime.now (),}PAGES_TO_RENDER=()

    存储在此中的设置设置.py文件夹将在两个生成脚本中使用,尤其是上下文字典将在呈现时传递给模板,因此,它为经常更改的设置和数据块提供了一个很好的位置。

  4. 现在我们将编写构建脚本的初始版本。因为我们还没有创建任何内容,所以会有点简单,但它将采取以下步骤:

    1. 创建部署目录。
    2. 创建部署/静态目录。
    3. 复制的所有内容静态/进入之内部署/静态.
    4. 创建部署/静态/缩略图目录。
    5. 创建部署/静态/映像目录。
    6. 对于中的所有图像图像/,在中创建缩略图和图像部署/静态/缩略图部署/静态/映像目录。
    7. 呈现我们提供的模板列表,把它们复制到部署/目录。

    把它们放在一起,这个构建.py脚本将如下所示:

    进口操作系统舒蒂尔django.template.loader文件进口呈现\到\字符串django.conf.会议进口设置皮尔进口图像操作系统.环境['Django_设置_模块']=U“设置”DEF主要的()#从设置中检索默认上下文词典上下文=设置.上下文部署目录=设置.部署目录打印u“删除现有部署目录,如果有的话……”舒蒂尔.RMTER部署目录忽略\错误=打印u“正在创建deploy/dir…”操作系统.麦克迪尔部署目录打印u“正在将静态/的内容复制到部署/静态…”部署静态目录=操作系统.路径.参加部署目录“静态”舒蒂尔.copytree设置.STATIC_DIR部署静态目录打印u“复制和创建图像/中文件的缩略图…”部署thumb路径=操作系统.路径.参加部署静态目录'缩略图'部署映像路径=操作系统.路径.参加部署静态目录'图像'操作系统.麦克迪尔部署thumb路径操作系统.麦克迪尔部署映像路径图像=[]图像记录={}图像目录=设置.图像目录Thumb_格式=设置.静态缩略图格式图像格式=设置.静态图像格式缩略图尺寸=设置.缩略图大小对于文件名操作系统.列表目录图像目录):只处理以图像文件扩展名结尾的if下一步之前提取=操作系统.路径.splitext文件名如果提取“PNG”,):持续打印U”复制和缩略图%s……”%文件名文件路径=操作系统.路径.参加图像目录文件名感应电动机=图像.开放文件路径感应电动机.保存操作系统.路径.参加部署映像路径文件名“PNG”感应电动机.缩略图缩略图尺寸图像.抗寄生虫感应电动机.保存操作系统.路径.参加部署thumb路径文件名“PNG”#使用图像数据创建dict图像听写={}图像听写['文件名']=文件名图像听写['缩略图']=Thumb_格式%文件名图像听写['图像']=图像格式%文件名图像.追加图像听写#在“hello.png”中输入“hello”之前图像记录[下一步之前]=图像听写上下文['图像']=图像上下文['图像']=图像记录打印u“呈现页面…”=设置.PAGES_TO_RENDER对于打印U”渲染%s……”%提供=呈现\到\字符串上下文页面路径=操作系统.路径.参加部署目录FUT=开放页面路径“W”FUT.提供FUT.关闭()#已完成的生成脚本打印u“完成运行build.py。”如果__name__=“主”主要的()

    诚然,对于一个代码片段(76行代码)来说,它有点长。是的,但没有什么是非常复杂的,以后我们不需要对它做任何更改(我们只需要编辑设置.py相反)。

  5. 在我们开始写模板之前,让我们向图像/文件夹,以便我们可以测试缩略图创建部分。我用了一张旧照片,我的名字是bridge.png.你用什么并不重要,尽管(尽管脚本只设置为接受.png文件,目前)。

    截图就可以了。

  6. 现在我们只需要开始编写模板就可以利用这个闪亮的新构建系统。首先,我们将编写一个基本模板,的文件名基本.html模板/目录。

    <span><span class=“cp”>%<span><span class=“k”>block<span><span class=“nv”>title<span><span class=“cp”>%</span>my cms<span class=“cp”>%<span><span class=“k”>endblock<span><span class=“cp”>%</span><span class=“nt”>
               
                Re=
                “样式表”
                HREF=
                “静态/样式.css”
                >
                
                
                {%
                包括
                “标题.html”
                %}
                {%
                
                内容
                %}{%
                端块
                %}
                {%
                包括
                “页脚.html”
                %}
                
                
               

    然后我们将创建一个标题.html文件模板/.

    欢迎使用我的简单CMS

    和A页脚.html文件模板/.

    
               
                类=
                “页脚”
                >
                

    上次更新时间{{现在γ时间“H:我”}.邮件 HREF= “收件人: {{ 电子邮件 } >这个地址 有问题。

诚然,我们可以很容易地使用现在模板标记而不是存储现在模板上下文中的变量。我这样做只是为了给出一个向模板添加动态静态上下文的示例。

最后,让我们写下index.html文件模板。

{%延伸“基.html”%}{%内容%}{%具有图像桥作为形象%}
        
         HREF=
         
         {{
         图像.image
         }
         
         >
         
          
           类=
           “缩略图”
           SRC=
           
           {{
           图像.缩略图
           }
           
           >
           
           {%
           以…结尾
           %}
           

这是一些简单的静态文本。

类= “缩略图” > {% 对于 形象 图像 %} HREF= {{ 图像.image } > 类= “缩略图” SRC= {{ 图像.缩略图 } > {% 外循环 %}
{% 端块 %}
  • 现在渲染index.html文件页面我们添加到PAGES_TO_RENDER插入设置.py.

    PAGES_TO_RENDER=u“index.html”

    然后转到命令行并键入:

    python构建.py

    这将在部署/目录。

  • 最后,这个基本.html模板已设置为包含静态/style.cssCSS文件,所以让我们以一些非常简单的CSS为例。

    创建我的\cms/static/style.css文件。

    身体{背景色黑色颜色白色}

    然后再次运行生成脚本:

    python构建.py

    还有里面的文件部署/将使用新的CSS文件显示。

  • 与此同时,我们完了。

    相对路径与绝对路径

    值得注意的是,当从本地文件系统加载页面时(而不是将其放入Apache或nginx等Web服务器的根目录中),静态目录的当前路径将无法工作。

    这是因为它期望静态文件夹位于/静态/,它恰好是文件系统的根目录,不是你提供文件的地方。如果你保持你的网页网址平坦(即有类似/index.html的页面,/帮助.html,/关于.html,等)然后你可以改变静态URL格式设置设置.pyu“静态/%s”而不是u“/静态/%s”,即使不部署在根目录中,它也会正确显示。

    扩展理念:缩略图库

    对于这个构建脚本的当前版本,已经出现了一些有用的情况。每次将图像添加到图像文件夹时,然后你也会得到一个免费的缩略图,并将其添加到图像列表和图像记录字典。

    使用这两个工具,您可以按文件名(减去扩展名,因为谁想记住这些?,或者显示它们的缩略图。

    您可以创建网站所有图像的屏幕截图库(如果您正在创建应用程序展示网站,例如)做一些简单的事情,比如将截图放到图像/目录并将此代码添加到模板:

    
           
            类=
            “画廊”
            >
            {%
            对于
            形象
            
            图像
            %}
            
             
              类=
              “缩略图”
              >
              
               
                HREF=
                
                {{
                图像.image
                }
                
                >
                
                 
                  SRC=
                  
                  {{
                  图像.缩略图
                  }
                  
                  >
                  
                  
                 
               
             
           
    {% 外循环 %}

    对于许多网页,这就是您真正需要的所有动态功能。既然你现在提供的是静态文件,那么如果你的网站有超过10个并发访问者,你这些微不足道的副总裁是不会自杀的。

    扩展理念:自动化构建

    许多网站,无论如何,你要缓存半小时的页面,所以在这30分钟里,您的django设置基本上是一个普通的文件服务器。

    相反,您可以使用类似于此脚本的静态解决方案,并且运行一个cron作业,每隔30分钟更新一次静态媒体(甚至每次在目录中修改或添加文件时)。

    尽管对于高度动态的站点来说,这无疑是一个糟糕的解决方案,对于许多站点,这种方法可能就足够了。

    扩展这个想法:渲染标记

    解决这个问题最简单的方法的缺点之一是,您将被困在用HTML编写而不是使用更令人愉快的标记(如markdown或failure)中。

    但不一定是那样的。设想一个简单的标记过滤器的修改,将其用作标记:

    {%降价%}呈现**所有这些!**降价!{%结束标记%}

    需要几条线来实现,打开真正值得一走的大门。

    你甚至可以把这个想法扩展到突出显示模板筛选器的语法,并有简单的语法高亮显示在您的静态网站。

    我相信你已经想到了更多关于如何改进这个框架的想法。有很多低挂水果可以制作更好的静态页面。

    下载

    下载包含此项目的zip文件。

    如果有任何问题或意见,请告诉我!