Logo
文章 项目 相册

配置 README 页面模块（站点、页眉/页脚链接、社交、GitHub、技能），包含字段文档和示例。

README 页面配置
3 mins
660 words
Loading views
推荐 Litos文档

以下文件与此文档兼容：

  • src/pages/index.astro - readme 页面。
  • src/config.ts - readme 页面配置。
  • src/components/base - 大部分组件来自这里。

站点配置h3

配置基本站点信息：

config.ts
export const SITE: Site = {
  title: 'Litos',
  description: 'Litos is a blog theme built with Astro.js and 夜猫子Ai手记.',
  website: 'https://litos.vercel.app/',
  lang: 'en',
  base: '/',
  author: '夜猫子Ai手记',
  ogImage: '/og-image.jpg',
}
属性描述
title站点的标题。
description站点的描述。
website你的最终部署 URL。Astro 使用此完整 URL 在最终构建中生成网站地图和规范 URL。强烈建议设置此配置以充分利用 Astro。
langlang 全局属性有助于定义元素的语言。
base部署的基础路径。Astro 将使用此路径作为开发环境和生产构建中页面和资源的根目录。
当设置为 /docs 时，astro dev 将在 /docs 启动你的服务器。
author站点的作者。
ogImage站点的 Open Graph 图片，但在具体文章页面，你可以使用其他 ogImage。

顶部链接h3

顶部跳转链接组件配置：

config.ts
export const HEADER_LINKS: Link[] = [
  {
    name: 'Posts',
    url: '/posts',
  },
]

底部链接h3

底部链接组件配置：

export const FOOTER_LINKS: Link[] = [
  {
    name: 'Readme',
    url: '/',
  },
]

社交链接h3

在 readme 页面中，你可以在主题介绍下方看到一排图标，可以通过以下方式配置。图标来自 Iconify。

config.ts
export const SOCIAL_LINKS: SocialLink[] = [
  {
    name: 'github',
    url: 'https://github.com/yourname',
    icon: 'icon-[ri--github-fill]',
    count: 11,
  },
  {
    name: 'twitter',
    url: 'https://x.com/yourname',
    icon: 'icon-[ri--twitter-x-fill]',
  },
]
属性描述
name社交链接的名称。
url社交链接的 URL。
icon社交链接的图标。
count该社交媒体的关注者数量。这是一个 可选 字段。

聚光灯h3

属性描述
ENABLED是否启用 GitHub 功能。
GITHUB_USERNAME用于获取数据的 GitHub 用户名。
TOOLTIP_ENABLED是否启用 GitHub 提示框（鼠标悬停卡片）功能。

技能展示h3

在 readme 页面中，你可以看到一个技能展示区域，可以通过配置以下代码来展示你的技能：

config.ts
export const SKILLSSHOWCASE_CONFIG: SkillsShowcaseConfig = {
  SKILLS_ENABLED: true,
  SKILLS_DATA: [
    {
      direction: 'left',
      skills: [
        {
          name: 'JavaScript',
          icon: 'icon-[mdi--language-javascript]',
        },
        {
          name: 'CSS',
          icon: 'icon-[mdi--language-css3]',
        },
        {
          name: 'HTML',
          icon: 'icon-[mdi--language-html5]',
        },
        {
          name: 'TypeScript',
          icon: 'icon-[mdi--language-typescript]',
        },
      ],
    },
  ],
}
属性描述
SKILLS_ENABLED是否启用技能展示功能。
SKILLS_DATA技能数据。一个对象代表一行。
    direction每个动画在两个方向运行：left 和 right。
    skills技能数组。
        name技能名称。
        icon技能图标。图标来自 Iconify。
TIP

建议在本地运行项目以查看效果。建议每行至少展示三个不同的技能。

文章h3

这里主要展示置顶文章。如果没有置顶文章，我们将根据 POSTS_CONFIG 显示最新 size 数量的文章。

Comments