✨ 功能特性#

• 基于 Astro 和 Tailwind CSS 开发
• 流畅的动画和页面过渡
• 亮色 / 暗色模式
• 自定义主题色和横幅图片
• 响应式设计
• 评论
• 搜索
• 文内目录

2.1 博客配置#

你可以通过配置文件 src/config.ts 自定义博客，这里以我自己的配置文件为例：

博客基本内容：

export const siteConfig: SiteConfig = {
  title: '时歌的博客',
  subtitle: '理解以真实为本，但真实本身并不会自动呈现',
  lang: 'zh_CN',         // 在这里设置你的博客语言，'en', 'zh_CN', 'zh_TW', 'ja', 'ko'
  themeColor: {
    hue: 250,         // 在这里设置你的主题色， Default hue for the theme color, from 0 to 360. e.g. red: 0, teal: 200, cyan: 250, pink: 345
    fixed: false,     // 选择是否固定主题色，默认false
  },
  banner: {
    enable: true,
    src: 'assets/images/blog-banner.webp',   // 在这里设置你的首页横幅图片，Relative to the /src directory. Relative to the /public directory if it starts with '/'
    position: 'center',      // 在这里设置你的横幅图片位置，Equivalent to object-position, only supports 'top', 'center', 'bottom'. 'center' by default
    credit: {
      enable: false,         // 这里可以设置你的横幅图片的作者信息，Display the credit text of the banner image
      text: '',              // Credit text to be displayed
      url: ''                // (Optional) URL link to the original artwork or artist's page
    }
  },
  toc: {
    enable: true,           // 这里可以设置是否显示文章目录，Display the table of contents on the right side of the post
    depth: 2                // 文章目录默认显示到2级，Maximum heading depth to show in the table, from 1 to 3
  },
  favicon: [    // Leave this array empty to use the default favicon
    // {
    //   src: '/favicon/icon.png',    // Path of the favicon, relative to the /public directory
    //   theme: 'light',              // (Optional) Either 'light' or 'dark', set only if you have different favicons for light and dark mode
    //   sizes: '32x32',              // (Optional) Size of the favicon, set only if you have favicons of different sizes
    // }
  ]
}

个人信息与联系方式：

export const profileConfig: ProfileConfig = {
  avatar: 'assets/images/avatar.jpg',  // 个人头像，Relative to the /src directory. Relative to the /public directory if it starts with '/'
  name: '时歌',
  bio: '理解以真实为本，但真实本身并不会自动呈现.',
  links: [
    {
      name: 'QQ',
      icon: 'mdi:qqchat',       // 图标可以在 https://icones.js.org/ 中找到，Visit https://icones.js.org/ for icon codes
                                        // 如果本地没有，你需要安装对应的图标集，You will need to install the corresponding icon set if it's not already included
                                        // 安装方法：`pnpm add @iconify-json/<icon-set-name>`
      url: 'https://qm.qq.com/q/Qm6VfZnWM0',
    },
    {
      name: 'NetEaseMusic',
      icon: 'tabler:brand-netease-music',
      url: 'https://music.163.com/#/user/home?id=1997803975',
    },
    {
      name: 'GitHub',
      icon: 'fa6-brands:github',
      url: 'https://github.com/Lapis0x0',
    },
  ],
}

2.2 创建文章#

Astro框架是基于Markdown的，所以你可以在src/content/posts/目录中创建新的Markdown文件，编辑文章内容。 你也可以在终端中执行 pnpm new-post <filename> 创建新文章，并在 src/content/posts/ 目录中编辑。

文章格式：

---
title: My First Blog Post //文章标题
published: 2023-09-09 //文章发布日期
description: This is the first post of my new Astro blog.  //文章描述
image: ./cover.jpg  //这是文章封面，路径可以是相对路径，也可以是绝对路径
tags: [Foo, Bar] //文章标签
category: Front-end //文章分类
draft: false //是否为草稿
lang: jp      //仅当文章语言与 `config.ts` 中的网站语言不同时需要设置
---

2.3 部署#

如果你的博客基本信息已经设置完成，文章也已经迁移/创建好了，你可以选择参考官方指南将博客部署至 Vercel, Netlify, GitHub Pages 等；部署前需编辑 astro.config.mjs 中的站点设置。

具体来说，你可能需要修改 astro.config.mjs 文件的 site 配置（大约在24行左右），将其设置为你的域名。

// https://astro.build/config
export default defineConfig({
  site: "https://www.lapis.cafe/", // 修改为你的域名
  base: "/",
  trailingSlash: "always",
  integrations: [
    tailwind(
        {
          nesting: true,
        }
    ),

2.1 添加友链页面文件#

在src\content\spec目录下新建文件friends.md

NOTE

这个文件是新友链页面的内容文件，类似于其他页面内容（例如关于页面）来源的 about.md 文件。 添加这个文件的目的是为 “友链” 页面提供对应的内容数据，也便于通过统一方式调用内容。

在src\types\config.ts文件约37行位置添加以下内容

export enum LinkPreset {
  Home = 0,
  Archive = 1,
  About = 2,
+ Friends = 3,  
}

NOTE

定义一个新的导航链接 “Friends”。在项目结构中，LinkPreset 枚举可能用于统一管理网页导航条或特定页面布局，对应页面的标识。

2.2 国际化i18n翻译#

在src\i18n\i18nKey.ts文件约35行位置添加以下内容

  author = 'author',
  publishedAt = 'publishedAt',
  license = 'license',
+ friends = 'friends',  

NOTE

i18nKey.ts 文件负责国际化功能，这里添加了 friends 键值，表示新页面 “友链” 的国际化字符串键。 后续会根据项目支持的语言为 friends 提供不同语言的翻译。

按照自己的语言，在 src\i18n\languages 目录中编辑相应语言文件,以 zh_CN.ts 为例，在约 38 行位置添加内容

  [Key.author]: '作者',
  [Key.publishedAt]: '发布于',
  [Key.license]: '许可协议',
+ [Key.friends]: '友链', 

NOTE

编辑语言文件，为新增的 friends 翻译字符串提供对应语言的翻译（这里是中文：友链）。 如果项目支持其他语言，这个步骤需要在每个语言文件中添加 friends 的翻译，保证页面多语言显示功能。

在 src\constants\link-presets.ts 文件约 18 行位置添加内容

   [LinkPreset.Archive]: {
     name: i18n(I18nKey.archive),
     url: '/archive/',
   },
+  [LinkPreset.Friends]: { 
+    name: i18n(I18nKey.friends),  
+    url: '/friends/',  
+  },   
 }

NOTE

在 LinkPreset 到页面路径的映射中，加入新的友链页面配置。 name 设置链接名称，这里使用国际化 i18n(I18nKey.friends) 来确保多语言支持。 url 指定这个页面的路径 /friends/。

2.3 创建和配置页面的Astro文件#

在src\pages目录下复制原本的about.astro文件，重命名为friends.astro，在此文件中更改第 10 行、第 12 行和第14行的内容

-  const aboutPost = await getEntry('spec', 'about')
+  const friendsPost = await getEntry('spec', 'friends')

-  const { Content } = await aboutPost.render()
+  const { Content } = await friendsPost.render()

-  <MainGridLayout title={i18n(I18nKey.about)} description={i18n(I18nKey.about)}>
+  <MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>

NOTE

创建 friends.astro 作为友链页面的模板文件，复制使用了类似 about.astro 的结构代码。 修改了内容获取函数，使其加载的是 friends.md 数据，而非 about.md 数据。 修改了标题 title 和描述 description，指向 friends 的国际化字符串。

2.4 在导航栏中添加友链页面#

在 src\config.ts 文件约 39 行位置添加内容，注意要在 LinkPreset.About 末尾添加,

export const navBarConfig: NavBarConfig = {
  links: [
    LinkPreset.Home,
    LinkPreset.Archive,
    LinkPreset.About,
+   LinkPreset.Friends,  
    {

NOTE

navBarConfig 用于配置页面的导航栏。 在导航栏中添加新的 “友链” 入口，使用户能够通过导航直接访问这个页面。

2.5 创建卡片效果友链#

在之前创建的 friends.astro 文件中编辑

const friendsPost = await getEntry('spec', 'friends')
const { Content } = await friendsPost.render()
const items = [
  {  
    title: 'Astro',  
    imgurl: 'https://avatars.githubusercontent.com/u/44914786?s=48&v=4',  
    desc: 'The web framework for content-driven websites. ⭐️ Star to support our work!',  
    siteurl: 'https://github.com/withastro/astro',  
    tags: ['框架'],  
  },
    {  
    title: '时歌的博客',  
    imgurl: 'https://blog-1302893975.cos.ap-beijing.myqcloud.com/pic/avatar.webp?imageSlim',  
    desc: '理解以真实为本，但真实本身并不会自动呈现',  
    siteurl: 'https://www.lapis.cafe',  
    tags: ['博客'],  
  },
]
---
<MainGridLayout title={i18n(I18nKey.friends)} description={i18n(I18nKey.friends)}>
    <div class="flex w-full rounded-[var(--radius-large)] overflow-hidden relative min-h-32">
        <div class="card-base z-10 px-9 py-6 relative w-full ">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8 my-4">
                {items.map((item) => (   
                    <div class="flex flex-nowrap items-stretch h-28 gap-4 rounded-[var(--radius-large)]">
                        <div class="w-28 h-28 flex-shrink-0 rounded-lg overflow-hidden bg-zinc-200 dark:bg-zinc-900">
                            <img src={item.imgurl} alt="站点头像" class="w-full h-full object-cover">
                        </div>
                        <div class="grow w-full">
                            <div class="font-bold transition text-lg text-neutral-900 dark:text-neutral-100 mb-1">{item.title}</div>
                            <div class="text-50 text-sm font-medium">{item.desc}</div>
                            <div class:list={["items-center", {"flex": true, "hidden md:flex" : false}]}>
                                <div class="flex flex-row flex-nowrap items-center">
                                    {(item.tags && item.tags.length > 0) && item.tags.map((tag,i) => (  
                                    <div class:list={[{"hidden": i==0}, "mx-1.5 text-[var(--meta-divider)] text-sm" ]}>
                                        /
                                    </div>  
                                    <span class="transition text-50 text-sm font-medium">
                                        {tag}
                                    </span>))}
                                    {!(item.tags && item.tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
                                </div>
                            </div>
                        </div>
                        <a href={item.siteurl} target="_blank" rel="noopener noreferrer"class="flex btn-regular w-[3.25rem] rounded-lg bg-[var(--enter-btn-bg)] hover:bg-[var(--enter-btn-bg-hover)] active:bg-[var(--enter-btn-bg-active)] active:scale-95">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="transition text-[var(--primary)] text-4xl mx-auto iconify iconify--material-symbols" width="1em" height="1em" viewBox="0 0 24 24">
                                <path fill="currentColor" d="M12.6 12L8.7 8.1q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.6 4.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.6 4.6q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7z"></path>
                            </svg>
                        </a>
                    </div>
                ))}
            </div>  
            <Markdown class="mt-2">
                <Content />
            </Markdown>
        </div>
    </div>
</MainGridLayout>

NOTE

在 friends.astro 文件中，添加卡片效果的友链信息，包括站点名称、头像、描述、链接、标签等信息。

const items 部分就是添加的友链部分，继续添加即可。

最终效果：

3.1 giscus配置#

• 首先，你需要创建一个新的GitHub库用来“装下”博客的那些评论，你需要确保该仓库是公开的,否则访客将无法查看 discussion。
• 然后，你需要给你的这个仓库repo安装giscus app,否则访客将无法评论和回应。
• 最后，你需要确保 Discussions 功能已在你的仓库中启用。

打开giscus官方网站https://giscus.app/，进行配置：

• 语言：选择你目前正在使用的语言（一般应该都是简中吧？）
• 仓库：填写你刚刚创建的仓库（格式为你的用户名/仓库名）
• 页面 ↔️ discussion 映射关系(默认即可)
• Discussion 分类（默认即可）
• 特性（默认即可）
• 主题（默认即可）

按照顺序配置好之后，下方会自动生成

具体字段会根据你的情况自动生成

<script src="https://giscus.app/client.js"
        data-repo="[在此输入仓库]"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>

3.2 添加评论系统#

            <Markdown class="mt-2">
                <Content />
            </Markdown>
        </div>
    </div>

<!-- giscus评论 -->
<script src="https://giscus.app/client.js"
        data-repo="AULyPc/aulypc.github.io"
        data-repo-id="xxxxxxxxx"
        data-category="Announcements"
        data-category-id="xxxxxxxxxxxx"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="preferred_color_scheme"
        data-lang="zh-CN"
        crossorigin="anonymous"
        async>
</script>  

</MainGridLayout>

                <Icon name="material-symbols:chevron-right-rounded" class="text-[2rem] text-[var(--primary)]" />
            </div>}
        </a>
    </div>

<!-- giscus评论 -->
<script src="https://giscus.app/client.js"
    data-repo="AULyPc/aulypc.github.io"
    data-repo-id="xxxxxxxxxxx"
    data-category="Announcements"
    data-category-id="xxxxxxxxxxxxx"
    data-mapping="pathname"
    data-strict="0"
    data-reactions-enabled="1"
    data-emit-metadata="0"
    data-input-position="top"
    data-theme="preferred_color_scheme"
    data-lang="zh-CN"
    crossorigin="anonymous"
    async>
</script>  

</MainGridLayout>

<style is:global>
#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) }
#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) }
#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) }
#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) }
#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) }
#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) } 
</style>