Astro启动器

self-esteem-astro — Astro 启动器模板

作者 m-durana

self-esteem-astro 是一个基于 Astro 的杂志风格编辑类网站模板，包含首页、博客、标签、作品与联系页面，采用 MIT 许可。

打开源站下载源码 ZIP

看看你的网站会是什么样

浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。

1 个预览视图
作者提供的预览
作者提供的预览

来自项目 README 的原始预览。

目前有 1 张原始预览，可打开完整图片查看设计细节。

截图用于了解视觉与布局，交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中，快速了解它的特点。

01

全视口杂志风格首页，用于呈现编辑类内容

02

博客索引与 MDX 文章页，支持上一篇/下一篇导航

03

根据文章 frontmatter 自动生成 /tags/[tag] 标签页

04

内置 /studio、/contact、/work 与 /404 页面，作品页为数据驱动

05

输出 /rss.xml，并在 BaseLayout 中提供 OG/Twitter 元信息

06

提供 PageLayout 与 _template.astro.example 作为新增页面的起点

模板详细介绍

self-esteem-astro 是一个用 Astro 构建的杂志风格编辑类模板，原布局来自 Aysenur Turk 的 CodePen 作品，并由 m-durana 重新实现为完整项目。模板提供全视口杂志式首页，以及 /blog 索引与 /blog/[slug] 的 MDX 文章页（含上一篇/下一篇导航），标签页由文章 frontmatter 自动生成。此外还包含 /studio、/contact、/work（数据驱动）和 /404 页面，并在 /rss.xml 输出 RSS，BaseLayout 中提供 OG/Twitter 元信息。内容通过 src/content/ 下的 Markdown 与 MDX 文件管理，文章 schema 支持 title、bigTitle、emphasis、headline、excerpt、author、date、cover、tags、featured、pageNumber 等字段；侧栏条目与作品条目使用更小的 schema，定义在 content.config.ts。新增子页面可复制 _template.astro.example 并编辑 props，再按需在 Menu.astro 中添加导航链接。样式集中在 styles/global.scss，STYLEGUIDE.md 记录了设计 token 与字号体系。模板以 MIT 许可发布，免费范围覆盖该版本代码；演示图片、字体、图标等第三方素材需按各自许可核对，域名、托管等外部服务可能另行收费。

Astro启动器

适合你的项目吗？

适用场景

  • 搭建以文章为核心的杂志或编辑类网站
  • 发布带标签、封面与摘要的 Markdown/MDX 长文
  • 展示作品集或项目列表（/work 数据驱动）
  • 需要 RSS 订阅与社交分享元信息的静态站点

适合人群

  • 熟悉 Astro 内容集合与 MDX 写作的开发者
  • 需要杂志式排版与编辑内容结构的个人或团队
  • 希望以模板快速起步并自行调整样式与页面的项目

上手与定制指南

结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。

  1. 1

    可使用 npm create astro@latest -- --template m-durana/self-esteem-astro 脚手架，或直接 git clone 后执行 npm install

  2. 2

    开发运行 npm run dev（默认 http://localhost:4321），构建运行 npm run build，静态输出到 ./dist

  3. 3

    文章放在 src/content/posts/，侧栏条目放在 src/content/featured/，作品条目放在 src/content/work/，字段定义见 content.config.ts

  4. 4

    新增页面时复制 src/pages/_template.astro.example 为 src/pages/<name>.astro，并在 src/components/Menu.astro 中添加导航链接

  5. 5

    演示图片、字体、图标等第三方素材需单独核对许可，域名与托管等外部服务可能产生费用

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供；担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 模板的原始版式设计来自 Aysenur Turk 的 CodePen 作品，README 与 License 部分均标注该原始布局版权归 Aysenur Turk 所有；使用时需保留此署名与版权说明。
  • 项目以 MIT 许可发布，但原始 CodePen 布局版权归 Aysenur Turk；分发或再发布时须保留该版权与许可声明。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

Original layout by [Aysenur Turk](https://codepen.io/TurkAysenur/pen/gOmMgpx), re-implemented here as a full project.

README 原文

MIT License. Original CodePen layout © Aysenur Turk

README 原文
https://github.com/m-durana/self-esteem-astro/blob/main/LICENSEhttps://github.com/m-durana/self-esteem-astro/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
Astro Themes
资料与维护参考分
资料一般 · 67 / 100
技术栈
Astro
网站类型
启动器
这个分数如何计算

本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-08-01
截图检查日期
2026-10-03

目前没有记录演示链接。请依据仓库说明在本地评估；仅凭截图无法确认交互行为。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。

查看当时使用的来源资料

SHA-256: 938e1eae0e7ef7959ef50216bf5ecdf6b4c6b2eb8c9230cec37347ec29b45bc7

2026-10-03T03:40:31.289Z

来源文件 / 仓库
# Self Esteem (Astro Template)

![Magazine cover homepage](public/hero.jpeg)

[![Live preview](https://img.shields.io/badge/▶_Live_preview-121418?style=for-the-badge&labelColor=121418&color=e9e6e4)](https://miro.build/templates/self-esteem)

A magazine-style editorial template built with [Astro](https://astro.build). Original layout by [Aysenur Turk](https://codepen.io/TurkAysenur/pen/gOmMgpx), re-implemented here as a full project.

## Quick start

Scaffold a new project from this template:

```bash
# npm
npm create astro@latest -- --template m-durana/self-esteem-astro

# pnpm
pnpm create astro@latest --template m-durana/self-esteem-astro

# yarn
yarn create astro --template m-durana/self-esteem-astro

# bun
bun create astro@latest --template m-durana/self-esteem-astro
```

Or use the "Use template" button in the top right or clone directly:

```bash
git clone https://github.com/m-durana/self-esteem-astro.git
cd self-esteem-astro
npm install
```

Then:

```bash
npm run dev      # http://localhost:4321
npm run build    # static output to ./dist
```

## Features

- Full-viewport magazine homepage (`/`)
- `/blog` index + `/blog/[slug]` MDX post pages with prev/next
- `/tags/[tag]` pages generated from post frontmatter
- `/studio`, `/contact`, `/work` (data-driven), `/404`
- RSS at `/rss.xml`, OG/Twitter meta in `BaseLayout`
- `PageLayout` + `_template.astro.example` for creating new pages

## Structure

```
src/
├── components/      Menu, Footer, FeaturedArticle, Sidebar, Marquee, Circle, StickyHeader
├── content/         posts/ (md+mdx), featured/, work/
├── content.config.ts
├── layouts/         BaseLayout, PageLayout
├── pages/           index, blog/, tags/, studio, contact, work, 404, rss.xml
└── styles/global.scss
```

See [STYLEGUIDE.md](STYLEGUIDE.md) for tokens, type scale, and a guide for staying on-brand.

## Authoring a post

Drop a `.md` or `.mdx` file in `src/content/posts/`:

```md
---
title: 'Your Article Title'
bigTitle: 'Hero'
emphasis: 'Word' # optional, italicised inside the headline
headline: 'Sharing The {emphasis} Acclaim About Motivation'
excerpt: 'Teaser shown on the cover and in /blog.'
author: 'Jane Doe'
date: 2026-01-01
cover: 'https://images.unsplash.com/...'
tags: ['attention', 'quiet']
featured: true # appear on the magazine cover
pageNumber: 'NO. 01' # optional, used by the sticky header
---

Long-form body.
```

Sidebar entries (`src/content/featured/`) and portfolio items (`src/content/work/`) use smaller schemas; see `content.config.ts`.

## Adding a subpage

Copy `src/pages/_template.astro.example` to `src/pages/<name>.astro`, edit the props, add a link in `src/components/Menu.astro` if it should appear in nav.

## License

MIT License. Original CodePen layout © Aysenur Turk
反馈内容错误

看看同类模板

对比同技术栈与用途的模板，找到更适合的视觉与内容结构。

astrowind

astrowind

⭕️ AstroWind: A free template using Astro v7 and Tailwind CSS v4. Astro starter theme.

Astro · 博客

accessible-astro-starter

accessible-astro-starter

Accessible Astro Starter 是一个以无障碍为核心理念的 Astro 6 启动模板，由 incluud 团队维护。

Astro · 博客

astro-erudite

astro-erudite

An opinionated, unstyled static blogging template built with Astro and native CSS.

Astro · 作品集

astro-shopify

astro-shopify

astro-shopify 是一个面向开发者的轻量级电商启动模板，用于构建基于 Shopify 的无头店面。

Astro · 电商

brutal

brutal

A neobrutalism Astro starter theme

Astro · 启动器

qwind

qwind

⭕️ Qwind: A template to make your website using Qwik + Tailwind CSS.

Astro · 工具站