使用 Hyde 快速构建轻量级的静态站点（2）一个小示例

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-10-18 20:02 | 只看该作者

使用 Hyde 快速构建轻量级的静态站点（2）一个小示例

一个小示例获得漂亮网站的一个快速方法就是下载一个免费 Web 设计，其中包括 HTML、CSS，甚至还包括呈现站点所需的脚本。然后将该设计的样板文件替换成您自己的内容，并进行外观调整。这是一个简单的使用 Hyde 的过程，对于该软件，不一定非要进行 Web 设计。在本小节中，我选择了一个常规的免费 HTML5/CSS3 ，然后对其进行修改，让它使用 Hyde。Marija Zaric 将其称为 “Minimalism”（参阅），在 Creative Commons Attribution (by) 3.0 下提供，以便您可以免费使用它，甚至可将它用于商业项目，只要注明了所使用模板的作者。使用该模板的网站将成为该模板的衍生作品。
下载模板包并对其进行解压。其中包含一个 index.html 文件。Hyde 文件夹的 content 目录中也包含一个同名文件，但实际上该文件不是一个 HTML，而是一个基于 base.j2 的 Jinja2 模板，我要做的就是将 Minimalism 文件转化成一个新模板，将其作为 minimalism.j2 复制。同时将该模板的其他支持文件复制到适当位置：

1
2
3
4

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 模板在网站中，许多页面通常具有相同的基础布局和设计，只在内容和元数据上有所区别。要将 Minimalism 设计模板变成一个可用于多个页面的 Jinja2 模板，首先需要找出所有页面的共同点和各个页面的特有内容。查看 Minimalism 中的 head 元素：

1
2
3
4
5
6
7
8
9
10
11

<head>
<meta charset="UTF-8">
      <title>Minimalism - Home</title>
      <link rel="icon" href="images/favicon.gif" type="image/x-icon"/>
      
      <link rel="shortcut icon" href="images/favicon.gif" type="image/x-icon"/>
      <link rel="stylesheet" type="text/css" href="css/styles.css"/>
</head>

在本例中，除了标题是跨页面共享的以外，一切都很完美，因此，只需将标题内容从元数据转化成模板即可：

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

head 元素还可以链接图标、样式和其他资源。Hyde 管理文件夹之间的通信，生成页面中的资源和其他 URL，因此，您必须更新这些链接来使用特殊的 Hyde 函数：

1
2
3
4
5

在开发过程中，还可以将 favicon.gif 文件设置为联机状态。当您开始建立站点时，最好将图标图像放在域的根目录下，显示链接将会变得多余。
您还需要将图像或链接更新到 JavaScript 文件或其他资源，使用与上述示例相同的模式。例如，用于展示模板的功能图像在更新之后看起来如下所示：

1
2
3

此时，Hyde 可以显示模板，就像下载该模板的演示站点那样。但您的工作还没有全部结束，现在您需要将 “Lorem Ipsum” 虚拟文字替换成有用的内容。
填充内容您可以轻松地在模板上对您想要填入页面特定标记的地方进行标记。只需添加 Jinja 块标记即可。展示了 minimalism.j2 的一部分。
清单 3. 展示 Jinja 块标记的 "Minimalism" 模板部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{% 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 %} 。如您所见，我将虚拟文字留在原处。这无关紧要，随后我会逐页进行重写。是一个样例页面，保存为 index.html，该页面基于 minimalism.j2模板，只重写了两个模板块。
清单 4. 使用 HTML 展示了清单 3 的页面示例，并重写了两个 Jinja 模板块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

--- 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 %}

展示了如何使用 Markdown 来表示部分页面内容，并使用 {% filter markdown -%} 命令来调用 Hyde 内置的 Markdown 转换器。
清单 5. 使用 Markdown 展示了清单 3 的页面示例，并重写了两个 Jinja 模板块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

--- 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 %}

只需将过滤器指令中的内容解释为 markdown。请注意，这些二进制数是左对齐的，这与 HTML 代码不同，HTML 代码是根据块元素格式进行缩进的。这是因为缩进在 Markdown 中很重要，而这在 HTML 中并不重要。

收藏分享评分

回复引用

订阅 TOP

返回列表