在博客融入一个跨平台作品集

查看 156|回复 13
作者:DIYgods   
博客原文: https://diygod.cc/xlog-portfolios
长久以来
我一直将个人博客视为一个理想的展示个人 IP 的“个人网站”,而不仅仅是发布文章的平台。我曾在 2014 年初学编程时使用 WordPress 建站 《世界,你好!》;入了前端坑后,在 2017 年我转向了 Hexo 《做了一点微小的改动》; Web3 飞升后 2022 年我换成了 xLog 《第一个开源链上博客系统 xLog 》。然而,无论我使用什么博客系统,一直都存在一个问题,那就是如何优雅地汇集和展示我在其他平台发布的作品,最好还能直接显示外站的数据。我之前通常以文章形式发布作品,并在文章中附上链接,然而这样做显然不够优雅,读者还需要额外点击链接进行跳转。
灵感降临
我在学习达芬奇剪辑时,发现了影视飓风的网站,它通过外链方式列出了他们在 B 站发布的视频,其中包括标题、封面图、发布时间、播放量等信息。这个发现给了我启发,我完全可以在 xLog 上制作一个装载了我在各个平台作品的作品集,这里面可以有我发布在 B 站的视频、我在 GitHub 上维护的仓库、我参与的小宇宙播客甚至是我在 pixiv 上创作的画作。这样,当人们访问我的博客时,将不只是看到文章,而是会看到更丰富多元的我,这让我的博客更接近一个真正意义上的“个人网站”。
下手
想法萌发后,实现就简单了。
[ol]
  • 对 xLog 后台进行了优化和清晰的分类:文章、页面、作品集,以消除类型增多后可能带来的用户困扰。
    [/ol]

    [ol]
  • 设计了一个全新的编辑页,不同于文章和页面,这里只保留封面、标题、摘要、发布时间,并新增外部链接字段。
    [/ol]

    [ol]
  • 实现了作品信息的自动填充功能,减轻了手动输入的负担。这是通过获取链接的 Open Graph 信息实现的,涉及到的字段包括 og:image og:title og:description og:date
    [/ol]

    [ol]
  • 把作品展示在首页和独立的作品集页
    [/ol]

    [ol]
  • 数据的获取和展示,对于“偷数据”经验丰富的 RSSHub 作者来说,这是得心应手的一环,首先针对 bilibili 、小宇宙、GitHub 、pixiv 、Twitter 这几个平台进行了抓取,获取到播放量和评论数并在 xLog 的卡片上进行展示,同时考虑到源站可能的压力和反爬,我特别设置了足够长的数据缓存。
    [/ol]

    如今,这个简单实用的小功能已经落地实现了,可以看看我的作品集页,你是否也想要尝试在 xLog 建立属于自己的个人作品集呢?

    image, 作品集, 博客, 文章

  • MyBules   
    很赞,我也想给博客弄这种小卡片来着,但是能拿出手展示的东西太少了😥
    hellodigua   
    越来越完善了~之前访问初版 xlog 的时候速度有些慢,现在加载速度突然变的很快,是做了什么优化吗
    AppJun   
    这个不错。
    hanlin85   
    不错不错
    唯一的问题就是我的原创内容现在和将来一段时间还是短板
    wdssmq   
    所以,会不会加 API 发布文章的接口 - -
    wdssmq   
    会弹出一个 Error: TypeError: Cannot convert null to a BigInt 的报错,实际是有发布成功。和文章一样,仍然没有是否重复的校验。。
    wayne3602   
    删了让我发🌚
    LayneZhao   
    一年前看过你的博客,没想到在这儿碰到本人了😀
    DIYgods
    OP
      
    @hellodigua 期间有时不时做一些优化,用了 Next.js 的 RSC 也提升了不少
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部