使用a-h/templ构建静态博客系统教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00597/article/details/148419085

使用a-h/templ构建静态博客系统教程

templ A language for writing HTML user interfaces in Go. 项目地址: https://gitcode.com/gh_mirrors/te/templ

前言

在现代Web开发中，静态网站因其高性能、高安全性和低成本等优势越来越受欢迎。本文将介绍如何使用a-h/templ这一Go语言模板引擎构建一个完整的静态博客系统。通过本教程，你将学习到如何组织模板代码、处理Markdown内容以及生成静态HTML文件。

项目结构设计

首先，我们需要规划博客系统的基本结构：

首页 - 展示所有文章列表
文章页 - 显示单篇文章内容
公共组件 - 头部(head)和内容区域(content)模板

核心模板实现

基础组件模板

我们首先创建可重用的基础组件模板：

package main

import "path"
import "github.com/gosimple/slug"

// 头部组件，包含页面标题
templ headerComponent(title string) {
    <head><title>{ title }</title></head>
}

// 内容区域组件，包含文章标题和内容
templ contentComponent(title string, body templ.Component) {
    <body>
        <h1>{ title }</h1>
        <div class="content">
            @body
        </div>
    </body>
}

// 完整文章页面模板
templ contentPage(title string, body templ.Component) {
    <html>
        @headerComponent(title)
        @contentComponent(title, body)
    </html>
}

// 首页模板，展示文章列表
templ indexPage(posts []Post) {
    <html>
        @headerComponent("My Blog")
        <body>
            <h1>My Blog</h1>
            for _, post := range posts {
                <div><a href={ templ.SafeURL(path.Join(post.Date.Format("2006/01/02"), slug.Make(post.Title), "/")) }>{ post.Title }</a></div>
            }
        </body>
    </html>
}

文章数据结构

在Go代码中定义文章数据结构：

type Post struct {
    Date    time.Time  // 发布日期
    Title   string     // 文章标题
    Content string     // 文章内容(Markdown格式)
}

数据处理与渲染

Markdown转换处理

博客文章内容使用Markdown格式编写，我们需要将其转换为HTML。这里使用goldmark库进行处理：

func Unsafe(html string) templ.Component {
    return templ.ComponentFunc(func(ctx context.Context, w io.Writer) (err error) {
        _, err = io.WriteString(w, html)
        return
    })
}

这个Unsafe函数允许我们将原始HTML内容直接写入输出，而不进行转义处理，这对于渲染Markdown转换后的内容是必要的。

静态页面生成

主程序负责生成所有静态页面：

func main() {
    // 设置输出目录
    rootPath := "public"
    if err := os.Mkdir(rootPath, 0755); err != nil {
        log.Fatalf("failed to create output directory: %v", err)
    }

    // 生成首页
    name := path.Join(rootPath, "index.html")
    f, err := os.Create(name)
    if err != nil {
        log.Fatalf("failed to create output file: %v", err)
    }
    err = indexPage(posts).Render(context.Background(), f)
    if err != nil {
        log.Fatalf("failed to write index page: %v", err)
    }

    // 为每篇文章生成独立页面
    for _, post := range posts {
        // 创建按日期组织的目录结构
        dir := path.Join(rootPath, post.Date.Format("2006/01/02"), slug.Make(post.Title))
        if err := os.MkdirAll(dir, 0755); err != nil && err != os.ErrExist {
            log.Fatalf("failed to create dir %q: %v", dir, err)
        }

        // 创建文章页面文件
        name := path.Join(dir, "index.html")
        f, err := os.Create(name)
        if err != nil {
            log.Fatalf("failed to create output file: %v", err)
        }

        // 转换Markdown为HTML
        var buf bytes.Buffer
        if err := goldmark.Convert([]byte(post.Content), &buf); err != nil {
            log.Fatalf("failed to convert markdown to HTML: %v", err)
        }

        // 渲染文章页面
        content := Unsafe(buf.String())
        err = contentPage(post.Title, content).Render(context.Background(), f)
        if err != nil {
            log.Fatalf("failed to write output file: %v", err)
        }
    }
}

最终输出结构

执行程序后，将生成以下文件结构：

public/
├── index.html
├── 2023/
│   ├── 01/
│   │   └── 01/
│   │       └── happy-new-year/
│   │           └── index.html
│   └── 05/
│       └── 01/
│           └── may-day/
│               └── index.html