白嫖worker 自建短链服务 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
博文
