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

需求

之前已经实现了自建短链服务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


评论

The Hot3 in Last 30 Days

ClouDNS .asia免费域名 托管到CloudFlare开CDN白嫖Websocket WS通道翻墙 / desec.io

无服务器 自建短链服务 Url-Shorten-Worker 完整的部署教程