1146 字
6 分钟
Astro博客系统搭建
2025-04-20
Tools
SSG
/
Astro

安装Astro#

pnpm create astro@latest astro-preline

安装依赖

pnpm i

集成 Vue#

pnpm astro add vue

全部选择同意，如下图：

image-20250418223754571

集成 Tailwind CSS#

官方集成文档

安装依赖#

pnpm install tailwindcss @tailwindcss/vite

astro.config.mjs#

// @ts-check
import { defineConfig } from "astro/config";
+ import tailwindcss from "@tailwindcss/vite";
// https://astro.build/config
export default defineConfig({
+ vite: {
+    plugins: [tailwindcss()],
+  },
});

导入 Tailwind CSS#

创建一个./src/styles/global.css文件并添加@importTailwind CSS。

@import "tailwindcss";

开始在你的项目中使用 Tailwind#

---
import "../styles/global.css";
---
<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

运行测试#

在 index.astro 中加入以下代码

<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind + Astro + Naive UI!</h1>

pnpm dev

preline UI#

安装preline#

pnpm install preline

[!tip]

请注意，Preline UI 在所有表单组件中都使用了Tailwind CSS Forms插件。如果您还没有安装，请不要忘记安装：pnpm install -D @tailwindcss/forms

增加Preline CSS#

在您的文件中包括 Preline global.css，例如projects_root_directory/src/styles/global.css。

@import "tailwindcss";

@import "preline/variants.css";
@source "../../node_modules/preline/dist/*.js";

/* Optional Preline UI Datepicker Plugin */
/* @import "preline/src/plugins/datepicker/styles.css"; */

/* Plugins */
/* @plugin "@tailwindcss/forms"; */

添加 Preline UI JavaScript#

将 Preline UI JavaScript 包含到文件中。 projects_root_directory/src/layouts/Layout.astro

---
import "../styles/global.css";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
  </head>
  <body>
    <h1>Astro</h1>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
    <h1 class="text-3xl font-bold text-blue-600">
      Hello Tailwind + Astro + Naive UI!
    </h1>
    <div class="hs-accordion-group">
      <div class="hs-accordion active" id="hs-basic-heading-one">
        <button
          class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-hidden focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400"
          aria-expanded="true"
          aria-controls="hs-basic-collapse-one"
        >
          <svg
            class="hs-accordion-active:hidden block size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
            <path d="M12 5v14"></path>
          </svg>
          <svg
            class="hs-accordion-active:block hidden size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
          </svg>
          Accordion #1
        </button>
        <div
          id="hs-basic-collapse-one"
          class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
          role="region"
          aria-labelledby="hs-basic-heading-one"
        >
          <p class="text-gray-800 dark:text-neutral-200">
            <em>This is the third item's accordion body.</em> It is hidden by default,
            until the collapse plugin adds the appropriate classes that we use to
            style each element. These classes control the overall appearance, as
            well as the showing and hiding via CSS transitions.
          </p>
        </div>
      </div>

      <div class="hs-accordion" id="hs-basic-heading-two">
        <button
          class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-hidden focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400"
          aria-expanded="false"
          aria-controls="hs-basic-collapse-two"
        >
          <svg
            class="hs-accordion-active:hidden block size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
            <path d="M12 5v14"></path>
          </svg>
          <svg
            class="hs-accordion-active:block hidden size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
          </svg>
          Accordion #2
        </button>
        <div
          id="hs-basic-collapse-two"
          class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
          role="region"
          aria-labelledby="hs-basic-heading-two"
        >
          <p class="text-gray-800 dark:text-neutral-200">
            <em>This is the third item's accordion body.</em> It is hidden by default,
            until the collapse plugin adds the appropriate classes that we use to
            style each element. These classes control the overall appearance, as
            well as the showing and hiding via CSS transitions.
          </p>
        </div>
      </div>

      <div class="hs-accordion" id="hs-basic-heading-three">
        <button
          class="hs-accordion-toggle hs-accordion-active:text-blue-600 py-3 inline-flex items-center gap-x-3 w-full font-semibold text-start text-gray-800 hover:text-gray-500 focus:outline-hidden focus:text-gray-500 rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:hs-accordion-active:text-blue-500 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400"
          aria-expanded="false"
          aria-controls="hs-basic-collapse-three"
        >
          <svg
            class="hs-accordion-active:hidden block size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
            <path d="M12 5v14"></path>
          </svg>
          <svg
            class="hs-accordion-active:block hidden size-3.5"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14"></path>
          </svg>
          Accordion #3
        </button>
        <div
          id="hs-basic-collapse-three"
          class="hs-accordion-content hidden w-full overflow-hidden transition-[height] duration-300"
          role="region"
          aria-labelledby="hs-basic-heading-three"
        >
          <p class="text-gray-800 dark:text-neutral-200">
            <em>This is the third item's accordion body.</em> It is hidden by default,
            until the collapse plugin adds the appropriate classes that we use to
            style each element. These classes control the overall appearance, as
            well as the showing and hiding via CSS transitions.
          </p>
        </div>
      </div>
    </div>
    <!-- Optional plugins通过 Preline UI 引入的方式，官方的这个不行 -->
  <script is:inline src="./assets/vendor/jquery/dist/jquery.min.js"></script>
  <script is:inline src="./assets/vendor/lodash/lodash.js"></script>
  <script is:inline src="./assets/vendor/datatables.net/js/dataTables.min.js"
  ></script>
  <script is:inline src="./assets/vendor/dropzone/dist/dropzone-min.js"></script>
  <script is:inline src="./assets/vendor/nouislider/dist/nouislider.min.js"
  ></script>
  <script is:inline src="./assets/vendor/vanilla-calendar-pro/index.js"></script>
    <!-- Preline UI -->
    <script>
      import "preline/dist/preline.js";
    </script>
  </body>
</html>

daisyUI#

安装 daisyUI#

pnpm add tailwindcss@latest @tailwindcss/vite@latest daisyui@latest

astro.config.mjs#

import { defineConfig } from "astro/config";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
  vite: {
    plugins: [tailwindcss()],
  },
});

src/assets/css/app.css#

@import "tailwindcss";
@plugin "daisyui";

src/layouts/Layout.astro#

---
import "../assets/app.css";
---

暗黑模式#

---
// ThemeToggle.astro
---

<label class="swap swap-rotate">
  <!-- this hidden checkbox controls the state -->
  <input type="checkbox" class="theme-controller" value="synthwave" />

  <!-- sun icon -->
  <svg
    class="swap-off h-6 w6 fill-current"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
    ></path>
  </svg>

  <!-- moon icon -->
  <svg
    class="swap-on h-6 w-6 fill-current"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
    ></path>
  </svg>
</label>
<!-- @ts-ignore -->
<script is:global>
  document.addEventListener("DOMContentLoaded", () => {
    const toggle = document.querySelector(".theme-controller");
    const savedTheme = localStorage.getItem("theme");

    if (savedTheme) {
      document.documentElement.setAttribute("data-theme", savedTheme);
      toggle.checked = savedTheme === "dark";
    }

    toggle.addEventListener("change", () => {
      const newTheme = toggle.checked ? "dark" : "light";
      document.documentElement.setAttribute("data-theme", newTheme);
      localStorage.setItem("theme", newTheme);
    });
  });
</script>

Giscus 评论#

  • 首先，你需要创建一个新的GitHub库用来“装下”博客的那些评论，你需要确保该仓库是公开的,否则访客将无法查看 discussion。
  • 然后，你需要给你的这个仓库repo安装giscus app,否则访客将无法评论和回应
  • 最后，你需要确保 Discussions 功能已在你的仓库中启用。官方说明

打开giscus官方网站https://giscus.app/，进行配置：

  • 语言：选择你目前正在使用的语言（一般应该都是简中吧？）
  • 仓库：填写你刚刚创建的仓库（格式为你的用户名/仓库名）
  • 页面 ↔️ discussion 映射关系(默认即可)
  • Discussion 分类（默认即可）
  • 特性（默认即可）
  • 主题（默认即可）

按照顺序配置好之后，下方会自动生成

<script src="https://giscus.app/client.js"
        data-repo="用户名/仓库名"
        data-repo-id="[在此输入仓库 ID]"
        data-category="[在此输入分类名]"
        data-category-id="[在此输入分类 ID]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light_tritanopia"
        data-lang="zh-CN"
        data-loading="lazy"
        crossorigin="anonymous"
        async>
</script>

关于页面，归档页面同理，修改对应的如about.astro，posts.astro，archive.astro，index.astro，即可

Astro博客系统搭建
https://www.tanghailong.com/posts/vue/astro/
作者
隆海
发布于
2025-04-20
许可协议
CC BY-NC-SA 4.0
Github推送自动发布最新代码到服务器
Django基础
RonHaiT Copyright ©2019- 2025 All right reserved / RSS / Sitemap
隆海博客 Powered by Astro & Fuwari

蜀ICP备20013430号 渝公网安备50009802002049号