528 字
3 分钟
使用JS获取Hugo博客最新文章

前情提要#

在重写我的个人主页的时候,我有想过一个需求。

把我的网站文章(最新)展示到我的主页上。

我想过三种方法:

由于比较懒(make=lazy)。

所以直接忽视第三条,再来说第一条:

通过直接打开地址会发现

请求了100kB,很难接受。

所以最后选择了第二条的方案,只需请求7kb

很棒,不是吗?

开始#

我选择的是fetch来进行网络请求。

随便选什么,请求就行。

TS写法:

let blogurl = "https://blog.sakurasen.cn"
let str = '"'
let loadding = ref(false)
let x = reactive([])
//定义变量
function get() {
    fetch('https://blog.sakurasen.cn/')
        .then(response => {
            return response.text()
//返回请求数据
        })
        .then(html => {
            const parser = new DOMParser();
//创建新DOM
            const doc = parser.parseFromString(html, 'text/html');
            x = Array.from(doc.querySelectorAll(".article-title")).splice(0,3)
//将变量定义为选择的标题Class
//我使用的主题标题Class就是这个
//选择前三篇文章
            loadding.value = true
//示意DOM可以加载内容了
        })
}

不知道写的怎么样,虽然很难,但我还是做到了。

说一下x = Array.from(doc.querySelectorAll(".article-title"))

在Stack主题中,标题的class就是这个,如果你是其他主题,修改为你的标题Class样式即可

DOM:

  <div v-if="loadding">
//需要等待异步加载完才可加载
      <h1>近期的文章</h1>
      <div v-for="t in x"><a
//vfor循环
              :href='blogurl + t.innerHTML.split(str)[1]'>{{ t.innerText
//拼接地址
              }} // <i>{{ t.nextSibling.nextSibling?.innerText ?? '暂无简介' }}</i></a></div>
              如果没有返回简介的地址,就是默认提示暂无简介

为什么要写这个:

blogurl + t.innerHTML.split(str)[1]

因为t.innerHTML输出是这样的

<a href="/post/index/">我的主页</a>

那么用split分割后就是

恭喜你,完成了~

使用JS获取Hugo博客最新文章
https://blog.sakurasen.cn/post/2025052901/
作者
SEN
发布于
2025-06-04
许可协议
SEN-FREE-License