https://github.com/halo-sigs/theme-astro-starter

Halo 2.0 Theme base on Astro and Thymeleaf(Experimental)
https://github.com/halo-sigs/theme-astro-starter

astro halo halo-theme halo-theme-starter

Last synced: about 2 months ago
JSON representation

Halo 2.0 Theme base on Astro and Thymeleaf(Experimental)

• Host: GitHub
• URL: https://github.com/halo-sigs/theme-astro-starter
• Owner: halo-sigs
• Created: 2022-07-28T14:53:32.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-28T15:10:27.000Z (about 2 years ago)
• Last Synced: 2024-06-05T17:59:39.111Z (3 months ago)
• Topics: astro, halo, halo-theme, halo-theme-starter
• Language: HTML
• Homepage: theme-astro-starter.vercel.app
• Size: 357 KB
• Stars: 13
• Watchers: 1
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-halo - theme-astro-starter - 与 Astro 集成的主题模板，使用 Astro 对模板进行预编译。 (Halo 2.0 / 主题)

README

        
# theme-astro-starter(Experimental)

Halo 2.0 基于 [Astro](https://astro.build) 和 [Thymeleaf](https://www.thymeleaf.org/) 的主题快速开始模板。

> 目前还处于实验和探索的阶段。

## 原理

1. Astro 作为 SSG 渲染框架，用于组件封装、页面框架组织、静态页面生成、静态资源的构建。

2. Thymeleaf 作为后端页面渲染框架，并且负责提供数据进行页面数据的渲染。由于 Thymeleaf 的语法是基于 HTML 元素的 Attributes 扩展，所以理论上并不会破坏 HTML 的结构。那么就可以在 Astro 组件中使用 Halo 提供的数据和页面进行绑定。这样就实现了在开发环境并不依赖于 Halo 后端，可以在开发过程中保留 hmr。并且可以做到在构建之后可以直接给 Halo 使用。

## 特性

1. 得益于 Astro 框架，可以使用现代的前端技术栈开发页面。包括但不限于 Vue React Svelte 等，意味着可以使用这些现代前端框架进行组件开发。

2. 在开发环境可以实现 hmr。

3. 在构建页面之后，会自动处理构建产物的资源地址，转换为 Thymeleaf 可识别的语法。

4. 最终构建的产物可通过 HTML 直接访问，也可以部署在任何静态页面服务器，可作为页面预览原型。但因为没有经过 Halo 进行数据绑定，所以没有数据填充。

## 开发

项目结构：

```text

├── astro.config.mjs                                        Astro 配置文件

├── package.json

├── pnpm-lock.yaml

├── src

│   ├── components

│   │   ├── Card.astro

│   │   └── PostCard.vue                                    Vue 3 组件

│   ├── layouts                                             Astro 布局组件

│   │   └── Layout.astro

│   └── pages

│       ├── index.astro                                     Astro 页面组件

│       └── post.astro

├── templates

│   ├── assets                                              bundle 之后的静态资源文件

│   │   ├── 4669d51c.dbc606a6.css

│   │   ├── PostCard.42ac9187.js

│   │   ├── chunks

│   │   │   └── runtime-core.esm-bundler.e59bb94c.js

│   │   └── client.e67fc49c.js

│   ├── favicon.ico

│   ├── index.html                                          构建之后的静态页面，作为 Thymeleaf 渲染模板

│   └── post.html

├── theme.yaml                                              主题描述文件

└── tsconfig.json

```

```bash

git clone https://github.com/ruibaby/theme-astro-starter

pnpm install

# 启动 Vite 开发环境

pnpm dev

# 构建最终产物，构建之后可以直接在 Halo 当中安装使用

pnpm build

```