首页>ASP源码>其他类别
下载

微小静态

logo.png

一个灵活且易于使用的小型静态网站生成器。它很灵活，因为没有必需的网站结构，也没有任何特定于博客的概念。它很容易使用，因为我们可以从一个标准的 HTML 站点开始，逐步引入tinystatic。

tinystatic 的概念很简单：从输入目录中的每个文件，在输出目录中创建一个文件，然后我们可以将其用作网络服务器的公共目录。 tinystatic 如何生成输出文件取决于输入文件扩展名：Markdown 被转换为 HTML，而 CSS、JS 和图像则被简单地复制。对于 Markdown 和 HTML 文件，您可以在文件顶部指定元数据。通过在此文件元数据中指定模板，并在单独的目录中提供模板，您可以使用 Go 的 HTML 模板引擎。这里是典型博客网站的示例以及快速入门指南，请参见下文。

安装

预构建的二进制文件

下载适合您的操作系统的tinystatic 二进制文件：

  • Linux
  • macOS

（可选）将二进制文件添加到 shell 路径，方法是将二进制文件放入现有目录（如/usr/bin或将二进制文件的父目录添加到路径变量。

如果您将tinystatic添加到路径中，您应该能够调用

tinystatic -help

否则，您需要在调用时指定tinystatic二进制文件的路径

/path/to/tinystatic -help

从源代码编译

如果您不想使用预先构建的二进制文件，则需要安装 Golang 编译器来编译tinystatic。然后，您可以通过运行安装tinystatic 

go install -u github.com/julvo/tinystatic

或者通过克隆存储库并在此存储库的根目录中运行go install或go build 。

快速启动

这是一个 10 分钟的教程，我们构建一个小型博客，从单个 HTML 页面开始，一一介绍tinystatic 的功能。

首先，我们创建一个名为routes的文件夹。在此文件夹中，我们创建一个 HTML 文件index.html其中包含以下内容： 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > Welcome to our blog </ h1 >
  </ body >
</ html >

现在，我们可以第一次运行tinystatic 。默认情况下，tinystatic 期望在包含routes目录的目录中调用，但您可以使用-routes参数更改它。运行命令后，您应该会看到routes文件夹旁边出现一个文件夹output 。我们的文件结构现在如下所示： 

 my-blog/
    routes/
        index.html
    output/
        index.html

我们现在可以在输出目录中运行一个网络服务器，例如使用Python的内置服务器在http://localhost:8000上打开我们的网站： 

 cd output
python3 -m http.server

到目前为止，tinystatic 所做的只是将index.html从routes复制到output - 并不是那么有用，但请坚持...

让我们向routes添加第二个HTML文件，例如about.html ： 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      < h1 > About us </ h1 >
  </ body >
</ html >

再次运行tinystatic并且我们的网络服务器仍在运行后，我们现在可以导航到http://localhost:8000/about 。请注意，此路由中不再有.html ，因为tinystatic 创建了一个about单个index.html文件夹，如下所示： 

 output/
    index.html
    about/
        index.html

我们不喜欢当前页面的地方是所有基本 HTML 结构的重复。对index.html和about.html使用共享模板不是更好吗？为此，我们在routes文件夹旁边创建一个名为templates的文件夹，并在其中放置一个 HTML 文件default.html ： 

 my-blog/
    routes/
        index.html
        about.html
    templates/
        default.html

default.html的内容应该是： 

 <!doctype html >
< html >
  < head >
    < title > Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

另外，我们将routes/index.html的内容更改为

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >
{{end}}

以及routes/about.html的内容

---
template: default.html
---
{{define "body"}}
< h1 > About us </ h1 >
{{end}}

再次运行tinystatic时，输出与之前的输出相同，但我们将HTML框架合并到一个地方。

正如刚才所看到的，我们可以通过在文件顶部的元数据中提供模板名称来指定一个模板来渲染我们的内容。我们还可以包含其他模板（见下文）并使用 Go 的模板管道。在渲染时，我们可以访问在文件顶部定义的元数据，一个具有Route.Href 、 Route.FilePath和Route.Meta字段的 struct Route ，它又是在文件顶部定义的元数据的映射。此外，我们可以访问Routes ，它是所有路线的切片（对于刚接触 Go 的人来说是数组），我们将在下面进一步了解它。

让我们结合使用此元数据和 Go 的模板基元来根据当前页面更改页面标题。为此，我们将routes/about.html中的元数据更改为

 ---
template: default.html
title: About
---

最后将templates/default.html更改为

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      {{template "body" .}}
  </ body >
</ html >

重新生成网站后，浏览器现在应该为我们的索引和关于页面显示不同的页面标题。

现在，让我们在路由文件夹中创建一些博客文章，例如

 routes/
    index.html
    about.html
    posts/
        first_post.md
        second_post.md

在这些.md文件中放置一些 markdown，顶部有一个元数据部分，将模板指定为default.html ，类似于我们在routes/index.html和routes/about.html中指定元数据的方式。对于first_post.md ，这可能看起来像这样： 

 ---
template : default.html
title : First Post
---

# Here could be some fine content

再次运行tinystatic以重新生成输出，我们现在可以访问http://localhost:8000/posts/first_post和http://localhost:8000/posts/second_post 。 Markdown 已转换为 HTML 并放置在名为body的模板中，以便它呈现到templates/default.html中的{{template "body" .}}占位符中。请注意这与.html文件有何不同，我们需要手动调用{{define "body"}} ... {{end}} 。

接下来，让我们使用前面提到的Routes切片创建帖子列表。我们将routes/index.html的内容更改为： 

---
template: default.html
---
{{define "body"}}
< h1 > Welcome to our blog </ h1 >

< ul >
{{range .Routes | filterFilePath "**/posts/*.md"}}
< li >
    < a href = {{.Href}} > {{.title}} </ a >
</ li >
{{end}}
</ ul >

重新生成后，我们应该在索引页面上看到我们的帖子列表。 Routes切片提供了所有路由的列表，我们可以使用预定义的辅助函数来过滤这些路由，例如

  • .Routes | filterFilePath "**/posts/*.md"显示任何名为 posts 的文件夹中以.md结尾的所有文件
  • .Routes | sortAsc "title"根据元数据字段title对路由进行排序
  • .Routes | limit 10仅获取前 10 条路线
  • .Routes | offset 3跳过前三条路线
  • .Routes | filter "title" "*Post"根据与模式*Post匹配的元数据字段title进行过滤
  • .Routes | filterFileName "*.md"获取所有以*.md结尾的文件
  • .Routes | filterHref "/*"获取所有顶级路由
  • .Routes | filterFilePath "**/posts/*.md" | sortDesc "title" | limit 10来组合以上一些内容

接下来，我们希望对帖子使用与其他页面不同的布局。帖子应该在文本之前有一个图像，因此我们要在帖子元数据中定义图像 URL。因此，我们添加第二个模板，名为templates/post.html其中包含以下内容： 

 <!doctype html >
< html >
  < head >
    < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
  </ head >
  < body >
      < img src = {{.image}} />
      {{template "body" .}}
  </ body >
</ html >

我们将帖子元数据更改为

 ---
template: post.html
title: First Post
image: https://some-image.url
---

重新生成输出应该会给我们的帖子上方提供一个漂亮的图像。然而，我们的模板中又出现了重复的 HTML 代码。为了改进这一点，我们在routes和templates旁边创建另一个文件夹，称为partials 。在部分内部，我们创建一个名为head.html的文件

{{define "head"}}
< head >
  < title > {{if .title}} {{.title}} | {{end}}Our first tinystatic website </ title >
</ head >
{{end}}

我们将模板中的<head>...</head>替换为{{template "head" .}} ，如下所示

 <!doctype html >
< html >
  {{template "head" .}}
  < body >
      {{template "body" .}}
  </ body >
</ html >

现在我们将不同模板之间的代码复制减少到最低限度。我们可以使用这个partials目录来存储各种重复出现的组件，例如导航栏或页脚。

请注意，我们实际上不需要使用本教程中使用的文件夹名称来构建项目。这些文件夹名称只是默认名称，但可以使用相应的命令行参数进行更改（有关更多信息，请参阅tinystatic -help ）。

这里有一个完整的博客示例。

展开
附加信息
相关应用
为您推荐
相关资讯 全部