13 mins 阅读

基础配置

RefactX主题的基本设置指南

基础配置

欢迎阅读RefactX主题配置指南。所有网站基础设置均通过src/config.ts文件管理。本指南将详细介绍每个配置模块,助您高效定制网站。

核心站点配置h2

SITE对象包含网站基础信息与元数据设置:

src/config.ts
export const SITE: Site = {
title: 'RefactX', // 网站标题
description: 'RefactX是基于Astro.js与Dnzzk2构建的博客主题', // 网站描述
website: 'https://Litos.vercel.app/', // 网站URL
base: '/', // 基础路径(若非根目录部署需修改)
author: 'Dnzzk2', // 作者名称
ogImage: '/og-image.jpg' // 默认社交媒体分享图片
}

配置属性详解:

属性描述细节
title网站标题显示在浏览器标签页和搜索结果中,对SEO和品牌识别至关重要
description网站概述出现在搜索结果和社交媒体分享中,应包含SEO关键词
website生产环境URL用于生成规范链接和确保URL正确解析
base基础路径根目录部署保持’/‘,子目录部署需设置(如’/blog/‘)
author作者名称用于元标签和署名信息
ogImage默认社交媒体预览图在社交平台分享时显示的图片(推荐尺寸:1200×630像素)

导航结构h2

RefactX采用双导航系统增强用户体验。导航分为主导航(HEADER_LINKS)和页脚导航(FOOTER_LINKS)两部分。

主导航h3

主导航包含最重要的页面链接:

src/config.ts
export const HEADER_LINKS: Link[] = [
{
name: '文章', // 导航显示文本
url: '/posts', // 路由路径
},
{
name: '项目',
url: '/projects',
},
]

页脚导航h3

页脚导航提供完整站点地图:

src/config.ts
export const FOOTER_LINKS: Link[] = [
{
name: '首页',
url: '/',
},
{
name: '文章',
url: '/posts',
},
{
name: '项目',
url: '/projects',
},
{
name: '标签',
url: '/tags',
},
]

导航配置指南h3

导航链接配置详情:

属性描述用法
name显示文本导航菜单中显示的文本
url目标路径必须以’/‘开头的页面路径
TIP
  1. 主导航:聚焦核心内容板块
  2. 页脚导航:包含次级页面和站点资源
  3. 路径设置:所有路径相对于站点根目录
  4. 链接一致性:保持主导航与页脚导航的链接一致性

社交媒体集成h2

RefactX内置社交媒体集成功能,可在指定区域展示社交账号:

社交链接

src/config.ts中配置社交链接:

src/config.ts
export const SOCIAL_LINKS: SocialLink[] = [
{
name: 'github', // 平台标识
url: 'https://github.com/yourname', // 个人主页URL
icon: 'icon-[ri--github-fill]', // Iconify图标类名
count: 9 // 可选:粉丝数
},
{
name: 'twitter',
url: 'https://x.com/yourname',
icon: 'icon-[ri--twitter-x-fill]',
},
{
name: 'bilibili',
url: 'https://space.bilibili.com/yourSpaceId',
icon: 'icon-[ri--bilibili-fill]',
},
]

社交链接对象支持以下属性:

属性描述细节
name平台标识用于内部引用和无障碍访问
url个人主页URL平台个人主页的直接链接
icon图标类名来自Iconify的图标类,可通过Tailwind CSS自定义
count (可选)粉丝数可选,显示粉丝数;启用GitHub集成时可自动更新GitHub粉丝数
TIP
  1. Iconify选择社交图标
  2. 保持所有社交链接的图标风格一致
  3. 启用GitHub集成实现粉丝数自动更新
  4. 测试浅色/深色主题下的社交链接可见性

GitHub配置h2

聚光灯

访问首页时可见GitHub数据展示区(聚光灯),通过以下配置启用该功能。

配置详情h3

src/config.ts中配置GitHub相关功能:

src/config.ts
export const GITHUB_CONFIG: GithubConfig = {
ENABLED: true,
GITHUB_USERNAME: 'Dnzzk2',
TOOLTIP_ENABLED: true,
}

配置选项说明:

属性描述细节
ENABLED启用GitHub功能类型:布尔值,默认:true。启用后显示聚光灯并自动更新社交链接中的GitHub粉丝数
GITHUB_USERNAMEGitHub用户名类型:字符串,用于获取数据的用户名
TOOLTIP_ENABLED是否启用工具提示类型:布尔值,默认:true。鼠标悬停时显示具体贡献值
TIP

此功能已从构建请求改为客户端请求,使用github-contributions-api提供的API。特别感谢他们的开源贡献。

技能配置h2

技能

技能模块通过SKILLSSHOWCASE_CONFIG配置:

src/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]',
},
],
},
{
direction: 'right',
skills: [
{
name: 'Astro',
icon: 'icon-[lineicons--astro]',
},
{
name: 'Node.js',
icon: 'icon-[mdi--nodejs]',
},
{
name: 'React',
icon: 'icon-[mdi--react]',
},
{
name: 'Next.js',
icon: 'icon-[devicon--nextjs]',
},
{
name: 'Tailwind CSS',
icon: 'icon-[mdi--tailwind]',
},
{
name: 'Iconify',
icon: 'icon-[line-md--iconify2-static]',
},
],
},
],
}

SKILLSSHOWCASE_CONFIG配置对象属性详解:

属性描述细节
SKILLS_ENABLED是否启用技能展示功能设为true启用,false禁用
SKILLS_DATA技能展示数据数组包含多个技能组,每组可设置不同方向和技能列表
  direction技能组展示方向可选值:leftright,决定技能组在页面上的动画方向
  skills技能列表该方向组下的所有技能项
    name技能名称显示在页面上的技能名称
    icon技能图标Iconify格式图标,可从Iconify图标集获取

技能展示模块允许您在个人主页展示技术栈。通过direction属性可创建交替方向的技能组,增强页面动态视觉效果。每个技能项包含名称和图标,图标使用Iconify集成,提供数千种可选图标。

文章配置h2

RefactX通过src/config.ts中的POSTS_CONFIG对象提供全面的文章配置选项,包括文章显示设置、分页和布局选项。

src/config.ts
export const POSTS_CONFIG: PostConfig = {
title: '文章',
description: 'Dnzzk2的文章',
introduce: '这里将分享本主题的使用说明,助您快速上手。',
author: 'Dnzzk2',
homePageConfig: {
size: 5,
type: 'compact',
},
postPageConfig: {
size: 10,
type: 'image',
},
tagsPageConfig: {
size: 10,
type: 'time-line',
},
defaultHeroImage: '/og-image.jpg',
defaultHeroImageAspectRatio: '16/9', // '16/9' || '3/4'
postType: 'horizontal',
imageDarkenInDark: true,
readMoreText: '阅读更多',
prevPageText: '上一页',
nextPageText: '下一页',
tocText: '目录',
backToPostsText: '返回文章列表',
nextPostText: '下一篇',
prevPostText: '上一篇',
}

POSTS_CONFIG配置对象属性详解:

属性描述细节
title文章页面标题显示在浏览器标签页和搜索结果中
description文章页面描述用于SEO优化
introduce文章页面介绍标题下方的介绍文字
author文章作者用于元标签和署名信息
homePageConfig首页文章显示设置配置首页文章显示方式
  size每页文章数量显示文章的上限数量
  type文章显示类型文章列表中的卡片类型:compactimagetime-line
  heroImageLayout图片位置卡片中图片的位置:leftright。当类型为image时可用。默认为左右交替,可通过此属性强制修改,但优先级低于MD文件中的frontmatter
postPageConfig单篇文章显示设置配置单篇文章的显示方式
  size每页文章数量分页时的每页文章数
  type文章显示类型文章列表中的卡片类型:compactimagetime-line
tagsPageConfig标签页面显示设置配置按标签显示文章的方式
  size每页文章数量分页时的每页文章数
  type文章显示类型文章列表中的卡片类型:compactimagetime-line
defaultHeroImage默认封面图文章列表在image模式下显示的默认封面图
defaultHeroImageAspectRatio默认封面图宽高比默认封面图的宽高比例
postType文章顶部元数据的默认样式自定义文章顶部元信息的显示样式
imageDarkenInDark深色模式下加深封面图是否在深色模式下加深封面图
readMoreText”阅读更多”文本图片卡片下方”阅读更多”的文本内容
prevPageText”上一页”文本上一页按钮显示的文本
nextPageText”下一页”文本下一页按钮显示的文本
tocText”目录”文本目录中显示的文本
backToPostsText”返回文章列表”文本返回文章列表按钮显示的文本
nextPostText”下一篇”文本下一篇按钮显示的文本
prevPostText”上一篇”文本上一篇按钮显示的文本

本主题有三处显示文章列表的位置,因此使用三个属性分别配置:homePageConfigpostPageConfigtagsPageConfig,分别对应首页、文章页和详细标签页。

为保持页面风格丰富性,为type属性设置了三个值,对应三种文章卡片:compactimagetime-line

紧凑型
图片型
时间线型

您可以为三个页面配置适合的样式,也可通过在src/components/posts/card中创建自定义卡片文件,并在同目录下的List.astro中导入配置,实现个性化卡片样式。

标签配置h2

标签配置仅提供两个基础属性:

src/config.ts
export const TAGS_CONFIG: TagsConfig = {
title: '标签',
description: 'Dnzzk2的标签',
introduce: '所有文章标签都在这里,您可以点击筛选。',
}
属性描述细节
title标签页面标题显示在浏览器标签页和搜索结果中
description标签页面描述用于SEO优化
introduce标签页面介绍标题下方的介绍文字

项目配置h2

项目配置提供两个基础设置:

src/config.ts
export const PROJECTS_CONFIG: ProjectsConfig = {
title: '项目',
description: 'Dnzzk2的项目',
introduce: '我的项目示例。',
}

此外还提供项目列表配置:

src/config.ts
export const ProjectList: Project[] = [
{
name: 'RefactX',
description: '基于Astro.js与Dnzzk2构建的博客主题',
githubUrl: 'https://github.com/msrefs/RefactX',
website: 'https://RefactX.vercel.app/',
type: 'icon',
icon: 'icon-[ri--github-fill]',
star: 1,
},
{
name: 'RefactX',
description: '基于Astro.js与Dnzzk2构建的博客主题',
githubUrl: 'https://github.com/msrefs/RefactX',
website: 'https://RefactX.vercel.app/',
type: 'image',
icon: '/projects/logo.png',
star: 1,
},
]
属性描述细节
name项目名称项目名称
description项目描述项目描述
introduce项目页面介绍标题下方的介绍文字
githubUrl (可选)项目GitHub地址项目GitHub链接
website (可选)项目网站地址项目URL链接
type项目类型用于显示项目类型:iconimage
icon项目图标当类型为icon时使用iconify显示图标;为image时用作图片地址。图片需放在public/projects目录
imageClass (可选)项目图片类当类型为image时用于修改图片样式
star (可选)项目星标数GitHub星标数
fork (可选)项目复刻数GitHub复刻数