launchkit-devtool-landing-template

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

LaunchKit Dev Tool Landing Template

LaunchKit 开发者工具落地页模板

Skill by ara.so — Devtools Skills collection.

LaunchKit is a free, ready-to-deploy HTML landing page template specifically designed for developer tools and open source products. It's a static HTML/CSS/JS template that requires no build process and can be deployed immediately to any static hosting service.

由 ara.so 提供的 Skill — 开发者工具技能合集。

LaunchKit 是一款免费、可直接部署的HTML落地页模板，专为开发者工具和开源产品设计。它是一个静态HTML/CSS/JS模板，无需构建流程，可立即部署到任何静态托管服务。

Installation

安装

Clone the repository:

bash

git clone https://github.com/evilmartians/devtool-template.git my-landing-page
cd my-landing-page

Or use it as a GitHub template by clicking "Use this template" on the repository page.

克隆仓库：

bash

git clone https://github.com/evilmartians/devtool-template.git my-landing-page
cd my-landing-page

或者在仓库页面点击“Use this template”将其用作GitHub模板。

Project Structure

项目结构

├── index.html          # Main landing page
├── index.css           # Styles and CSS variables
├── index.js            # Interactive components
├── images/             # Image assets
└── fonts/              # Custom fonts

├── index.html          # 主落地页
├── index.css           # 样式与CSS变量
├── index.js            # 交互组件
├── images/             # 图片资源
└── fonts/              # 自定义字体

Quick Start

快速开始

Choose your blocks: Edit
```
index.html
```
and remove sections you don't need
Replace content: Update all placeholder text with your product copy
Add images: Upload your images to the
```
images/
```
folder
Configure buttons: Update href attributes and add tracking
Deploy: Upload to any static hosting

选择所需区块：编辑
```
index.html
```
，移除不需要的章节
替换内容：将所有占位文本替换为你的产品文案
添加图片：将图片上传至
```
images/
```
文件夹
配置按钮：更新href属性并添加追踪代码
部署：上传至任意静态托管服务

Theme Customization

主题定制

Light/Dark Mode

亮色/暗色模式

Add the

theme-dark

class to the

<html>

element for dark theme:

html

<!-- Light theme (default) -->
<html lang="en">

<!-- Dark theme -->
<html lang="en" class="theme-dark">

为

<html>

元素添加

theme-dark

类以启用暗色主题：

html

<!-- 亮色主题（默认） -->
<html lang="en">

<!-- 暗色主题 -->
<html lang="en" class="theme-dark">

Color Palette Customization

调色板定制

Edit the CSS variables in

index.css

css

:root {
  /* Primary brand color */
  --color-primary-h: 210;
  --color-primary-s: 100%;
  --color-primary-l: 50%;
  
  /* Accent color */
  --color-accent-h: 350;
  --color-accent-s: 100%;
  --color-accent-l: 60%;
  
  /* Background */
  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f5;
  
  /* Text */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
}

.theme-dark {
  --color-bg: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-text: #ffffff;
  --color-text-secondary: #cccccc;
}

Use the color theme tool to generate matching light/dark palettes.

编辑

index.css

中的CSS变量：

css

:root {
  /* 主品牌色 */
  --color-primary-h: 210;
  --color-primary-s: 100%;
  --color-primary-l: 50%;
  
  /* 强调色 */
  --color-accent-h: 350;
  --color-accent-s: 100%;
  --color-accent-l: 60%;
  
  /* 背景色 */
  --color-bg: #ffffff;
  --color-bg-secondary: #f5f5f5;
  
  /* 文本色 */
  --color-text: #1a1a1a;
  --color-text-secondary: #666666;
}

.theme-dark {
  --color-bg: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-text: #ffffff;
  --color-text-secondary: #cccccc;
}

使用配色主题工具生成匹配的亮色/暗色调色板。

Common HTML Patterns

常见HTML模式

Hero Section

英雄区

html

<section class="hero">
  <div class="container">
    <h1 class="hero__title">Your Dev Tool Name</h1>
    <p class="hero__description">
      A brief, compelling description of what your tool does
    </p>
    <div class="hero__cta">
      <a href="#get-started" class="button button--primary">Get Started</a>
      <a href="https://github.com/yourname/repo" class="button button--secondary">
        View on GitHub
      </a>
    </div>
  </div>
</section>

html

<section class="hero">
  <div class="container">
    <h1 class="hero__title">你的开发者工具名称</h1>
    <p class="hero__description">
      一段简洁、有吸引力的工具功能描述
    </p>
    <div class="hero__cta">
      <a href="#get-started" class="button button--primary">开始使用</a>
      <a href="https://github.com/yourname/repo" class="button button--secondary">
        在GitHub查看
      </a>
    </div>
  </div>
</section>

Features Grid

功能网格

html

<section class="features">
  <div class="container">
    <h2 class="section__title">Key Features</h2>
    <div class="features__grid">
      <div class="feature">
        <div class="feature__icon">🚀</div>
        <h3 class="feature__title">Fast Setup</h3>
        <p class="feature__description">Get started in minutes</p>
      </div>
      <div class="feature">
        <div class="feature__icon">🔧</div>
        <h3 class="feature__title">Easy Configuration</h3>
        <p class="feature__description">Minimal config required</p>
      </div>
    </div>
  </div>
</section>

html

<section class="features">
  <div class="container">
    <h2 class="section__title">核心功能</h2>
    <div class="features__grid">
      <div class="feature">
        <div class="feature__icon">🚀</div>
        <h3 class="feature__title">快速搭建</h3>
        <p class="feature__description">几分钟即可开始使用</p>
      </div>
      <div class="feature">
        <div class="feature__icon">🔧</div>
        <h3 class="feature__title">易于配置</h3>
        <p class="feature__description">只需极少配置</p>
      </div>
    </div>
  </div>
</section>

Code Example Block

代码示例区块

html

<section class="code-example">
  <div class="container">
    <h2 class="section__title">Quick Start</h2>
    <pre class="code-block"><code>npm install your-tool
npx your-tool init
your-tool run</code></pre>
  </div>
</section>

html

<section class="code-example">
  <div class="container">
    <h2 class="section__title">快速开始</h2>
    <pre class="code-block"><code>npm install your-tool
npx your-tool init
your-tool run</code></pre>
  </div>
</section>

CTA Section

行动召唤区

html

<section class="cta">
  <div class="container">
    <h2 class="cta__title">Ready to get started?</h2>
    <p class="cta__description">Join thousands of developers using this tool</p>
    <a href="#signup" class="button button--large button--primary">
      Start Free Trial
    </a>
  </div>
</section>

html

<section class="cta">
  <div class="container">
    <h2 class="cta__title">准备好开始了吗？</h2>
    <p class="cta__description">加入数千名正在使用此工具的开发者行列</p>
    <a href="#signup" class="button button--large button--primary">
      开始免费试用
    </a>
  </div>
</section>

JavaScript Interactivity

JavaScript交互性

Add interactive elements in

index.js

javascript

// Mobile menu toggle
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');

menuButton?.addEventListener('click', () => {
  nav.classList.toggle('nav--open');
});

// Smooth scroll to anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    target?.scrollIntoView({ behavior: 'smooth' });
  });
});

// Track CTA clicks
document.querySelectorAll('.button--primary').forEach(button => {
  button.addEventListener('click', () => {
    // Analytics tracking
    if (window.gtag) {
      gtag('event', 'cta_click', {
        'button_text': button.textContent
      });
    }
  });
});

在

index.js

中添加交互元素：

javascript

// 移动端菜单切换
const menuButton = document.querySelector('.menu-toggle');
const nav = document.querySelector('.nav');

menuButton?.addEventListener('click', () => {
  nav.classList.toggle('nav--open');
});

// 锚点链接平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    target?.scrollIntoView({ behavior: 'smooth' });
  });
});

// 追踪行动召唤按钮点击
document.querySelectorAll('.button--primary').forEach(button => {
  button.addEventListener('click', () => {
    // 分析追踪
    if (window.gtag) {
      gtag('event', 'cta_click', {
        'button_text': button.textContent
      });
    }
  });
});

Adding Analytics

添加分析工具

Add Google Analytics or Plausible to

index.html

html

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

<!-- Or Plausible -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Replace

GA_MEASUREMENT_ID

with your actual ID (use environment variables in your build process).

在

index.html

中添加Google Analytics或Plausible：

html

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

<!-- 或Plausible -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

将

GA_MEASUREMENT_ID

替换为你的实际ID（在构建流程中使用环境变量）。

Deployment

部署

GitHub Pages

Push your code to GitHub
Go to Settings → Pages
Select branch (usually
```
main
```
) and
```
/
```
(root)
Your site will be live at
```
https://username.github.io/repo-name
```

将代码推送到GitHub
进入设置 → Pages
选择分支（通常为
```
main
```
）和根目录
```
/
```
你的网站将在
```
https://username.github.io/repo-name
```
上线

Netlify

bash

undefined

bash

undefined

Install Netlify CLI

安装Netlify CLI

npm install -g netlify-cli

Deploy

部署

netlify deploy --prod


Or connect your GitHub repo in the Netlify dashboard.

netlify deploy --prod


或者在Netlify控制台中连接你的GitHub仓库。

Vercel

bash

undefined

bash

undefined

Install Vercel CLI

安装Vercel CLI

npm install -g vercel

Deploy

部署

vercel --prod

undefined

vercel --prod

undefined

Custom Server

自定义服务器

Upload all files to your web server's public directory via FTP/SFTP:

bash

undefined

通过FTP/SFTP将所有文件上传到你的Web服务器的公共目录：

bash

undefined

Using rsync

使用rsync

rsync -avz --exclude '.git' ./ user@yourserver.com:/var/www/html/

undefined

rsync -avz --exclude '.git' ./ user@yourserver.com:/var/www/html/

undefined

Responsive Design

响应式设计

The template is mobile-first. Breakpoints are defined in

index.css

css

/* Mobile: default styles */
.container {
  padding: 0 16px;
}

/* Tablet and up */
@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

/* Desktop and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

本模板采用移动端优先设计。断点定义在

index.css

中：

css

/* 移动端：默认样式 */
.container {
  padding: 0 16px;
}

/* 平板及以上 */
@media (min-width: 768px) {
  .container {
    padding: 0 32px;
  }
}

/* 桌面端及以上 */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Image Optimization

图片优化

Optimize images before uploading:

bash

undefined

上传前优化图片：

bash

undefined

Using ImageOptim CLI (macOS)

使用ImageOptim CLI（macOS）

imageoptim images/**/*.{jpg,png}

Using imagemin

使用imagemin

npx imagemin images/*.{jpg,png} --out-dir=images/optimized


Use WebP format for better compression:

```html
<picture>
  <source srcset="images/hero.webp" type="image/webp">
  <img src="images/hero.jpg" alt="Hero image">
</picture>

npx imagemin images/*.{jpg,png} --out-dir=images/optimized


使用WebP格式以获得更好的压缩效果：

```html
<picture>
  <source srcset="images/hero.webp" type="image/webp">
  <img src="images/hero.jpg" alt="Hero image">
</picture>

SEO Configuration

SEO配置

Update meta tags in

index.html

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Dev Tool - Tagline</title>
  <meta name="description" content="Your concise product description for search results">
  
  <!-- Open Graph -->
  <meta property="og:title" content="Your Dev Tool">
  <meta property="og:description" content="Your product description">
  <meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
  <meta property="og:url" content="https://yourdomain.com">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Your Dev Tool">
  <meta name="twitter:description" content="Your product description">
  <meta name="twitter:image" content="https://yourdomain.com/images/twitter-card.jpg">
</head>

更新

index.html

中的元标签：

html

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>你的开发者工具 - 标语</title>
  <meta name="description" content="面向搜索结果的简洁产品描述">
  
  <!-- Open Graph -->
  <meta property="og:title" content="你的开发者工具">
  <meta property="og:description" content="你的产品描述">
  <meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
  <meta property="og:url" content="https://yourdomain.com">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="你的开发者工具">
  <meta name="twitter:description" content="你的产品描述">
  <meta name="twitter:image" content="https://yourdomain.com/images/twitter-card.jpg">
</head>

Troubleshooting

故障排查

CSS not loading

CSS未加载

Ensure
```
index.css
```
is in the same directory as
```
index.html
```

Check the path in

<link rel="stylesheet" href="index.css">

Clear browser cache

确保
```
index.css
```
与
```
index.html
```
在同一目录

检查

<link rel="stylesheet" href="index.css">

中的路径

清除浏览器缓存

Dark theme not applying

暗色主题未生效

Verify the
```
theme-dark
```
class is on the
```
<html>
```
element, not
```
<body>
```
Check that CSS variables are defined for both
```
:root
```
and
```
.theme-dark
```

确认
```
theme-dark
```
类添加在
```
<html>
```
元素上，而非
```
<body>
```
检查
```
:root
```
和
```
.theme-dark
```
中均定义了CSS变量

Images not displaying

图片未显示

Verify image paths are relative:
```
images/photo.jpg
```
not
```
/images/photo.jpg
```
Check image file names match case-sensitive references
Ensure images are committed to the repository

确认图片路径为相对路径：
```
images/photo.jpg
```
而非
```
/images/photo.jpg
```
检查图片文件名与引用的大小写是否匹配
确保图片已提交到仓库

Mobile menu not working

移动端菜单不工作

Verify
```
index.js
```
is loaded before
```
</body>
```
closes
Check console for JavaScript errors
Ensure menu toggle button has correct class name

确认
```
index.js
```
在
```
</body>
```
标签前加载
检查控制台是否有JavaScript错误
确保菜单切换按钮的类名正确

Fonts not loading

字体未加载

Host fonts locally in the
```
fonts/
```
directory
Use
```
@font-face
```
declarations in CSS
Avoid relying on external CDNs for production

将字体本地托管在
```
fonts/
```
目录
在CSS中使用
```
@font-face
```
声明
生产环境避免依赖外部CDN

Best Practices

最佳实践

Keep it simple: Remove unused sections to maintain fast load times
Optimize images: Use WebP format and lazy loading
Test responsiveness: Check on multiple devices and screen sizes
Validate HTML: Use W3C validator to catch errors
Add structured data: Include JSON-LD for better SEO
Monitor performance: Use Lighthouse to maintain high scores
Version control: Commit changes incrementally with clear messages

保持简洁：移除未使用的章节以保证加载速度
优化图片：使用WebP格式和懒加载
测试响应性：在多种设备和屏幕尺寸上检查
验证HTML：使用W3C验证器排查错误
添加结构化数据：包含JSON-LD以提升SEO效果
监控性能：使用Lighthouse维持高分
版本控制：用清晰的提交信息逐步提交更改

launchkit-devtool-landing-template

Original

Translation

LaunchKit Dev Tool Landing Template

LaunchKit 开发者工具落地页模板

Installation

安装

Project Structure

项目结构

Quick Start

快速开始

Theme Customization

主题定制

Light/Dark Mode

亮色/暗色模式

Color Palette Customization

调色板定制

Common HTML Patterns

常见HTML模式

Hero Section

英雄区

Features Grid

功能网格

Code Example Block

代码示例区块

CTA Section

行动召唤区

JavaScript Interactivity

JavaScript交互性

Adding Analytics

添加分析工具

Deployment

部署

GitHub Pages

GitHub Pages

Netlify

Netlify

Install Netlify CLI

安装Netlify CLI

Deploy

部署

Vercel

Vercel

Install Vercel CLI

安装Vercel CLI

Deploy

部署

Custom Server

自定义服务器

Using rsync

使用rsync

Responsive Design

响应式设计

Image Optimization

图片优化

Using ImageOptim CLI (macOS)

使用ImageOptim CLI（macOS）

Using imagemin

使用imagemin

SEO Configuration

SEO配置

Troubleshooting

故障排查

CSS not loading

CSS未加载

Dark theme not applying

暗色主题未生效

Images not displaying

图片未显示

Mobile menu not working

移动端菜单不工作

Fonts not loading

字体未加载

Best Practices

最佳实践

Additional Resources

额外资源