Site Theme

日本語 | 中文 | Español | Français | हिन्दी | Italiano | Português (BR)

@mcptoolshop/site-theme

Multi-template Astro toolkit for landing pages, docs, product sites, portfolios, and SaaS dashboards.

Dark palette · Tailwind CSS v4 · GitHub Pages ready.

Templates · Quick Start · Design Tokens · Components · Deploy · License

______________________________________________________________________

模板

选择一个模板、脚手架、构建。每个模板都附带了经过CI测试的GitHub页面。

npx @mcptoolshop/site-theme list-templates            # see all options
npx @mcptoolshop/site-theme list-templates --json      # machine-readable output
npx @mcptoolshop/site-theme init --template app        # scaffold a template
npx @mcptoolshop/site-theme init --template app --dry-run   # preview files
npx @mcptoolshop/site-theme init --out ../other-repo   # scaffold into another directory

______________________________________________________________________

快速开始

搭建新场地

npx @mcptoolshop/site-theme init
cd site && npm install
npm run dev

这创建了一个 site/ 目录与Astro+Tailwind+主题连接，加上GitHub Pages工作流。CSS导入， @source 路径和基本路径都是预先配置的，不需要手动设置。

编辑您的内容

所有页面内容都存在 site/src/site-config.ts.编辑配置对象以自定义登录页面：

import type { SiteConfig } from '@mcptoolshop/site-theme';

export const config: SiteConfig = {
  title: '@mcptoolshop/my-tool',
  description: 'What my tool does.',
  logoBadge: 'MT',
  brandName: 'my-tool',
  repoUrl: 'https://github.com/mcp-tool-shop-org/my-tool',
  npmUrl: 'https://www.npmjs.com/package/@mcptoolshop/my-tool',
  footerText: 'MIT Licensed',

  hero: { /* ... */ },
  sections: [ /* ... */ ],
};

______________________________________________________________________

设计标记

主题通过以下方式传递语义设计令牌 styles/theme.cssComponents引用这些标记而不是硬编码的颜色，因此您可以通过覆盖一些值来重新构建整个主题。

默认令牌

自定义

覆盖您网站中的任何令牌 global.css 通过添加a @theme 进口后的区块：

@import "tailwindcss";
@import "@mcptoolshop/site-theme/styles/theme.css";
@source "../../node_modules/@mcptoolshop/site-theme";

/* Override tokens */
@theme {
  --color-accent: #60a5fa;          /* blue status dot   */
  --color-surface: #0a0a1a;         /* navy background   */
  --color-action: #60a5fa;          /* blue buttons      */
  --color-action-hover: #3b82f6;
}

代币生成标准Tailwind v4实用程序(bg-surface, text-heading, border-edge等），因此您也可以在自己的组件中使用它们。

______________________________________________________________________

组件

从包中单独导入组件：

---
import BaseLayout from '@mcptoolshop/site-theme/components/BaseLayout.astro';
import Hero from '@mcptoolshop/site-theme/components/Hero.astro';
import Section from '@mcptoolshop/site-theme/components/Section.astro';
import FeatureGrid from '@mcptoolshop/site-theme/components/FeatureGrid.astro';
import DataTable from '@mcptoolshop/site-theme/components/DataTable.astro';
import CodeCardGrid from '@mcptoolshop/site-theme/components/CodeCardGrid.astro';
import ApiList from '@mcptoolshop/site-theme/components/ApiList.astro';
import DocLayout from '@mcptoolshop/site-theme/components/DocLayout.astro';
import Sidebar from '@mcptoolshop/site-theme/components/Sidebar.astro';
import TableOfContents from '@mcptoolshop/site-theme/components/TableOfContents.astro';
import ContentSection from '@mcptoolshop/site-theme/components/ContentSection.astro';
import SocialProof from '@mcptoolshop/site-theme/components/SocialProof.astro';
import PricingGrid from '@mcptoolshop/site-theme/components/PricingGrid.astro';
import TestimonialGrid from '@mcptoolshop/site-theme/components/TestimonialGrid.astro';
import CtaBanner from '@mcptoolshop/site-theme/components/CtaBanner.astro';
import PortfolioGrid from '@mcptoolshop/site-theme/components/PortfolioGrid.astro';
import FilterBar from '@mcptoolshop/site-theme/components/FilterBar.astro';
---

该主题包含17个Astro组件，分为五类：布局外壳、内容部分、营销块、作品集和文档。

基础布局

带有粘性页眉（徽标徽章、导航链接、GitHub/npm按钮）和页脚的完整页面外壳。

英雄

渐变英雄，带有状态徽章、标题、CTA和可选代码预览卡。

部分

带锚的型材包装 id、标题和可选副标题。

功能网格

3列响应式卡片网格。优点： features: { title, desc }[]

数据表

基于网格的边界表。道具： columns: string[], rows: string[][]

编解码器网格

2列深色代码块卡网格。道具： cards: { title, code }[]

下载中

全宽堆叠API参考卡。道具： apis: { signature, description }[]

过滤栏

客户端搜索+投资组合网格的标签过滤栏。道具： tags: string[], searchable?: boolean, searchPlaceholder?: string

投资组合网格

可配置的卡片网格，带有状态徽章、类别分组和图像/徽章回退。道具： items: PortfolioItem[], columns?: 2 | 3 | 4, groupByCategory?: boolean

DocLayout

两栏布局，带有可折叠的侧边栏和主要内容区域。被使用 文档 模板。道具： sidebar: SidebarGroup[], currentPath: string

侧边栏

带有活动链接突出显示的分组导航列表。道具： groups: SidebarGroup[], currentPath?: string

目录

页面标题导航。道具： headings?: { text, id, depth }[]

内容部分

通过以下方式呈现HTML的锚链接内容块 set:html.道具： id: string, title: string, content: string

社会证明

带有标题和值/标签对的统计栏。道具： headline?: string, stats?: { value, label }[]

价格网格

响应式定价等级卡，突出显示“热门”等级。道具： tiers?: PricingTier[]

推荐表格

两列引用卡，带有头像回退首字母。道具： testimonials?: { quote, author, role, avatarUrl? }[]

CtaBanner

全宽渐变行动号召横幅。道具： headline: string, description?: string, cta: { href, label }

______________________________________________________________________

节类型

这 sections 配置中的数组支持这些 kind 值：

各部分按照它们在阵列中出现的顺序进行渲染。

______________________________________________________________________

部署

这 init CLI创建 .github/workflows/pages.yml 自动。上线：

1. 将您的仓库推送到GitHub
2. 转到您的仓库→ 设置→ Pages
3. 在...之下 构建和部署，set 来源 到 GitHub 操作
4. 将任何更改推送到 site/ 触发第一次构建

您的网站将在 https://.github.io//.

______________________________________________________________________

安全和数据范围

HTML属性（集合：HTML）

看 安全.md 用于漏洞报告。

记分卡

全面审计： 发货日期.md · SCORECARD.md

许可证

麻省理工学院

______________________________________________________________________

建造于 MCP工具车间