Posts
Tags
Friends
About

Astro 部署博客与常用命令

Netflix
Updated on

部署

  • 上Astro官网找个心仪的主题
  • 点击一键部署至Vercel。此处记得登录Vercel。
  • 找个文件夹，把下载下来的主题文件放在里面。现在你可以随便修改文件内容，让博客变成你喜欢的性状咯，可以使用如下命令预览。
npm run dev
  • 改完了就该把博客部署在网上了。在博客的本地文件地址栏里覆盖输入cmd，打开终端，连接vercel：
vercel --prod
  • 然后根据新弹出的指令一直y。
  • 结束。

微调

修改博客底色

# src\styles\global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	pre,
	code {
		font-size: 0.875rem;
	}

	body {
		font-family: 'KingHwa_OldSong', system-ui, sans-serif;
		background-color: rgb(249, 249, 249);
	}

	/* 暗色模式保持原样 */
	.dark body {
		background-color: rgb(24, 24, 27); /* 保持原来的暗色背景 */
	}
}

# src\layouts\BaseLayout.astro

<body
	class="dark:text-zinc-100 pt-16 sm:pt-0"
>

引用中文网字计划

让博客全局引用字体KingHwa_OldSong，同时添加 system-ui 和 sans-serif 作为后备字体，以防京华老宋体加载之前或加载失败。

# src\styles\global.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	pre,
	code {
		font-size: 0.875rem;
	}

	/* 添加全局字体设置 */
	html, body {
		font-family: 'KingHwa_OldSong', serif;
	}
}

# src\layouts\BaseLayout.astro:

---
import BaseHead from './components/BaseHead.astro';
import Header from './components/Header.astro';
import Footer from './components/Footer.astro';
import { loadEnv } from 'vite';

const { GTAG_MEASUREMENT_ID } = loadEnv(process.env.NODE_ENV || 'production', process.cwd(), '');
const { title, description, image } = Astro.props;
---

<!doctype html>
<html lang='en'>
	<head>
		<BaseHead title={title} description={description} image={image} />
		<!-- 添加京华老宋体 CDN -->
		<link rel='stylesheet' href='https://chinese-fonts-cdn.deno.dev/packages/jhlst/dist/%E4%BA%AC%E8%8F%AF%E8%80%81%E5%AE%8B%E4%BD%93v2_002/result.css' />
	</head>
	// ... 现有代码 ...

修改选中文本的颜色

蓝色太丑了，我要修改为心爱的绿色。

# src\styles\global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	pre,
	code {
		font-size: 0.875rem;
	}

	body {
		font-family: 'KingHwa_OldSong', system-ui, sans-serif;
	}

	/* 添加文本选中的样式 */
	::selection {
		background-color: #BBD733;
		color: black; /* 为了确保选中文字清晰可见 */
	}
}

加深悬浮目录

原来的悬浮目录现实的文章标题层级太少了，难以忍受！

---
const { headings, maxLevel = 6 } = Astro.props;  // 改为 6
const toc = buildToc(headings);
function buildToc(headings: any) {
	const _toc: any = [];
	const parentHeadings = new Map();
	(headings || []).forEach((h: any) => {
		const heading = { ...h, subheadings: [] };
		parentHeadings.set(heading.depth, heading);
		// Change 2 to 1 if your markdown includes your <h1>
		if (heading.depth === 2) {
			_toc.push(heading);
		} else {
			// 移除 maxLevel > 2 的条件检查，改为检查实际深度
			if (heading.depth <= maxLevel) {
				parentHeadings.get(heading.depth - 1)?.subheadings?.push(heading);
			}
		}
	});
	return _toc;
}
---

<!-- 其余代码保持不变 -->