12 个版本

0.1.12 2022年7月15日
0.1.11 2022年7月14日
0.1.8 2022年6月26日

#633 in 模板引擎

每月32次下载

MIT/ApacheCC-PDDC 许可证

84KB
2K SLoC

resticular

超快 SGG.

开玩笑的,我还没有运行任何基准测试。

Resticular 是一个 SSG,设计得易于使用。目前正在开发中,我决定开源代码库,以便人们可以贡献,如果他们愿意的话。

更新

  • JavaScript 和 CSS 最小化
  • 更好的错误处理
  • 具有属性的可重用组件
  • Tera 模板
  • 自定义端口
  • 文件夹或文件排除
  • 二级命令
  • 更多...

动机

我想写一个博客,并写一些关于 Rust 的博客文章,我搜索了一些 SSG。我发现 Hugo(真的很讨厌),Gatsby(react 东西)等等。它们不能满足我的需求。我决定戴上我的开发者帽子,制作自己的 SSG,简单又快(我真的不知道)。我没有坚持使用 Gatsby 的原因是我必须写 JSX,虽然我知道 react,但我不想接触它,而 Hugo 则不是我的类型。

特性

  • Resticular 拥有正在开发的强大 CLI。
  • 我决定为 markdown 制作自己的 HTML 标签。 <restic-markdown file="some"></restic-markdown>
  • 由 Axum 提供的开发服务器。
  • 懒加载图片。
  • 易于配置
  • Tera 模板

特性目前正在开发中

  • SEO 优化
  • 文件更改时服务器刷新(文件监视器工作,但服务器不刷新)
  • 从 markdown 文件中提取元数据.

注意:以上列表将在每个 PR 和每周更新。

核心功能

在这里,我将解释一些 resticular 的代码或它是如何工作的,我们将关注 resticular 为用户提供的两个自定义标签和一些其他内容,第一个是 restic-markdown,另一个是 restic-markdown-dir,类似吗?但有一个区别,让我们谈谈第一个标签的功能。

restic-markdown

当您使用此标签时,特定渲染器会检查所需的文件属性,然后遍历已解析的markdown文件列表并检查它们的路径。如果路径匹配,它将解析的markdown内容追加到文件中,注意markdown文件不会被输出到out_dir。一个文件中不能有多个restic-markdown标签,这就是restic-markdown-dir的作用所在。

restic-markdown-dir 当渲染器在HTML文件中看到restic-markdown-dir标签时,它会使用path属性在文件中提供的路径找到所有父路径是该路径的markdown文件。然后渲染器逐个遍历每个markdown文件,并为每个文件创建一个新的HTML文件,使用了标签的文件的原始内容仍然存在,解析的markdown内容被追加到标签中。

让我用一个小图来演示这个。

source
    - foo.html (has the restic-markdown-tag)
    - index.html
    - assets
    - markdown
        - a.md
        - b.md
  
      (RENDER PROCESS)

dist
    - index.html
    - foo-a.html
    - foo.b.html
    - assets
    0 

假设markdown/a.md的内容是

Hello World

并且markdown/b.md的内容是

Resticular is Great.

最后foo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World in the index.html<h1/>
    <restic-markdown-dir path="source/markdown"></restic-markdown-dir>
</body>
</html>

您预期的输出将是foo-a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World in the index.html<h1/>
    <restic-markdown-dir path="source/markdown">
      <p>Hello World</p>
    </restic-markdown-dir>
</body>
</html>

希望您觉得这很有用。

Resticular确保您有文件结构

当您使用Resticular时,创建新项目最好的方式是使用CLI,手动操作有时会出错,因为一些目录(如assets)是必不可少的。如果您没有这些目录,您将得到一个找不到文件错误,我正在尽我所能改进错误,所以这个错误很快就会改变,改变这个错误不会是一件大事。

尽可能使用CLI

当使用Resticular时,您应该尽可能多地使用CLI,手动操作可能会导致错误,并且会使您感到疲惫。

使用Tera模板

使用data.json

data.json

{
    "author": "Haider Ali",
    "version": "1.0.0"
}

foo.html

<p>{{ author }} created Resticular</p>

使用markdown元数据

注意:您还可以在包含restic-markdown-dir标签的文件中使用data.json数据。

---
title = "Why I like Rust?"
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu elit tempus, fermentum dui pulvinar, commodo nisl. Curabitur id ligula ante. Cras id gravida risus. Praesent cursus venenatis mauris, at blandit turpis faucibus quis. Praesent felis arcu, sollicitudin non lectus non, eleifend scelerisque lorem. In turpis lectus, commodo sit amet magna ultricies, gravida vulputate nisl. In posuere magna et dictum porta. Morbi ullamcorper, purus id porta varius, nisl mi vulputate enim, at bibendum velit odio nec velit. Donec lobortis massa eu purus feugiat, non ultrices velit vulputate. Proin commodo in ligula non faucibus. Duis euismod posuere nulla, vel condimentum eros luctus ac.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
</head>
<body>
    <restic-markdown-dir path="source/markdown"></restic-markdown-dir>
</body>
</html>

小型教程

可选

您还可以使用cargo install resticular

  • 克隆存储库
  • 创建一个resticular.toml文件。
  • 运行cargo build
  • 配置和项目设置。
out_dir = "YOUR_PATH"
source = "YOUR_PATH",
lazy_images = true || false || null -> don't add it (optional field)

source文件夹内创建markdownhtml(您可以命名任何您想要的名称,这无关紧要)。填写您想要的任何内容,如果您的HTML中有markdown内容。使用<restic-markdown file="PATH_TO_MARKDOWN_FILE"></restic-markdown>

  • ./target/release/resticular add route --name index.html --to /home如果您想让index.html跳转到/,则不要添加--to参数。
  • ./target/release/resticular开始

享受。

依赖关系

~62MB
~1M SLoC