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中去掉下面这个选项,这样就不会加载索引文件了

3 个赞

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