#javascript #ssg #toml-config #router #built #vanilla #file

app simple-router

一个非常、非常原始的用Rust和纯JavaScript实现的静态网站生成器(SSG)。

12个版本

0.1.11 2024年8月19日
0.1.10 2024年7月31日

#366Web编程

Download history 445/week @ 2024-07-13 14/week @ 2024-07-20 137/week @ 2024-07-27 6/week @ 2024-08-03 163/week @ 2024-08-17

每月 310 下载

MIT 许可证

36KB
932

simple router

一个非常、非常原始的用Rust实现的静态网站生成器(SSG)

配置

配置文件位于simple-router.toml,应用程序必须创建此文件才能工作。

library_version = "0.1.11" # required! make sure this is up to date.

[out] # required!
path = "path/to/output/" # required! path to output directory
lib_file = "simple-router.js" # optional. name of JS library file relative to output directory

[source] # optional.
path = "." # path to the source directory
template = "layout.html" # path to template HTML file
exclude = [] # list of paths to exclude from 

[xml] # optional.
ignore_comments = true # remove comments from html

[js] # optional.
update_anchors = true # automatically update all <a> elements to use the router.
not_found = "404.html" # path to 404 page. needs to be the same as hosting provider's!

模板化

默认情况下,layout.html是一个特殊的文件,包含页面的模板。所有其他HTML文件都被视为页面。

<!-- layout.html -->

<html>
    <head>
        <!-- This is a placeholder (denoted by sr-prop="name").
             When the page gets loaded, the contents of this element will be replaced. -->
        <title sr-prop="title" /> 
    </head>
    <body>
        <!-- Properties starting with '__' are special. 
             - `__page` = Current path -->
        <h1 sr-prop="__page" /> 
        <div sr-prop="content" />
    </body>
</html>

<!-- index.html -->

<content> <!-- Elements at the root of a page are considered "properties" -->
    <!-- Placeholders will be filled in using properties of the same name. -->
    <p>Templating is so cool!</p> 
</content>
<title>Hello World</title>  <!-- Placeholders can contain both plain text and html. -->

JavaScript接口

JavaScript库创建了一个window.router属性,允许您导航到页面。默认情况下,所有链接到本地页面的锚点元素(a)将自动更新以使用该接口。

window.router.goto("/cat.html"); // Navigate to cat.html

window.router.goto("/"); // Navigate to the root (index.html)

window.router.goto("/cat"); // Navigate to the cat folder (cat/index.html)

// Create an anchor element and set its href to '/cat.html'.
// Note: the href attribute doesn't actually affect where this link will go.
const anchorElement = window.router.anchor("/cat.html");

await window.router.goto("/about.html"); // Wait for the about page to load, then continue.

console.log(router.path); // Print current path.

history.back(); // Go back.

此外,在src/simple_router.js中还有JSDoc。

依赖项

~3–14MB
~123K SLoC