白嫖worker 自建短链服务 Url-Shorten-Worker 变身日记本 NetJournal 显示结果页面支持 Markdown

点击标签看相关主题: 开发 Url-Shorten-Worker worker

需求

之前已经实现了自建短链服务Url-Shorten-Worker变身日记本NetJournal

但是, 直接访问短链显示的是Markdown源码, 没有显示图文效果.

========

思路

其实项目原作者是有一个跳转页面的功能的. 如果这个选项打开, 会先跳转到一个新页面, 再自动跳转到目标页面. (作者原来的作用是用于去掉 referrer)

我们可以借用同样的代码逻辑, 打开这个设置, 如果是日记本模式, 访问短链时, 显示一个结果页面, 其中把Markdown的内容转化为html再显示.

看一下原作者的代码逻辑.

在项目根目录, 有一个 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

添加一个 hidden 属性.

<textarea id="longURL" hidden>

显示图片的时候, 因为宽度较大, "穿模"了.

问了一下 GPT, https://poe.com/s/SHDNUjFmGgnfGUQpOhQw

添加一个css设置

img {
width: auto;
max-width: 100%;
}

========

完

Github

https://github.com/crazypeace/url-Shorten-Worker/

演示站

https://journal.crazypeace.workers.dev/journaljournal

搜索此博客

ICDYCT / 我能, 你也行 / I Can Do, You Can Too