OpenSEO Template

一个基于 React + TypeScript 的 SEO 优化模板组件库，使用纯 CSS 样式，无需额外配置。

安装

npm install openseo-template
# 或
yarn add openseo-template
# 或
pnpm add openseo-template

使用方法

直接使用（推荐）

组件的 CSS 已经内置，无需单独导入样式文件：

import { Template1, type ArticleData } from 'openseo-template';

const articleData: ArticleData = {
  template: "template1",
  keyword: "Home Security Systems",
  url_suffix: "home-security-systems",
  title_options: ["Best Home Security Systems of 2024"],
  meta_description_options: ["Discover the best home security systems worth buying in 2024"],
  intro_options: ["Protecting your home is a top priority for every family..."],
  main_title: "Best Home Security Systems of 2024",
  main_image_url: "https://example.com/image.jpg",
  product_list: [
    {
      product_name: "SimpliSafe",
      tag: "Best Overall Home Security System",
      desc: "SimpliSafe offers a comprehensive home security solution...",
      key_features: [
        "No contract, flexible subscription",
        "Professional monitoring service",
        "Easy to install"
      ]
    }
  ],
  comparison_table: {
    title: "Comparison of Major Security Systems",
    columns: ["Brand", "Price", "Features"],
    rows: [
      ["SimpliSafe", "$299", "No contract"],
      ["Ring", "$199", "Video doorbell"]
    ]
  },
  guide_section: {
    title: "How to Choose a Home Security System",
    content: "When choosing a home security system, consider..."
  },
  faq_list: [
    {
      question: "Do home security systems require professional installation?",
      answer: "Most modern security systems support DIY installation..."
    }
  ],
  conclusion: "Choosing the right home security system can provide comprehensive protection for your family...",
  tips_options: ["Regularly check device batteries to ensure the system is functioning properly"],
  // Optional: Customize labels (supports any language)
  labels: {
    products_title: "Featured Products",
    features_title: "Key Features",
    tips_title: "Pro Tip",
    faq_title: "Frequently Asked Questions",
    conclusion_title: "Conclusion",
    copyright_text: "© 2026 · All rights reserved"
  }
};

function App() {
  return <Template1 data={articleData} />;
}

模板风格

Template1 - 标准布局

• 经典的蓝色/靛蓝色系
• 清晰的层次结构
• 适合大多数场景

import { Template1 } from 'openseo-template';
<Template1 data={articleData} />

Template2 - 卡片式现代风格

• 翠绿色系（emerald/teal）渐变
• 网格卡片布局
• 现代感强，适合科技产品

import { Template2 } from 'openseo-template';
<Template2 data={articleData} />

Template3 - 杂志式排版风格

• 石色系（stone）+ 琥珀色（amber）
• 衬线字体，优雅排版
• 适合高端产品和专业内容

import { Template3 } from 'openseo-template';
<Template3 data={articleData} />

Template4 - 极简主义风格

• 黑白灰配色，大量留白
• 细线条，轻量级设计
• 适合简约品牌和艺术类产品

import { Template4 } from 'openseo-template';
<Template4 data={articleData} />

Template5 - 深色科技风格

• 深蓝紫配色，科技感强
• 渐变和光效
• 适合科技、游戏、创新产品

import { Template5 } from 'openseo-template';
<Template5 data={articleData} />

Template6 - 渐变活力风格

• 彩色渐变背景，充满活力
• 动态视觉效果
• 适合年轻品牌、创意产品

import { Template6 } from 'openseo-template';
<Template6 data={articleData} />

Template7 - 经典商务风格

• 蓝白配色，专业稳重
• 传统布局，信息密度高
• 适合B2B、企业服务

import { Template7 } from 'openseo-template';
<Template7 data={articleData} />

Template8 - 创意不对称风格

• 红色系，大胆设计
• 不对称布局，视觉冲击力强
• 适合时尚、创意、设计类产品

import { Template8 } from 'openseo-template';
<Template8 data={articleData} />

Template9 - 柔和自然风格

• 绿色系，自然清新
• 圆润设计，温和舒适
• 适合健康、环保、生活类产品

import { Template9 } from 'openseo-template';
<Template9 data={articleData} />

数据结构

interface ArticleData {
  template: string;
  keyword: string;
  url_suffix: string;
  title_options: string[];
  meta_description_options: string[];
  intro_options: string[];
  main_title: string;
  main_image_url: string;
  product_list: ProductItem[];
  comparison_table: ComparisonTable;
  comparison_table_2?: ComparisonTable;  // Optional second comparison table
  guide_section: GuideSection;
  faq_list: FaqItem[];
  conclusion: string;
  tips_options: string[];
  labels?: {                             // Optional custom labels
    products_title?: string;             // Default: "Featured Products"
    features_title?: string;             // Default: "Key Features"
    tips_title?: string;                 // Default: "Pro Tip"
    faq_title?: string;                  // Default: "Frequently Asked Questions"
    conclusion_title?: string;           // Default: "Conclusion"
    copyright_text?: string;             // Default: "© 2026 · All rights reserved"
  };
}

interface ProductItem {
  product_name: string;
  tag: string;
  desc: string;
  key_features: string[];
}

interface ComparisonTable {
  title: string;
  columns: string[];
  rows: string[][];
}

interface GuideSection {
  title: string;
  content: string;
}

interface FaqItem {
  question: string;
  answer: string;
}

特性

• ✅ Pure CSS implementation, no Tailwind configuration needed
• ✅ Full TypeScript type support
• ✅ Responsive design, mobile-friendly
• ✅ Three different style templates to choose from
• ✅ Zero configuration, ready to use out of the box
• ✅ SSR support (Next.js, Remix, etc.)
• ✅ Multi-language support via customizable labels
• ✅ No hardcoded text in components

Multi-language Support

All templates support custom labels, allowing you to use any language:

const data: ArticleData = {
  // ... other data
  labels: {
    products_title: "推荐产品",
    features_title: "核心功能",
    tips_title: "小贴士",
    faq_title: "常见问题",
    conclusion_title: "结语",
    copyright_text: "© 2026 · 保留所有权利"
  }
};

在不同框架中使用

Next.js (App Router)

方式1：直接导入（推荐用于开发）

// app/page.tsx
import { Template1, type ArticleData } from 'openseo-template';

export default function Page() {
  const data: ArticleData = { /* ... */ };
  return <Template1 data={data} />;
}

方式2：从已发布的包导入（用于生产环境）

由于Next.js对CSS导入的限制，需要在layout中单独导入CSS：

// app/layout.tsx
import 'openseo-template/dist/styles.css';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
    </html>
  );
}

// app/page.tsx
import TemplateRenderer from 'openseo-template';
import type { ArticleData } from 'openseo-template';

export default function Page() {
  const data: ArticleData = {
    template: 'template1', // 动态选择模板
    // ... other data
  };
  return <TemplateRenderer data={data} />;
}

Next.js (Pages Router)

// pages/index.tsx
import { Template2, type ArticleData } from 'openseo-template';

export default function Home() {
  const data: ArticleData = { /* ... */ };
  return <Template2 data={data} />;
}

React (Vite)

// src/App.tsx
import { Template3, type ArticleData } from 'openseo-template';

function App() {
  const data: ArticleData = { /* ... */ };
  return <Template3 data={data} />;
}

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建
npm run build

License

MIT