Solo 生成导出静态站点

本贴最后更新于 1730 天前,其中的信息可能已经时移世异

本文是《Solo 从设计到实现》的一个章节,该系列文章将介绍 Solo 这款 Java 博客系统是如何从无到有的,希望大家能通过它对 Solo 从设计到实现有个直观地了解、能为想参与贡献的人介绍清楚项目,也希望能为给重复发明重新定义博客系统的人做个参考 ❤️

自 v3.9.0 开始,Solo 开始支持生成并导出静态站点,以方便用户部署 GitHub Pages 这类静态网站托管服务。实例可见于此:

换句话说,Solo 可以支持在本地 localhost 上写作,然后用户自行部署 Pages 托管站点,这样就不用搭建服务器运维了。Solo 静态部署同样支持浏览量计数和社区评论互动,让静态博客也能和动态博客一样充满生机。

使用流程

  1. 功能入口:管理后台 - 工具 - 静态站点
  2. 输入待生成的静态站点地址,比如 https://88250.github.io
  3. 点击“生成”按钮触发静态站点页面资源生成
  4. 生成完毕后界面会返回导出的目录路径

技术实现

Solos.GEN_STATIC_SITE = true;

genURI("/tags.html");
genURI("/archives.html");
genURI("/links.html");
genURI("/categories.html");
genURI("/index.html");
genURI("/blog/info");
genURI("/manifest.json");
genURI("/rss.xml");

genArticles();
genTags();
genArchives();
genCategories();
genSkins();
genJS();
genImages();
genPlugins();
genFile("sw.js");
genFile("robots.txt");
genFile("CHANGE_LOGS.md");

Solos.GEN_STATIC_SITE = false;
  • genURI :用于生成独立的动态模板页面
  • genArticlesegenTagsgenArchives 等:分别用于生成文章、标签、存档等
  • genJSgenImagesgenPlugins :分别用于生成 JS、图片、插件
  • genFile :用于生产单个的静态文件

对于文章,仅导出:

  • 状态为发布状态的,即不导出草稿夹
  • 没有密码的文章,即公开文章

除了页面相关资源的生成,静态博客站点还需要浏览计数统计和评论功能,为此我们做了两个组件来进行支持:

  • uvstat:博客总浏览数、文章浏览数的计数组件
  • vcomment:提供社区评论,将社区端回帖相关交互特性共享给博客端节点

UVStat

引入 uvstat.js 后将需要统计的计数项用 span 包裹:

<span data-uvstaturl="${servePath}${article.articlePermalink}">${article.articleViewCount}</span>

然后调用 addStat 进行计数请求, renderStat 进行计数结果渲染,细节请参考项目文档。

uvstat 部署在社区服务器上,是 B3log 分布式社区的重要基础设施,Solo 已经全部切换到该服务上实现浏览计数了。

VComment

引入 vcomment.js 后在评论列表处引入:

<div id="vcomment" data-name="${article.authorName}" data-postId="${article.oId}"></div>
<div id="soloComments" class="fn__none">
  <@comments commentList=articleComments article=article></@comments>
</div>

Solo 本地的评论列表依然保留,只是默认不展现,当通过 vcomment “加载为空”后才展现本地评论列表。“加载为空”只有一种情况:该文章没有同步到社区,所以不存在和该文章关联的回帖。

这样用户如果不想推送文章到社区,也可以使用本地的评论系统,如果推送过了,就优先走社区评论系统。走社区评论系统的优势是能够最大限度共享社区交互功能,比如回帖回复、二级评论、感谢、通知等。

技术实现方面主要用到了 CORS,接口完全由社区提供,本地直接加载社区服务端渲染的 HTML,提交时带 CSRF Token 避免跨站脚本攻击。

1 操作
88250 在 2020-02-27 16:45:20 更新了该帖

相关帖子

优质回帖

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • haoker

    生成静态站点的时候样式失效了,只有首页的可以,然后图标什么的也失效了,要怎么解决呢image.png

    image.png

    1 回复
  • 其他回帖
  • muxiao237

    请问这该怎么搞啊?我确实是按着 github page 上面的站点生成的啊捕获.JPG 捕获 2.JPG

  • @88250 我发现一个问题,生产的静态文件,url 还是原来博客页面里面的,会跳到原来的网站

    1 回复
  • WuJingcheng

    你好,我这边遇到一个问题,我的 github 用户名格式是 a-bc。但是我第一次导出静态站点的时候不小心输成了 https://a_bc.github.io(-打成了_),之后尽管我修改成了 a-bc,但是我看代码中的各种地址和链接依旧是 a_bc 的。产生的静态页面似乎就比较拉垮,请问这个应该如何解决呢。

    1 回复
  • 查看全部回帖