新壶装旧酒｜Devlog · 15

原定标题「SNP 才不是屎尿屁的缩写」，但是还是太难看了。

模版渲染，已经是一种接近于衰落的技术了。（这里讲的是纯模版渲染，不是 React、Vue 那些在文档里放数据的插槽）不过为什么羊突然会提到这种技术呢？这和最近的 Solar Network Pages 的更新有关。

Solar Network Pages 诞生的目的不是像 GitHub Pages 一样只是一个静态托管的页面，而是有更远大的目的。提供人们一个地方轻轻松松的可以部署自己的博客，然后随手拿起手上的 Solian App 就可以开始写文章记录生活 / 思绪。之前的全托管模式就是朝着这个方向发展的，但是逐渐就发现一个问题，按照配置来的还是太局限了。我必不可能让所有的选项都可以配置，那我会先炸掉。

所以，让用户可以自己上传自己的网站 CSS、模版等的想法出现了。最开始我是想要像 Vercel 那些 Serverless 厂商一样提供你 JS Runtime 来运行 astro / nuxt / nextjs 等你任何可以想到的 SSR / meta framework。后来自己想了一下，这个想法不太切实际。第一是我的技术能力对沙箱的机制不太了解，会有安全问题；第二是这个会吃很多服务器算力，造成不必要的 overload。

不过，这也不是死局，我想起了之前用 hexo 这类 SSG 框架的时候写的 template 文件。

模版渲染是个好东西，性能吃的不多，还跑得快。对于客户端也跑得快，没有那些奇奇怪怪的 JavaScript，没有多余的 Data Fetch，只有一个 HTML 请求页面（CSS 和媒体文件另说）承载了所有内容。

模版渲染的历史也很深厚，属于一个很成熟的技术了。从上世纪（20th）开始互联网诞生之处，动态页面被介绍出来之后就有模版技术了。本质上就是一种高级的 string find & replace 有技术含量但不多。不过计算如此，它能让活搞定，也不算是一个不好的选择。

Liquid

所以 Solar Network Pages 的全托管技术转向了模版渲染的技术，并且使用了 Liquid 作为模版引擎。有两个原因。

语法简单，清晰，功能强大
在 Solar Network 的后段技术栈上的 DotLiquid 实现对 Liquid 的支持完善

其实我倒是觉得很生气为什么模版能发展出这么多个语言，虽然看起来都是差不多的。就是在 HTML 里面加点东西。不过模版不只能用在 HTML 中，纯文本也是可以的说。

不过我很喜欢 Liquid 对数据处理的语法：

{{ username | append: ", welcome to LiquidJS!" | capitalize }}

就像 shell 一样可以用 | 捅来捅去。非常的爽 (´▽｀)

并且 Liquid 的扩展能力特别的强，可以让渲染引擎添加自定义的指令进去。方便未来的开发。

不过我用的不是 Shopify 的魔改 Liquid，而是原版 Liquid（其实就是 DotLiquid 是按照原版实现的）你可以在这里看到介绍：

https://liquidjs.com/tutorials/intro-to-liquid.html

routes.json

不过内容解决了，路由还没解决。这一块我比较简单粗暴，直接让用户上传的时候放一个 routes.json 在根目录就好了。服务器会读取这个文件的内容然后做出处理。

其中的内容基本上如下：

{
   "routes": [
    {
      "path": "/",
      "template": "index.html.liquid",
      "page_type": "home",
      "data": {
        "mode": "posts_list",
        "order_by": "published_at",
        "order_desc": true,
        "page_size": 12,
        "types": ["article"],                                                                                                                                               "publisher_ids": ["00000000-0000-0000-0000-000000000001"]
      }
    },
    {
      "path": "/posts/",                                                                                                                                                  "template": "templates/article-list.html.liquid",
      "page_type": "posts",
      "data": {
        "mode": "posts_list",
        "order_by": "published_at",
        "order_desc": true,
        "page_size": 12,
        "types": ["article"],
        "publisher_ids": ["00000000-0000-0000-0000-000000000001"]
      }
    },
    {
      "path": "/posts/{slug}",
      "template": "templates/article.html.liquid",
      "page_type": "post",
      "data": {
        "mode": "post_detail",
        "slug_param": "slug",
        "publisher_ids": [
          "00000000-0000-0000-0000-000000000001",
          "0197a6d6-1245-7558-97e4-1da097a35288"
        ]
      }
    },
    {
      "path": "/about/",
      "template": "about.html.liquid",
      "page_type": "page",
      "data": {
        "mode": "none"
      }
    }
  ]
}

告诉了我的服务器应该怎么影射路径，给模版准备数据等等。具体的文档后面会在 Suki 放出来，所以再等等（应该就今天晚些时候）。

Site Config

我最开始实现让这个 routes.json 承载全部站点的配置的。但是 Codex 说不行，直接复用了我的 db config，我想也就算了。毕竟那个 config 还有 cache 可以用；跑的应该快一点。

站点配置负责一些全局的事物，例如要不要启用资源压缩，以及 RSS 和 Sitemap 的生成配置等。

对，所以你可以把小羊的博客加入你的 RSS Reader 里，就在 https://littlesheep.me/sitemap.xml

遗憾

现在的 Solar Network Pages 还不完美，例如不能让用户添加自己的域名。因为我们的前线反代只会正确处理 *.solian.page 的请求。因为不想动态给反代下发配置所以这一点先跳过。

不过你要是买了恒星计划最高级可以 DM @littlesheep 让我手动给你加行配置，就像我自己的一样走后门（

并且目前的模版渲染还能优化，做一些预先变异和缓存之类的可以提升访问速度。不过这一点渲染速度和网络传输相比真的是没什么关系就是。

不管怎么说，你可以现在 SNP 至少有点 SN-related 了。