与Hyde建立快速，轻量级的静态网站

最新推荐文章于 2024-10-02 10:53:34 发布

cuxiong8996

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量442

点赞数

文章标签： python java linux 编程语言大数据

原文链接：https://www.ibm.com/developerworks/opensource/library/wa-hyde/index.html

版权

总览

在Web历史的早期，大多数页面只是服务器上某处文件系统上的页面。随着Web变得越来越复杂，Web上具有动态站点，电子商务，大规模发布和应用程序，从简单文件切换到复杂的Web内容管理系统（CMS）和发布工具变得越来越普遍。如今，成千上万的网站都在运行：

IBM®WebSphere®
其他Java®框架或.NET
流行的替代Web发布框架，例如Ruby on Rails和Django
面向社区的CMS，例如WordPress

几乎可以预见，除了最简单的站点之外，任何其他站点都需要具有现代化设施和工作流程的CMS。

但是，像我这样的网络上的许多老手，都记住了较简单的过去的一些优点。一方面，提供静态文件所需的服务器功能更少。另一个问题是备份和内容可移植性。选择CMS或Web发布框架时，您将依靠它来理解您的内容。将您的内容捆绑在数据库表中后，您将无法轻松进入并抓取要共享的文件。迁移到其他基础架构可能是一项艰巨的任务。您还必须依靠专门的工具进行备份和还原。

这些问题的基本特征是透明度。 Web发布框架和CMS通常不是透明的，这意味着需要大量专门知识来了解它们如何存储，管理和提供内容。在某种程度上，除了最简单的网站之外，所有其他网站都不可避免地需要此要求，但是最近出现的项目提供了一些框架上的好处，而又不会丢失在服务器上处理和发布简单文件的核心要素。 Jekyll是一种流行的此类框架。一些开发人员基于Jekyll的核心思想，但是使用一组不同的构建块创建了开源的Hyde项目。 Hyde现在是我选择的Web发布系统。它既简单又提供了强大的功能，并且将其大部分业务限制在处理简单文件以生成静态站点的过程中，从而带来了极大的效率和灵活性。

海德入门

Hyde是一个用Python编写的系统，可让您管理Web开发计算机文件系统上目录中的内容和模板。您可以使用常规文本编辑器和命令行工具来创建或更新内容，也可以根据需要使用IDE。当您准备好查看外观时，Hyde可以生成网站并使用测试Web服务器在本地提供服务。当您对网站在测试模式下的外观感到满意时，可以将生成的静态文件推送到生产Web服务器，以用于Apache，Lighttpd，Nginx或任何可以以闪电般的速度提供文件的Web服务器。

安装与设定

如果您在Mac或Linux系统上进行Web开发，则已经有了所需的主要工具Python。 Python也很容易在Microsoft®Windows®和大多数其他平台上安装。要在您的Python库中pip install hyde ，请根据您的设置调用sudo easy_install hyde或pip install hyde 。这样做时， hyde命令应该可用。首先，使用以下命令在包含典型网站的框架文件集的目录中设置Hyde：

hyde -s $PATH_TO_DIRECTORY create

将$PATH_TO_DIRECTORY替换$PATH_TO_DIRECTORY您要处理内容和模板文件的目录。

上面的命令为网站使用默认布局，但是Hyde允许您选择其他网站布局。如果您想为站点使用一些知名的工具包或设置，例如，如果您使用Twitter Bootstrap框架，或者您知道目标站点将是一个Weblog，则此选项很有用。

如果使用默认布局切换到新创建的站点目录，则应看到以下子目录：

README.markdown content info.yaml layout site.yaml

这些条目中的每一个都提供了Hyde的不同方面。

降价促销

没有多少人喜欢编写HTML，而使用Hyde可以最大限度地减少处理HTML的数量。大多数内容管理系统都提供了避免手工编写HTML的方法，通常使用特殊的“所见即所得”（WYSIWYG）小部件，这些小部件在生成HTML时给您文字处理器的感觉。维基百科是另一种众所周知的方法。您使用特殊字符编辑纯文本以指示各种HTML标记结构。这些被称为轻量级标记语言，Markdown是最受欢迎的样本之一。

Hyde内置了一个处理器，使您可以用Markdown而不是HTML编写网页。我不会在本文中对Markdown进行全面介绍，但是清单1是Markdown格式的丰富内容的一个小示例。

清单1. Markdown格式的丰富内容的示例

For immediate release. **Boulder, Colorado, 1 January 2012** The new year began 
      with a bang.... At city hall a local first nation elder was invited to offer 
      residents a greeting of *Heebee*, or "Hello" in Arapaho, and recorded for the 
      [city Web page](http://www.bouldercolorado.gov/). One resident said his New Year 
      resolutions were to: 
      * Lose weight 
      * Go camping for at least one week in the summer 
      * Pay off one credit card

Markdown处理器（例如与Hyde捆绑在一起的处理器）可以将其转换为HTML，如清单2所示。

清单2.清单1中Markdown内容HTML输出

<p>For immediate release. 
      <strong>Boulder, Colorado, 1 January 2012</strong> 
      The new year began with a bang....</p>
      <p>At city hall a local first nation elder was invited to offer residents 
          a greeting of <em>Heebee</em>, or "Hello" in Arapaho, and recorded 
          for the <a href="http://www.bouldercolorado.gov/">city Web page</a>.</p>
      <p>One resident said his New Year resolutions were to:</p>
      <ul>
          <li>Lose weight</li>
          <li>Go camping for at least one week in the summer</li>
          <li>Pay off one credit card</li>
      </ul>

网站配置和YAML

YAML不是标记语言（YAML）是一些程序员喜欢用于配置文件的语言。用Hyde构建的站点确实需要一些配置，例如，以控制模板的应用方式。 Hyde生成的默认site.yaml文件指定了一些插件，指示如何将某些本地文件目录转换为Web服务器的路径，并提供一些关键页面的基本元数据。

模板和Jinja2

如今，大多数网站都可以从某种程度上受益于模板。模板系统可以帮助您将网站结构和页面的常见元素与每个页面的单独内容分开。例如，如果您查看一个Weblog，有时每个页面HTML一半以上都是在所有条目中复制的样板。模板允许您只表达一次50％的内容，并将其自动应用于所有页面。模板系统还可以支持智能功能，例如自动生成Weblog存档的日历。

Hyde使用与通过Jinja2项目实现的流行Django框架类似的模板语言。每个模板看起来都像HTML，带有一些额外的，特殊的模板命令语法，如下所述。模板位于layout目录中，您可以在其中添加和更新模板，以操纵站点的总体内容轮廓。

您的内容

最重要的是您自己网站的内容，您将其保留在该名称的目录中。通常，每个唯一的网页都有一个文件。每个内容文件均以页面元数据开头，然后具有页面HTML和模板代码。您也可以在此目录中找到支持站点的静态文件，例如图像，样式表和脚本文件。

一个小例子

从美观的网站开始的一种快速方法是下载许多免费的网站设计之一，其中包括网站演示所需HTML，CSS甚至脚本。然后，您可以使用自己的内容替换设计的样板并调整外观。对于Hyde来说，这是一个简单的过程，您不必将自己局限于特定软件的Web设计。在本节中，我选择了一个免费的常规HTML5 / CSS3模板，并将其改编成适用于Hyde的模板。这就是所谓的“极简主义”，由Marija的Zaric（见相关信息），并且可根据知识共享署名（所）3.0，所以你可以为你的信用笔者使用的运用自如，甚至在商业项目，只要模板。您使用该模板的网站将成为该模板的衍生作品。

我下载了模板包并解压缩。它包含一个index.html文件。 Hyde文件夹的content目录还包含一个同名文件，但实际上不是HTML，而是基于base.j2的Jinja2模板。我所做的是通过将其复制为minimalism.j2来将Minimalism文件转换为新模板。同时，我将模板的其他支持文件复制到适当的位置：

cp minimalism/index.html 
      $PATH_TO_DIRECTORY/layout/minimalism.j2 cp minimalism/css/styles.css 
      $PATH_TO_DIRECTORY/content/media/css/ cp minimalism/images/* 
      $PATH_TO_DIRECTORY/content/media/images/

将设计模板转换为Jinja2模板

在网站中，许多页面通常具有相同的基本布局和设计，但内容和元数据有所不同。要将极简主义设计模板转换为可用于多个实际页面的Jinja2模板，请弄清楚所有页面通用的内容以及每个页面特定的内容。看看head从极简元素：

<head> 
          <meta charset="UTF-8"> 
              <title>Minimalism - Home</title> 
              <link rel="icon" href="images/favicon.gif" type="image/x-icon"/> 
              <!--[if lt IE 9]> 
                  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js">
                  </script> 
                  <![endif]-->
              <link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/>
              <link rel="stylesheet" type="text/css" href="css/styles.css"/>
      </head>

在这种情况下，除了标题之外，几乎所有内容都是在页面之间共享的，因此，我仅将标题内容从元数据变成模板字段：

<title>{{ resource.meta.title }}</title>

head元素还链接到图标，样式和其他资源。 Hyde管理此类资源的文件夹及其在最终页面中的URL之间的对应关系，因此您必须更新这些链接以使用特殊的Hyde功能：

<link rel="icon" href="{{ media_url('images/favicon.gif') }}" type="image/x-icon"/>
      ... 
      <link rel="shortcut icon" href="{{ media_url('images/favicon.gif') }}" 
          type="image/x-icon"/> <link rel="stylesheet" 
              href="{{ media_url('css/styles.css') }}" type="text/css"/>

您可以在开发期间内嵌favicon.gif文件。当您将网站投入生产时，最好将图标图像放置在域的根目录，并且显式链接变得多余。

您还需要使用与先前示例相同的模式来更新任何图像或指向JavaScript文件或其他资源的链接。例如，更新后用于展示模板的一个功能图如下所示：

<a class="photo_hover3" href="#"> 
          <img src="{{ media_url('images/picture1.jpg') }}" width="240" 
              height="214" alt="picture1"/></a>

此时，Hyde可以显示模板，就像在您从中下载模板的演示站点上一样。但是您的工作还没有完全完成。现在，您需要设置用有用的内容替换“ Lorem Ipsum”虚拟文本。

填写内容

您可以轻松地在模板中标记要填写页面特定标记的位置。只需添加Jinja块标记。清单3在minimalism.j2的一部分中进行了说明。

清单3.“极简主义”模板的一部分，说明了Jinja块标记

<!--start intro--> 
      {% block intro %} 
      <section id="intro"> 
          <hgroup> 
              <h1>"Simplicity is the ultimate sophistication"
                  <span>- Leonardo da Vinci</span>
              </h1> 
              <h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
                  Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin.
                  Vestibulum condimentum facilisis nulla. In hac habitasse platea 
                  dictumst. Nulla nonummy. Cras quis libero.</h2> 
          </hgroup> 
      </section> 
      {% endblock intro %}

我在模板HTML中添加了{% block intro %}和{% endblock intro %} 。如您所见，我将虚拟文本保留在原处。这很好，因为我将逐页覆盖它。清单4是示例页面，另存为index.html ，它基于minimalism.j2模板，但覆盖了两个模板块。

清单4.基于清单3的示例页面，但是使用HTML覆盖了两个Jinja模板块

--- extends: minimalism.j2 
      title: Strange Case of Dr Jekyll and Mr Hyde 
      description: Tribute to a Victorian classic -- 
      {% block intro %} 
      <section id="intro"> 
      <hgroup>
      <h1><i>Strange Case of Dr Jekyll and Mr Hyde</i>
          <span>—R.L. Stevenson</span></h1>
          <h2>"I knew myself, at the first breath of this new life, 
          to be more wicked, tenfold more wicked, sold a slave to my original evil; 
          and the thought, in that moment, braced and delighted me like wine."</h2>
      </hgroup>
      </section>
      {% endblock intro %}
      {% block group1 %}
      <section class="group1">
          <h3>The author</h3>
          <p><b>Robert Louis Balfour Stevenson</b> (13 November 1850 – 3 December 1894) 
              was a Scottish novelist, poet, essayist and travel writer. His best known 
              books include <i>Treasure Island</i>, <i>Kidnapped</i>, and 
              <i>Strange Case of Dr Jekyll and Mr Hyde</i>.</p> 
          <a class="photo_hover3" href="#">
              <img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/  
                  Robert_Louis_Stevenson_Knox_Series.jpg/ 
                  220px-Robert_Louis_Stevenson_Knox_Series.jpg" 
                  width="220" height="329" alt="R.L. Stevenson"/></a> 
          <a href="#"><span class="button">Read more</span></a>
      </section>
      {% endblock group1 %}

清单5说明了使用Markdown来表达页面内容的一部分，并使用{% filter markdown -%}指令来调用Hyde的内置markdown转换器。

清单5.基于清单3的示例页面，但使用Markdown覆盖了两个Jinja模板块

--- extends: minimalism.j2 title: Strange Case of Dr Jekyll and Mr Hyde 
      description: Tribute to a Victorian classic --- 
      {% block intro %} 
      <section id="intro">
          <hgroup>
             {% filter markdown -%} 
      # *Strange Case of Dr Jekyll and Mr Hyde* 
      ## "I knew myself, at the first breath of this new life, to be more wicked..." 
             {%- endfilter %} 
          </hgroup> 
      </section> 
      {% endblock intro %} 
      {% block group1 %} 
      <section class="group1"> 
          {% filter markdown -%} 
      ### The author 
      **Robert Louis Balfour Stevenson** (13 November 1850 – 3 December 1894) was a 
      Scottish novelist, poet, essayist and travel writer. His best-known books include 
      *Treasure Island*, *Kidnapped*, and *Strange Case of Dr Jekyll and Mr Hyde* 
          {%- endfilter %} 
          <a class="photo_hover3" href="#">
              <img src="//upload.wikimedia.org/wikipedia/commons/thumb/1/1b/ 
                  Robert_Louis_Stevenson_Knox_Series.jpg/ 
                  220px-Robert_Louis_Stevenson_Knox_Series.jpg" 
                  width="220" height="329" alt="R.L. Stevenson"/>
          </a> 
          <a href="#"><span class="button">Read more</span></a> 
      </section> 
      {% endblock group1 %}

仅过滤器指令中的内容被解释为减价。请注意，这些位是如何向左对齐的，这与HTML位不同，HTML位是根据块元素缩进的。这是因为缩进在Markdown中很重要，而在HTML中不重要。

摘要

我仅涉及Jinja模板和Hyde的其他组件中可用功能的表面。这样做之所以行之有效是因为Hyde的设计宗旨是，在需要增强自动化和工作流程时，您可以从简单的功能开始，逐步发展到更复杂的功能。您可以使用简单的块（可以嵌套）来开发许多简单的网页。如果您需要自动编译的Weblog等，Hyde的默认布局提供了一个很好的示例。

总体而言，海德为您提供内容管理系统和低级Web发布框架的大多数功能。使用文件系统作为后备存储，您的系统很少被遮盖或变得神秘。我认为这是一个很大的好处，您现在已经掌握了足够的基础知识，可以使用Hyde和您选择的Web设计模板来创建一个简单的网页。

翻译自: https://www.ibm.com/developerworks/opensource/library/wa-hyde/index.html

cuxiong8996

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫