无服务器 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 显示结果页面支持 Markdown
需求
之前已经实现了自建短链服务Url-Shorten-Worker变身日记本NetJournal
但是, 直接访问短链显示的是Markdown源码, 没有显示图文效果.
========
思路
其实项目原作者是有一个跳转页面的功能的. 如果这个选项打开, 会先跳转到一个新页面, 再自动跳转到目标页面. (作者原来的作用是用于去掉 referrer)
看一下原作者的代码逻辑.
在项目根目录, 有一个 no-ref.html, 内容很简单, 就是实现自动跳转.
注意, no-ref.html 里面包含有奇异字符串 {Replace} , 而且这个奇异字符串就是跳转的目标.
在 worker.js 里面, 加载了这个 no_ref.html 之后, 对奇异字符串 {Replace} 进行替换为目标长链接. 你可以理解为这个html文件被修改了. 然后再返回给浏览器显示(执行).
========
实践
result.html
先在 \theme\journal 目录下新建一个 result.html
内容很简单, 复用我们的显示Markdown为html的成功经验, 参考网络日记本的 index.html.
抄一个用于显示html的div
<div id="html-preview"></div>
再抄一个用于保存Markdown源码的textarea
<textarea id="longURL">{__FINAL_LINK__}</textarea>
抄加载Markdown转化html的js
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
再抄把Markdown转化html的调用
<script>// 把MarkDown文本转换为显示function syncMarkDownView() {const markdownContent = document.getElementById('longURL').value;const htmlPreview = document.getElementById('html-preview');htmlPreview.innerHTML = marked.parse(markdownContent);}</script>
再从main.js抄一个加载页面后自动执行函数的逻辑, 调用刚刚的转化函数
<script>document.addEventListener('DOMContentLoaded', function () {syncMarkDownView();});</script>
完整的结果就是这样:
<!DOCTYPE html><html><head><title>Url-Shorten-Worker</title></head><body><div id="html-preview"></div><textarea id="longURL">{__FINAL_LINK__}</textarea><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script>// 把MarkDown文本转换为显示function syncMarkDownView() {const markdownContent = document.getElementById('longURL').value;const htmlPreview = document.getElementById('html-preview');htmlPreview.innerHTML = marked.parse(markdownContent);}document.addEventListener('DOMContentLoaded', function () {syncMarkDownView();});</script></body></html>
用浏览器打开一下.
把 {__FINAL_LINK__} 替换为Markdown源码. 保存, 浏览器刷新. 嗯, 看起来效果不错.
worker.js
对worker.js的修改, 结果页面的链接要包含 theme
let result_html = "https://crazypeace.github.io/Url-Shorten-Worker/" + config.theme + "/result.html"
========
优化
把项目提交, 部署到worker之后, 发现一些小问题.
结果页面的最下面, 能看到装着Markdown源码的textarea, 需要隐藏掉.
问了一下 GPT https://devv.ai/search?threadId=dhqolkt1mmf4
<textarea id="longURL" hidden>
显示图片的时候, 因为宽度较大, "穿模"了.
img {width: auto;max-width: 100%;}
========
完
Github
https://github.com/crazypeace/url-Shorten-Worker/
演示站
https://journal.crazypeace.workers.dev/journaljournal
评论
发表评论