webpage html export优化版 + vercel搭建博客教程

介绍

webpage html export是一个可以把笔记导出为静态博客的插件,但有一些bug和不足,因此做了一些修改和修复。

webpage html export优点:

  1. 对obsidian的兼容性好

  2. 利于SEO优化

本次更新内容:

  1. 修复一些bug
  2. 样式调整,修复浏览器兼容性
  3. 增加自定义header代码
  4. 增加评论功能
  5. 增加代码高亮
  6. 文章增加创建时间,评论数,阅读数,手机访问二维码
  7. 增加滚动到顶部
  8. 增加底部版权信息
  9. 增加统计代码,需要自己去51.la或百度统计等申请
  10. 页面显示速度优化(优先显示内容和侧边栏,全文索引后置)
  11. 增加图片点击放大
  12. 增加目录显示文件数等
  13. 支持File Color插件和bartender插件

说明:

评论系统用的是Waline,Waline是一款从valine衍生的带后端的评论系统。支持Markdown 语法,轻量易用,免费部署,多种部署部署方式和存储服务支持。官方地址:https://waline.js.org

预览效果

https://wxkj.asia/mynote/ (vercel部署)

https://wilson.lovestoblog.com/demo/ob_demo/ (InfinityFree部署)

操作方法

  1. 下载修改后的 webpage-html-export.zip 插件,并在插件设置 => Header Extension中进行配置

注意:`Waline Server URL是步骤2中申请的服务端应用地址。

版权信息里的名字可以在这里修改:

所有的样式和代码都可以在这里修改(通常不需要修改,除非你想自定义样式或功能):

配置好后,便可以导出你的笔记到本地文件了。

  1. 评论服务端配置,可参考Waline官方文档 进行后端部署,比如, Vercel 部署或 Deta 部署, Deta 部署更简单。Vercel国内DNS被污染了,但可以通过绑定域名访问,如果不会操作的建议使用Deta 部署或 Netlify部署。不过Vercel绑定域名后速度较快。

  2. vercel静态文件托管,可自行网上搜索托管方法,非常简单,通常几步就完成了(注册账号,链接GitHub并提交文档,部署,绑定域名),根据官方提示一步步操作即可。

  3. 根目录新建vercel.json可以进行一些重定向等操作。

  4. 如果自定义404页面可以在根目录新建404.html即可。

  5. 每次提交文件到github后会自动触发vercel部署,非常方便。

  6. 由于vercel的DNS被污染了,需要绑定域名,建议可以在腾讯云注册xxxx.asia第一年只需要5元即可。

增量更新

如果你以后更新了笔记,也无需每次都全部上传,不然如果文件多的话,会浪费资源。

首先插件中导出选项勾选Only export modified files,然后把导出的文件提交到github就好了。

如果你有自己的服务器,不想使用默认的cdn可以开启这个(这样的话就会把依赖的静态资源导出到本地):

为什么不用github.io托管

因为vercel功能更多,速度更快。

说明

由于使用了minisearch需要生成全文索引文件,由于索引文件较大,第一次可能会耗流量(之后会被浏览器缓存),不过网络传输通常会将其压缩到几百kb传输,且我已把这个加载过程移到最后加载,并且不会阻塞其他页面显示,所以视觉上没有影响,但如果你的托管平台有流量限制,建议通过cdn托管(但注意每次导出索引文件会变化,需要频繁变动)。

如果你不需要搜索可以在Page Features中去掉下面这个选项,这样就不会加载索引文件了

5 个赞

感谢分享!之前试过这个插件,当时感觉加载速度太慢了,所以放弃了。不过这个优化版本刚好解决了这个问题,太好用了。 :+1:

链接处理有问题,大小写不敏感
不知道是不是加了toLowerCase()

感谢反馈!

你说的链接问题是指Markdown里的超级链接的字母大小在导出后被改变了吗?

我测试下来并没发现你说的问题,如图

Markdown文档里
image

导出后

外链是没有问题的
但是如果有文件名有大写字母,就访问不到了,用小写字母的文件路径才访问得到

内链也没有发现你说的问题,虽然内链的链接转换为小写了,但目标文件的文件名也会被转换为小写,能否提供下你的文件名和Markdown内的链接代码?我测试下。

能加入ssh部署到自己的云服务器上的功能就更好了!

部署需要手动部署,每个人的服务器环境不一样

没事了,我找到问题了 :joy:
导出模式选错了

想问一下在设置中勾选了其他插件,导出后为什么并没有该插件相关的html

这里说的是导出插件相关的css,并不包含HTML,比如你选了Projects后,在导出文件lib/styles/other-plugin.css中包含projects的css,同时也会在HTML中引入other-plugin.css

感谢回复,在使用时碰到了新问题:文件更新后再次导出,在删除旧文件时进度条会卡住,查看目录中就旧文件已经被删除,但没有传入新文件,是否有什么解决办法

补充:文件名称未发生改变,文件内容更新

并没碰到过你说的,文件修改未被更新的情况

建议首先检查下导出的目录是否正确,因为webpage会记住上次的选择目录,如果某次导出时不小心改了目录,再次导出可能没注意,就导出到别的目录了。

如果目录没问题,也可以试试去掉下面这个选项,它会强制导出文件,无论是否更新。

感谢~
今天试用了一下,修改后的插件非常赞。
waline.js.org 这个评论系统也简洁好用。
部署在了 deta.space ——开始总是不成功,后面刷新几次就好了。
在 deta.space 部署更简单,似乎都没要填写 leancloud 信息。

大家有碰到这个问题吗?
如果文章的标题含有某些字符,比如:〚导引〛:star:等,
那么在html中这个标题就不显示,而是替换为文章内容中的第一句