人间修炼手册

外观

astro小博客带文档website ​

随便找个项目练练手

比如这个看起来还不错，带了个文档.

项目：https://github.com/usrme/website
原站：https://usrme.xyz/

技术背景 ​

纯小白
毛都不懂
只会瞎折腾

🚀 项目结构 ​

bash
$ tree -L 3 -I 'dist|node_modules|public'
.
├── astro.config.mjs //总体设置项
├── package.json
├── package-lock.json
├── README.md
├── src
│   ├── components
│   │   ├── Analytics.astro //统计分析那个，删的话把其它文件里的调用也要删掉。
│   │   ├── BlogPost.astro //标签，好像是
│   │   ├── Footer.astro //页脚，挺干净的
│   │   ├── Header.astro //站点标题啥的
│   │   ├── Navigation.astro //首页内容路由
│   │   └── ThemeIcon.astro //黑白模式啥的
│   ├── content
│   │   ├── config.ts //没啥要设置的
│   │   └── docs //文档模块目录，注意`index.md`是文档模块的首页，可以自己改
│   ├── env.d.ts
│   ├── layouts
│   │   ├── BaseLayout.astro //站标，选项卡标题
│   │   └── MarkdownPostLayout.astro //上页/下页
│   ├── pages
│   │   ├── about //关于页md
│   │   ├── about.astro
│   │   ├── blog.astro
│   │   ├── index.astro
│   │   ├── posts//博客文章目录
│   │   ├── rss.xml.js
│   │   ├── tils
│   │   └── tils.astro
│   └── styles
│       └── global.css
└── tsconfig.json

修改设置项 ​

编辑器打开astro.config.mjs

bash
export default defineConfig({
  site: 'https://站点域名,
  markdown: {
    drafts: false,
    shikiConfig: {
      theme: 'github-dark-dimmed',
      // https://github.com/shikijs/shiki/blob/main/docs/languages.md
      wrap: false,
    },
  },
  integrations: [
    starlight({
      title: '返回首页',
      customCss: [
        './src/styles/starlight.css',
      ],
//侧栏路由模块
      sidebar: [
        {
          label: '文档模块侧snippets文件夹路由标题',
          items: [
            { label: 'Ansible', link: '/snippets/ansible' },
            { label: 'Docker/Podman', link: '/snippets/docker-podman' },
            { label: 'Git', link: '/snippets/git' },
            { label: 'Kubernetes', link: '/snippets/kubernetes' },
            { label: 'PowerShell', link: '/snippets/powershell' },
            { label: 'Shell', link: '/snippets/shell' },
            { label: 'Vim', link: '/snippets/vim' },
          ],
        },
      ],
//好像是个啥玩意统计分析工具，可删。注意对应括号。其它文件里的也要删掉。
      head: [
        {
          tag: 'script',
          attrs: {
            src: '//gc.zgo.at/count.js',
            'data-goatcounter': 'https://usrme.goatcounter.com/count',
            defer: true,
          },
        },
      ],
    }),
  ],
})

删除统计 ​

整个文件干掉

src/components/Analytics.astro

打开

src/layouts/BaseLayout.astro

删掉最上面的

import Analytics from '../components/Analytics.astro';

和中间那个<Analytics />

站点名称 ​

src/components/Header.astro

首页内容路由 ​

src/components/Navigation.astro

html
<div>
	<ul class="list">
		<li class="element">
			<a href="/blog/" title="Blog posts">文章</a>
		</li>
		<li class="element">
			<a href="/tils/" title="'Today I Learned' posts">学习</a>
		</li>
		<li class="element">
			<a href="/about/" title="About me / CV">关于</a>
		</li>
		<li class="element">
			<a href="/snippets/" title="Snippets">文档</a>
		</li>
		<li class="element">
			<a href="/tags/" title="Tags">标签</a>
		</li>
	</ul>
</div>

内容格式 ​

src/content/docs/snippets文件夹里的文章

看样子抬头只需要title:标题、和description:摘要描述、两个部分。
属于比较简单的了。就烦那种想要写一大堆的。

选项卡上的标题 ​

src/layouts/BaseLayout.astro

const name = "小破站"

语言 ​

语言也在这个里面，<html lang="en">
没必要改了，本身就是英文语言，其它部分已经汉化了，就没必要了。

站标ico ​

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />

挺好看的圈圈，咱这里就不改了。

博客文章页的上一页和下一页 ​

src/layouts/MarkdownPostLayout.astro

手动汉化一下就行

bash
{prevPost && <a href={prevPost.url} title={prevPost.frontmatter.title} class="postnav postnav-left">« 上一页</a>}
{nextPost && currentPostIndex != 0 && <a href={nextPost.url} title={nextPost.frontmatter.title} class="postnav postnav-right">下一页 »</a>}

完 ​

好像也没啥要改的了
这是个很优秀的前端模板了属于

本地开发 ​

  • 本地环境
js
https://nodejs.cn/download/
https://nodejs.org/en/download/current

  • 安装依赖 pnpm install

  • 启动开发 pnpm run dev

  • 生产构建 pnpm run build

Markdown抬头格式 ​

文档部分 ​

bash
---
title: 一级标题
description: 摘要描述.
---

博客文章部分 ​

bash
---
layout: ../../layouts/MarkdownPostLayout.astro
pubDate: 2099-99-77
title: 一级标题
tags: ["标签1", "标签2", "标签3"]
---

看看效果