你好!如果你刚刚搭建好这个博客,看着一堆文件有点懵圈,不知道该从哪里下手,那么这篇指南就是为你量身定做的!我们用最白话的方式,帮你理清思路,让你能快点开始写自己的Fuwari文章。
1. 怎么修改博客的名称、头像和介绍?
博客的名字、作者、导航栏这些基本信息,都在这个文件里:src/config.ts。
你可以用代码编辑器(比如 VSCode)打开它,然后找到里面的内容并修改:
-
博客名称与签名: 找到
title: "我的博客",把它改成你想要的名字。 下面还有subtitle: "记录生活与技术",也就是标题下面的小字,也可以随意修改。 -
个人信息与头像: 找到
profileConfig这部分。 修改name: "你的名字"和bio: "这里是你的个人签名..."。 如果要改头像,把你的头像图片放到src/assets/images/目录下,然后修改avatar: "assets/images/你的头像文件名.png"。
2. 怎么写一篇新的文章?
写文章非常简单。有两种方式:
方式一:使用命令新建
在终端(命令行)里输入:
pnpm new-post 我的第一篇文章这会自动在 src/content/posts/ 文件夹里帮你生成一个带模板的文件。
方式二:手动新建
直接在 src/content/posts/ 这个文件夹里,新建一个后缀为 .md 的文件,比如 hello.md。
3. 文章开头的那段代码是什么?
你打开一篇文章,会发现开头有一段被 --- 包裹的内容。这叫作 Frontmatter,是告诉博客程序这篇文章的基本信息的。
它大概长这样,你需要对应修改:
---title: 我的第一篇博客文章 # 文章的标题published: 2024-05-20 # 发布日期(格式:年-月-日)description: 这是我博客的第一篇文章。 # 文章的一句话简介image: "" # 封面图,如果没有留空就行tags: [日记, 生活] # 标签,方便别人搜索,可以写多个category: 闲聊 # 分类,一般一篇文章属于一个大分类draft: false # 如果是 true,这篇文章就是草稿,别人看不到;如果是 false 就是发布状态---在这段下面,你就可以开心地写文章内容啦!文章是用 Markdown 格式写的。如果不知道什么是 Markdown,建议搜一下“Markdown基础语法”,十分钟就能学会。
4. 文章到底是按什么排序的?这么多文件我怎么找?
当你打开存放文章的文件夹 src/content/posts/ 时,可能会看到各种文件,它们在文件夹里的排列顺序根本不重要!
博客网站是非常聪明的,它只看你文章内部写的日期(也就是上面提到的 Frontmatter 里的 published)。
网站会自动把日期最新的文章排在最前面(最上面),旧的排在后面(下面)。 所以,只要你发文章时写对日期,根本不用担心乱套。
至于怎么在电脑上找文件,🌟 强烈推荐的高手命名法:
- 给电脑看的文件名:用拼音或者简单的英文,中间用小横杠连起来。比如写爬山的文章,文件就命名为:
pashan.md。 - 给读者看的标题:在文章内部的
title里,尽情写中文!比如title: 今天和朋友去爬山。
下次你想找这篇爬山的文章来修改,只要在文件夹里扫一眼看到 pashan.md 就行了!
5. 怎么在文章里添加图片?(重点来了!)
加图片有两种最常用的超级大招,包你学得会:
大招一:网络直链(最简单)
如果你在网上看到一张图,或者你把图片传到了某个图床网站,你直接复制那个图片的网址。 然后在文章里直接写:
搞定!
大招二:本地图片(放在自己的博客里)
如果你想把照片存在自己的博客源码里,有两种流派任你选:
流派 A:大杂烩图库(适合到处都能用的图)
- 在你博客的
public文件夹下,新建一个叫images的文件夹(就像建个大相册)。 - 把你的图片(比如叫
maomi.jpg)直接拖进这个public/images/文件夹里。 - 在你的文章里,像这样召唤它:
注意: 前面一定要加
/images/哦!
流派 B:专属小套房(强烈推荐!最干净整洁)
如果你写了一篇去新疆玩的游记,配了 10 张图,全塞进大杂烩图库就太乱了。这时候你可以给这篇文章建个“专属小套房”!
- 在
src/content/posts/下面,新建一个文件夹,用拼音命名,比如叫xinjiang-youji。 - 在这个新建的文件夹里,新建你的文章文件,名字必须死记硬背叫
index.md(这是规定)。 - 把你那 10 张新疆的图片,全部拖进这个
xinjiang-youji文件夹里。 - 现在要在文章(
index.md)里用图片,简直简单到爆!直接写:
是不是超级清爽?文章和属于它的图片永远待在一起,再也不会找不到啦!
6. 怎么在本地预览我写的内容?
每次写完或者改了配置,你可以运行这个命令:
pnpm dev然后在浏览器里打开 http://localhost:4321,就能看到你博客的实时效果啦!
祝你写作愉快!有了这本秘籍,你的大脑绝对不会再混乱啦!遇到问题随时回来看看~