Skip to content

切换到由Astro构建的Astro-paper主题

Posted on:2023年11月3日 at 22:57

某些不通过 rss 订阅我博客的访客可能已经在看到这篇文章之前就已经看到了博客样式的更改。说实话,更换博客主题是个大事,不仅迁移费时费力,还要仔细考虑迁移之后的后果(如忘记添加 siteauth 等等)。

我仔细考虑了几天,还是打算承受这个代价,将自己的博客换成目前正在使用的 Astro-paper 主题。

这部分的故事,且听我娓娓道来。

为什么换博客主题?

偶然看到了 Astro 这个前端框架,发现它速度很快,自带 SSR,并且对 Javascript 的依赖程度很低(您可以关闭 Javascript 后访问本页)。

Astro 是集多功能于一体的 Web 框架,用于构建快速、以内容为中心的网站。

这是官方文档中的描述,我认为 Astro 完全符合这一点。

并且,Astro 天然兼容目前的 Vue 和 React 技术栈,所以迁移可以是渐进的,迁移成本也不高。

想想,使用自己最喜欢的 Vue 或 React 构建应用,并生成几乎纯静态的站点,这不是一件很酷的事吗?

再其次,我认为一个博客的质量,并不是由让人耳目一新的主题决定的,主题固然重要,但是光有外壳而没有实质也是不行的,我认为之前的 Hexo-Icarus 主题最大的问题就是在一个页面中,有太多可以交互的元素了,实质上可能会让人分心。

恰巧,我看到了大神 Earthmessenger 的博客,发现 ta 也是基于 Astro 构建的博客,所以就转而投入了极简风阵营。

能说下具体步骤吗?

简单写写吧,更多还是得看官方文档,甚至翻源代码。

首先 fork Astro-paper 的存储库。

然后修改 /src/config.ts,再按照自己的需求修改一些文件就行了。

比如我需要启用 LaTeX\LaTeX 数学公式支持,并将代码块高亮样式改成 Github Dark Dimmed(主要是 Vscode 在用,看着比较亲切),我就可以将 /astro.config.ts 改成这样:

import { defineConfig } from "astro/config";
import tailwind from "@astrojs/tailwind";
import react from "@astrojs/react";
import remarkToc from "remark-toc";
import remarkCollapse from "remark-collapse";
import sitemap from "@astrojs/sitemap";
import { SITE } from "./src/config";
import remarkMath from "remark-math";
import rehypeKatex from "rehype-katex";

// https://astro.build/config
export default defineConfig({
  site: SITE.website,
  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
    react(),
    sitemap(),
  ],
  markdown: {
    remarkPlugins: [
      remarkMath,
      remarkToc,
      [
        remarkCollapse,
        {
          test: "Table of contents",
        },
      ],
    ],
    rehypePlugins: [rehypeKatex],
    shikiConfig: {
      theme: "github-dark-dimmed",
      wrap: true,
    },
  },
  vite: {
    optimizeDeps: {
      exclude: ["@resvg/resvg-js"],
    },
  },
  scopedStyleStrategy: "where",
});

需要添加评论(和自动的版权声明),就可以在 /src/layouts/PostDetails.astro 的中间加上这样一段内容:

评论摸索了很久,最后在 Imken 大佬的帮助下解决了!

<main>
  ...
  <ul class="tags-container">
    {tags.map(tag => (
      <Tag name={slugifyStr(tag)} />
    ))}
  </ul>
  <hr />
  <p>
    <br />
    在 Rickyxrc's blog 出现的文章,若无特殊注明,均采用 CC BY-NC-SA 4.0 协议共享,也就是转载时需要注明本文章的地址,并且引用本文章的文章也要使用相同的方式共享。
    <br />
    <br />
  </p>
  <Comment client:only="react" />
  ...
</main>

顺便截张图,VScode 上和这个上面的渲染效果几乎完全一样。

渲染预览效果

博客之后的计划是什么?

博主马上就要参加由中国计算机学会举办的针对高中生的信息学奥林匹克竞赛(NOIP)了,在这之后,我在高中阶段就要和算法竞赛说再见了。

所以,博客的更新频率会很低尽管一直都是这样

以后的话,不会有太多学术(信息学竞赛)内容了,我比较热爱数学,可能会不定期放一些好玩的东西上来。

然后的话就是杂谈,聊聊开源生态,聊聊最近的心态,就这些。

刚刚迁移,如果发现明显的渲染错误请直接在下面评论指出,会第一时间处理,不胜感激!

RSS 是不是只剩摘要了?

是的,但不会一直这样。

Astro-paper 主题默认的 RSS 输出是摘要输出,由于刚刚接触 Astro 和 React,技术限制,不会全文输出。

而且全文输出的效果很差,因为我的大多数博客使用了基于 KaTeX\KaTeX 的数学公式渲染引擎,在 RSS 阅读器上表现极其差,基于 RSS 的信息聚合系统不是为数学公式设计的,所以我也没什么解决办法。

之后我会想办法解决这个问题的,因为我也是 RSS 重度用户,甚至专门自行搭建了 RSSHub 和 FreshRss 来接受订阅源,我也愿意以牺牲访客数量为代价(反正我站点没统计)为大家提供全文输出的 RSS 订阅服务,之后我会写文章解决这个问题的。

后记

Astro 是真的,真的,真的快!我 VScode 上刚刚保存,浏览器就渲染好了。

也希望大家在搭建博客时,除了主题的选择,还要想想自己内容的受众,以及如何写出有质量的文章,让更多的人订阅。

共勉!



在 Rickyxrc's blog 出现的文章,若无特殊注明,均采用 CC BY-NC-SA 4.0 协议共享,也就是转载时需要注明本文章的地址,并且引用本文章的文章也要使用相同的方式共享。