目 录CONTENT

文章目录

Astro Air Blog模版搭建博客

米尔嘉
2023-07-24 / 0 评论 / 1 点赞 / 285 阅读 / 754 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-07-24,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

使用模版,新建仓库,fork仓库到本地

 git clone git@github.com:minterjia/Blog.git

进入博客根目录

删除远程分支

git push origin --delete add-license-1

详解:
根据您提供的命令 git push origin --delete add-license-1,您想要删除名为 add-license-1 的远程分支。

执行该命令后,Git 将会删除远程仓库 origin 上的 add-license-1 分支。请确保您有足够的权限执行此操作。

如果分支删除成功,您将在命令行中看到相应的确认消息。例如:

To <remote_repository_url>
 - [deleted]         add-license-1

这表示 add-license-1 分支已成功从远程仓库 origin 中删除。

执行截图
20230723232546

创建本地分支dev,提交到远程仓库dev分支

要在远程仓库中创建一个新的分支,并将其推送到远程仓库,可以按照以下步骤进行操作:

  1. 首先,创建一个本地分支并切换到该分支。使用以下命令创建名为 dev 的本地分支:

    git branch dev
    

    然后切换到该分支:

    git checkout dev
    
  2. 在本地分支上进行所需的修改和提交。

  3. 推送本地分支到远程仓库。使用以下命令将本地分支 dev 推送到远程仓库:

    git push -u origin dev
    

    这将会将本地分支 dev 推送到名为 origin 的远程仓库,并在远程仓库中创建一个与本地分支同名的分支。

    -u 参数用于将本地分支与远程分支关联起来,使得以后的推送操作可以简化为 git push,而不需要指定分支名。

现在,您已成功创建并推送了一个新的远程分支 dev

切回main分支

git checkout main

使用方法

在项目根目录下执行这些命令:

命令 动作
npm install 安装依赖
npm run dev 本地预览 localhost:3000
npm run build 编译生成静态网站,结果在 ./dist/
npm run preview 在发布之前,可以本地预览
npm run astro … Run CLI commands like astro add, astro check
npm run astro --help Get help using the Astro CLI

🚀项目结构

在这个项目中,你可以看到如下结构

|-- README.md
|-- astro.config.mjs
|-- package.json
|-- public
|   |-- favicon.svg
|   `-- static
|-- src
|   |-- components
|   |   |-- BaseHead.astro // 公共头部 head 标签
|   |   |-- Footer.astro  // 底部
|   |   |-- Header.astro // 头部
|   |   `-- Navigation.astro // 导航
|   |-- consts.js // 常量,包括网站的名称,地址等。
|   |-- env.d.ts
|   |-- layouts
|   |   |-- BaseLayout.astro
|   |   |-- MarkdownPost.astro
|   |   |-- MoreTile.astro
|   |   `-- Tile.astro
|   |-- pages
|   |   |-- about.astro
|   |   |-- archive.astro
|   |   |-- index.astro
|   |   |-- posts 
|   |   |   |-- some markdown post.md  // 这里写文章
|   |   |-- rss.xml.js // RSS feed
|   |   `-- tags
|   |       `-- [tag].astro // 标签页
|   |-- styles
|   |   `-- global.css // 全局样式
|   `-- utils.js

三种图片显示模式

有三种图片显示模式: wide, big, inline. 当你编写 mark 文件的时候可以指定 wide 或 big 或 inline 到你的图片 alt 属性中, 比如这样:

![alt content|wide](a.png)

分割符号是|,默认的模式为 big.

1

评论区