skip to content
Logo hxjx blog

搭建一个简洁的博客

/ 2 min read

技术

1.Fork仓库：

https://github.com/zouzonghao/Astro-theme-Cactus-zh_CN

2.修改仓库文件:

文件位置：仓库/public/admin/config.yml

backend:

name: github

branch: main # change this to your branch

repo: xushangjuncn/Astro # 1、change this to your repo

site_domain: bg.363689.xyz # 2、change this to your domain

base_url: https://bg.363689.xyz # 3、change this to your prod URL

auth_endpoint: oauth # the oauth route provided by the integration

3.创建github认证地址：

https://github.com/settings/applications/new

记录：

Client ID Ov23liBR9jZA2mkbWyvG

Client secrets 476d16c9f74895945009487a4c4e07f9d618fbac

4.Vercel部署

地址：https://vercel.com/

添加环境变量：

OAUTH_GITHUB_CLIENT_ID

OAUTH_GITHUB_CLIENT_SECRET

5.信息修改

5.1 使社交图片加载

在astro.config.ts文件修改域名

5.2 修改底底部版权

在/src/components/layout/Footer.astro文件里修改版权信息

5.3 修改标签名称

在src/site.config.ts文件里修改标签名称

5.4 添加标签logo

在src/components/BaseHead.astro文件里的里加上

<!-- 下面这行是新添加的，用于显示浏览器标签页的 Logo -->
<link rel="icon" type="image/svg+xml" href="/icon.svg" />

5.5 后台页面加标签logo

public/admin/文件夹下添加新文件index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex" />
    <title>后台管理</title>


    <!-- 这是我们新添加的 Logo -->
    <link rel="icon" type="image/svg+xml" href="/icon.svg" />


    <!-- 这行代码会加载后台的默认配置 -->
    <link href="/admin/config.yml" type="text/yaml" rel="cms-config-url" />
  </head>
  <body>
    <!-- 这行代码会加载并启动后台管理系统 -->
    <script src="https://unpkg.com/decap-cms@^3.3.3/dist/decap-cms.js"></script>
  </body>
</html>

5.6 修改主页logo

在src/components/layout/Header.astro文件里修改

5.7 隐藏由于Markdown语法而出现的红色#

在src/styles/global.css文件里末尾加上

/* --- 从这里开始添加下面的代码 --- */


/* 移除三级标题前自动添加的'#'号装饰 */
h3::before {
  content: none !important;
}


/* 如果其他标题也有#，可以取消下面这段代码的注释 */
/*
h1::before,
h2::before,
h4::before,
h5::before,
h6::before {
  content: none !important;
}
*/