mirror of
https://codeberg.org/mayx/pages
synced 2026-01-02 06:43:41 +08:00
326 lines
18 KiB
HTML
326 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
||
<!-- Begin Jekyll SEO tag v2.8.0 -->
|
||
<title>如何使用JS通过订阅源查看文章？ | Mayx的博客</title>
|
||
<meta name="generator" content="Jekyll v3.9.5" />
|
||
<meta property="og:title" content="如何使用JS通过订阅源查看文章？" />
|
||
<meta name="author" content="mayx" />
|
||
<meta property="og:locale" content="zh_CN" />
|
||
<meta name="description" content="懒得写代码？那就让AI写！" />
|
||
<meta property="og:description" content="懒得写代码？那就让AI写！" />
|
||
<meta property="og:site_name" content="Mayx的博客" />
|
||
<meta property="og:type" content="article" />
|
||
<meta property="article:published_time" content="2025-04-08T00:00:00+08:00" />
|
||
<meta name="twitter:card" content="summary" />
|
||
<meta property="twitter:title" content="如何使用JS通过订阅源查看文章？" />
|
||
<meta name="google-site-verification" content="huTYdEesm8NaFymixMNqflyCp6Jfvd615j5Wq1i2PHc" />
|
||
<meta name="msvalidate.01" content="0ADFCE64B3557DC4DC5F2DC224C5FDDD" />
|
||
<meta name="yandex-verification" content="fc0e535abed800be" />
|
||
<script type="application/ld+json">
|
||
{"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"mayx"},"dateModified":"2025-04-08T00:00:00+08:00","datePublished":"2025-04-08T00:00:00+08:00","description":"懒得写代码？那就让AI写！","headline":"如何使用JS通过订阅源查看文章？","mainEntityOfPage":{"@type":"WebPage","@id":"/2025/04/08/feed.html"},"publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://avatars0.githubusercontent.com/u/17966333"},"name":"mayx"},"url":"/2025/04/08/feed.html"}</script>
|
||
<!-- End Jekyll SEO tag -->
|
||
|
||
<link rel="canonical" href="https://mabbs.github.io/2025/04/08/feed.html" />
|
||
<link type="application/atom+xml" rel="alternate" href="/atom.xml" title="Mayx的博客" />
|
||
<link rel="alternate" type="application/rss+xml" title="Mayx的博客(RSS)" href="/rss.xml" />
|
||
<link rel="alternate" type="application/json" title="Mayx的博客(JSON Feed)" href="/feed.json" />
|
||
<link rel="stylesheet" href="/assets/css/style.css?v=1767196818" />
|
||
<!--[if !IE]> -->
|
||
<link rel="stylesheet" href="/Live2dHistoire/live2d/css/live2d.css" />
|
||
<!-- <![endif]-->
|
||
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Mayx的博客" />
|
||
<link rel="webmention" href="https://webmention.io/mabbs.github.io/webmention" />
|
||
<link rel="pingback" href="https://webmention.io/mabbs.github.io/xmlrpc" />
|
||
<link rel="preconnect" href="https://summary.mayx.eu.org" crossorigin="anonymous" />
|
||
<link rel="prefetch" href="https://www.blogsclub.org/badge/mabbs.github.io" as="image" />
|
||
<link rel="blogroll" type="text/xml" href="/blogroll.opml" />
|
||
<link rel="me" href="https://github.com/Mabbs" />
|
||
<script src="/assets/js/jquery.min.js"></script>
|
||
<!--[if lt IE 9]>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ajaxtransport-xdomainrequest/1.0.3/jquery.xdomainrequest.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
|
||
<![endif]-->
|
||
<script>
|
||
var lastUpdated = new Date("Thu, 01 Jan 2026 00:00:18 +0800");
|
||
var BlogAPI = "https://summary.mayx.eu.org";
|
||
</script>
|
||
<script src="/assets/js/main.js"></script>
|
||
<!--[if !IE]> -->
|
||
|
||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137710294-1"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
function gtag(){dataLayer.push(arguments);}
|
||
gtag('js', new Date());
|
||
gtag('config', 'UA-137710294-1');
|
||
</script>
|
||
|
||
<script src="/assets/js/instant.page.js" type="module"></script>
|
||
<!-- <![endif]-->
|
||
</head>
|
||
|
||
<body>
|
||
<!--[if !IE]> --><noscript><marquee style="top: -15px; position: relative;"><small>发现当前浏览器没有启用JavaScript，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee></noscript><!-- <![endif]-->
|
||
<!--[if IE]><marquee style="top: -15px; position: relative;"><small>发现当前浏览器为Internet Explorer，这不影响你的浏览，但可能会有一些功能无法使用……</small></marquee><![endif]-->
|
||
<div class="wrapper">
|
||
<header class="h-card">
|
||
<h1><a class="u-url u-uid p-name" rel="me" href="/">Mayx的博客</a></h1>
|
||
|
||
|
||
<img src="https://avatars0.githubusercontent.com/u/17966333" fetchpriority="high" class="u-photo" alt="Logo" style="width: 90%; max-width: 300px; max-height: 300px;" />
|
||
|
||
|
||
<p class="p-note">Mayx's Home Page</p>
|
||
|
||
<form action="/search.html">
|
||
<input type="text" name="keyword" id="search-input-all" placeholder="Search blog posts.." /> <input type="submit" value="搜索" />
|
||
</form>
|
||
<br />
|
||
|
||
|
||
|
||
|
||
|
||
<p class="view"><a class="u-url" href="/Mabbs/">About me</a></p>
|
||
|
||
<ul class="downloads">
|
||
|
||
<li style="width: 270px; border-right: none;"><a href="/MayxBlog.tgz">Download <strong>TGZ File</strong></a></li>
|
||
|
||
</ul>
|
||
</header>
|
||
<section class="h-entry">
|
||
|
||
<small><time class="date dt-published" datetime="2025-04-08T00:00:00+08:00">8 April 2025</time> - 字数统计：1589 - 阅读大约需要5分钟 - Hits: <span id="/2025/04/08/feed.html" class="visitors">Loading...</span></small>
|
||
<h1 class="p-name">如何使用JS通过订阅源查看文章？</h1>
|
||
|
||
<p class="view">by <a class="p-author h-card" href="//github.com/Mabbs">mayx</a></p>
|
||
<div id="outdate" style="display:none;">
|
||
<hr /><p>
|
||
这是一篇创建于 <span id="outime"></span> 天前的文章，其中的信息可能已经有所发展或是发生改变。
|
||
</p>
|
||
</div>
|
||
<script>
|
||
daysold = Math.floor((new Date().getTime() - new Date("Tue, 08 Apr 2025 00:00:00 +0800").getTime()) / (24 * 60 * 60 * 1000));
|
||
if (daysold > 90) {
|
||
document.getElementById("outdate").style.display = "block";
|
||
document.getElementById("outime").innerHTML = daysold;
|
||
}
|
||
</script>
|
||
|
||
<hr />
|
||
|
||
<b>AI摘要</b>
|
||
<p id="ai-output">这篇文章讲述了作者如何利用AI编写JavaScript代码，实现一个功能：在鼠标悬停在博客链接上时，通过RSS/Atom源预览链接的最新文章，且只显示标题和时间。过程中提到了跨域问题的解决方案（CORS代理），以及AI在编写代码时遇到的挑战，如遍历订阅源路径的效率问题和XSS安全风险，最终作者通过DeepSeek检查和修改确保了代码的可靠性。作者对AI自动编写代码的体验表示既方便又有趣，但也强调了人工监督在确保代码质量上的必要性。</p>
|
||
|
||
<hr />
|
||
|
||
|
||
|
||
<ul><li><a href="#起因">起因</a></li><li><a href="#让ai编写代码">让AI编写代码</a></li><li><a href="#感想">感想</a></li></ul>
|
||
<hr />
|
||
|
||
|
||
<main class="post-content e-content" role="main"><p>懒得写代码？那就让AI写！<!--more--></p>
|
||
<h1 id="起因">
|
||
|
||
|
||
<a href="#起因"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 起因
|
||
|
||
|
||
</h1>
|
||
|
||
<p>前段时间，我看到有些博客给自己的友链页面做了通过订阅源查看友链最近更新文章的功能，看起来挺有意思的，有点想整一个。不过对于我的博客来说，作为静态博客想要做到这样的功能估计没那么简单吧……毕竟一般的订阅软件需要隔段时间请求一下对应博客的订阅链接，然后再把结果存到数据库才行。但是我想了想，对我来说没必要做成订阅啊，我又不需要知道对应博客是什么时候更新的，只要在有人想知道的时候去请求一下订阅链接，然后展示出来就行，感觉似乎又没有那么复杂。 </p><p>
|
||
既然不复杂，那这个功能就让AI来做吧，正好前段时间有个朋友买了一个月的Devin.ai订阅，据说是可以自己调试代码，还能操作浏览器，而且代码基本上写出来就能用。我对这个挺感兴趣的，所以这次的功能就让它来写吧！</p>
|
||
<h1 id="让ai编写代码">
|
||
|
||
|
||
<a href="#让ai编写代码"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 让AI编写代码
|
||
|
||
|
||
</h1>
|
||
|
||
<p>既然是让AI来写，至少得把我的需求说清楚，所以首先我应该告诉它：</p>
|
||
<blockquote>
|
||
<p>创建一个JavaScript函数来实现<a href="/links.html">Links</a>表格中链接的RSS/Atom源预览。</p>
|
||
<ul>
|
||
<li>当鼠标悬停在表中的链接上时，检查该网站是否有RSS/Atom源，并将结果显示在一个浮动窗口中</li>
|
||
<li>在鼠标光标后的浮动窗口中显示提要中的5篇最新文章</li>
|
||
<li>在窗口中只包含标题和时间，不需要链接和内容</li>
|
||
<li>跳过所有不包含RSS/Atom源的链接，而不显示任何错误</li>
|
||
<li>当鼠标离开链接时，浮动预览应该消失</li>
|
||
</ul>
|
||
</blockquote>
|
||
|
||
<p>不过在正式编写之前，我还得考虑一下可行性，毕竟是很简单的功能，我不写但我不能不知道怎么写。首先让JS解析Feed数据也就是XML数据应该是很简单的事情，JS应该有自带的函数来实现这种功能。然后是获取数据，在JS中使用fetch就可以了，但是这里有个很重要的事情，浏览器请求其他网站存在跨域的问题，还好我之前在CF Workers上用<a href="https://github.com/Zibri/cloudflare-cors-anywhere">cloudflare-cors-anywhere</a>搭了个CORS代理： <a href="https://cors-anywhere.mayx.eu.org/">https://cors-anywhere.mayx.eu.org/</a> 。所以我应该在说明中给它说清楚：</p>
|
||
<blockquote>
|
||
<ul>
|
||
<li>如果存在源，请使用CORS代理：https://cors-anywhere.mayx.eu.org/ 获取并解析它</li>
|
||
</ul>
|
||
</blockquote>
|
||
|
||
<p>随后我就开始让它编写代码了。接下来就能看到AI在浏览器和编辑器中切换，不停的进行编写和调试，等了一段时间，它把第一版代码写好了。不过也许我说的不够清楚，这个CORS代理的用法和其他的CORS代理不太一样，代理链接和被代理的链接之间需要使用“?”分开，另外第一版我也没说清楚RSS/Atom源的链接在哪，所以它选择遍历常见的几种订阅源的路径，这样有点不太好，除了速度慢，对我的CORS代理消耗也比较大。所以我告诉它代理的正确用法，以及让它假设超链接中包含“data-feed”属性，其中包含订阅源的链接，并且随便挑了个网站拿给它作为示例。 </p><p>
|
||
随后就能看到它继续改改改，改了几次之后我把最后生成的JS复制到浏览器上执行了一下，效果还不错，于是就把它放到我的博客上了。 </p><p>
|
||
它的水平还是挺不错的，至少正确的实现了功能。不过我有点担心它的代码会不会不太可靠，毕竟要从其他网站上获取数据，得避免出现XSS之类的问题，于是我把代码丢给DeepSeek-R1让它检查了一下，果不其然Devin.ai写的代码似乎有XSS的隐患，如果链接列表中标题有html标签似乎就会解析（虽然我没试过），于是根据DeepSeek的提示修改了一下，增加了一个过滤特殊字符的函数，改完又放到博客上，最终的代码就是：<a href="/assets/js/rss-feed-preview.js">rss-feed-preview.js</a>。</p>
|
||
<h1 id="感想">
|
||
|
||
|
||
<a href="#感想"><svg class='octicon' viewBox='0 0 16 16' version='1.1' width='16' height='32' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg></a> 感想
|
||
|
||
|
||
</h1>
|
||
|
||
<p>让AI全自动写代码感觉还挺方便，有种当产品经理的感觉了🤣，像这种AI就是Agent吧，这也算是我头一次使用Agent了，感觉用起来还挺不错的。不过从这次尝试来看确实AI也有一定的局限性，像是直接写出来的代码可能存在一些安全性问题，除非单独让AI检查，不然很有可能会写出功能正常但是存在漏洞的代码，所以还是得人看着点，AI搞出事故可是<strong>不负责</strong>的啊😇～</p></main>
|
||
|
||
|
||
<small style="display: block">tags: <a rel="category tag" class="p-category" href="/search.html?keyword=JavaScript"><em>JavaScript</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=RSS"><em>RSS</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=Feed"><em>Feed</em></a> - <a rel="category tag" class="p-category" href="/search.html?keyword=AI"><em>AI</em></a> <span style="float: right;"><a href="https://gitlab.com/mayx/mayx.gitlab.io/tree/master/_posts/2025-04-08-feed.md">查看原始文件</a></span></small>
|
||
|
||
|
||
<h4 style="border-bottom: 1px solid #e5e5e5;margin: 2em 0 5px;">推荐文章</h4>
|
||
<p id="suggest-container">Loading...</p>
|
||
<script>
|
||
var suggest = $("#suggest-container");
|
||
$.get(BlogAPI + "/suggest?id=/2025/04/08/feed.html&update=" + lastUpdated.valueOf(), function (data) {
|
||
if (data.length) {
|
||
getSearchJSON(function (search) {
|
||
suggest.empty();
|
||
var searchMap = {};
|
||
for (var i = 0; i < search.length; i++) {
|
||
searchMap[search[i].url] = search[i];
|
||
}
|
||
|
||
var tooltip = $('<div class="content-tooltip"></div>').appendTo('body').hide();
|
||
for (var j = 0; j < data.length; j++) {
|
||
var item = searchMap[data[j].id];
|
||
if (item) {
|
||
var link = $('<a href="' + item.url + '">' + item.title + '</a>');
|
||
var contentPreview = item.content.substring(0, 100);
|
||
if (item.content.length > 100) {
|
||
contentPreview += "……";
|
||
}
|
||
link.hover(
|
||
function(e) {
|
||
tooltip.text($(this).data('content'))
|
||
.css({
|
||
top: e.pageY + 10,
|
||
left: e.pageX + 10
|
||
})
|
||
.show();
|
||
},
|
||
function() {
|
||
tooltip.hide();
|
||
}
|
||
).mousemove(function(e) {
|
||
tooltip.css({
|
||
top: e.pageY + 10,
|
||
left: e.pageX + 10
|
||
});
|
||
}).data('content', contentPreview);
|
||
|
||
suggest.append(link);
|
||
suggest.append(' - ' + item.date + '<br />');
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
suggest.html("暂无推荐文章……");
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<br />
|
||
<div class="pagination">
|
||
|
||
<span class="prev">
|
||
<a href="/2025/04/04/search.html">
|
||
上一篇：最近对博客搜索功能的优化记录
|
||
</a>
|
||
</span>
|
||
|
||
<br />
|
||
|
||
<span class="next">
|
||
<a href="/2025/04/22/ai-limit.html">
|
||
下一篇：关于LLM上限的探索
|
||
</a>
|
||
</span>
|
||
|
||
</div>
|
||
|
||
<!--[if !IE]> -->
|
||
<link rel="stylesheet" href="/assets/css/gitalk.css">
|
||
<script src="/assets/js/gitalk.min.js"></script>
|
||
|
||
<div id="gitalk-container"></div>
|
||
|
||
<script>
|
||
var gitalk = new Gitalk({
|
||
clientID: '36557aec4c3cb04f7ac6',
|
||
clientSecret: 'ac32993299751cb5a9ba81cf2b171cca65879cdb',
|
||
repo: 'mabbs.github.io',
|
||
owner: 'Mabbs',
|
||
admin: ['Mabbs'],
|
||
id: '/2025/04/08/feed', // Ensure uniqueness and length less than 50
|
||
distractionFreeMode: false, // Facebook-like distraction free mode
|
||
proxy: "https://cors-anywhere.mayx.eu.org/?https://github.com/login/oauth/access_token"
|
||
})
|
||
gitalk.render('gitalk-container')
|
||
</script>
|
||
<!-- <![endif]-->
|
||
|
||
</section>
|
||
<!--[if !IE]> -->
|
||
<div id="landlord" style="left:5px;bottom:0px;">
|
||
<div class="message" style="opacity:0"></div>
|
||
<canvas id="live2d" width="500" height="560" class="live2d"></canvas>
|
||
<div class="live_talk_input_body">
|
||
<form id="live_talk_input_form">
|
||
<div class="live_talk_input_name_body" >
|
||
<input type="checkbox" id="load_this" />
|
||
<input type="hidden" id="post_id" value="/2025/04/08/feed.html" />
|
||
<label for="load_this">
|
||
<span style="font-size: 11px; color: #fff;"> 想问这篇文章</span>
|
||
</label>
|
||
</div>
|
||
<div class="live_talk_input_text_body">
|
||
<input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？" />
|
||
<button type="submit" class="live_talk_send_btn" id="talk_send">发送</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<input name="live_talk" id="live_talk" value="1" type="hidden" />
|
||
<div class="live_ico_box" style="display:none;">
|
||
<div class="live_ico_item type_info" id="showInfoBtn"></div>
|
||
<div class="live_ico_item type_talk" id="showTalkBtn"></div>
|
||
<div class="live_ico_item type_music" id="musicButton"></div>
|
||
<div class="live_ico_item type_youdu" id="youduButton"></div>
|
||
<div class="live_ico_item type_quit" id="hideButton"></div>
|
||
<input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
|
||
<audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
|
||
<input id="duType" value="douqilai" type="hidden" />
|
||
</div>
|
||
</div>
|
||
<div id="open_live2d">召唤伊斯特瓦尔</div>
|
||
<!-- <![endif]-->
|
||
<footer>
|
||
<p>
|
||
<small>Made with ❤ by Mayx<br />Last updated at 2026-01-01 00:00:18<br /> 总字数：614622 - 文章数：178 - <a href="/atom.xml" >Atom</a> - <a href="/README.html" >About</a></small>
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
<script src="/assets/js/scale.fix.js"></script>
|
||
<!--[if !IE]> -->
|
||
<script src="/assets/js/main_new.js"></script>
|
||
<script src="/Live2dHistoire/live2d/js/live2d.js"></script>
|
||
<script src="/Live2dHistoire/live2d/js/message.js"></script>
|
||
<!-- <![endif]-->
|
||
</body>
|
||
</html>
|