Back to Details

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

快速开始

  1. Choose your blocks: Edit 
    index.html
    and remove sections you don't need
  2. Replace content: Update all placeholder text with your product copy
  3. Add images: Upload your images to the 
    images/
    folder
  4. Configure buttons: Update href attributes and add tracking
  5. Deploy: Upload to any static hosting
  1. 选择所需区块：编辑 
    index.html
    ，移除不需要的章节
  2. 替换内容：将所有占位文本替换为你的产品文案
  3. 添加图片：将图片上传至 
    images/
    文件夹
  4. 配置按钮：更新href属性并添加追踪代码
  5. 部署：上传至任意静态托管服务

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

GitHub Pages

  1. Push your code to GitHub
  2. Go to Settings → Pages
  3. Select branch (usually 
    main
    ) and 
    /
    (root)
  4. Your site will be live at 
    https://username.github.io/repo-name
  1. 将代码推送到GitHub
  2. 进入设置 → Pages
  3. 选择分支（通常为 
    main
    ）和根目录 
    /
  4. 你的网站将在 
    https://username.github.io/repo-name
    上线

Netlify

Netlify

bash
undefined
bash
undefined

Install Netlify CLI

安装Netlify CLI

npm install -g 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

Vercel

bash
undefined
bash
undefined

Install Vercel CLI

安装Vercel CLI

npm install -g vercel
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}
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

最佳实践

  1. Keep it simple: Remove unused sections to maintain fast load times
  2. Optimize images: Use WebP format and lazy loading
  3. Test responsiveness: Check on multiple devices and screen sizes
  4. Validate HTML: Use W3C validator to catch errors
  5. Add structured data: Include JSON-LD for better SEO
  6. Monitor performance: Use Lighthouse to maintain high scores
  7. Version control: Commit changes incrementally with clear messages
  1. 保持简洁：移除未使用的章节以保证加载速度
  2. 优化图片：使用WebP格式和懒加载
  3. 测试响应性：在多种设备和屏幕尺寸上检查
  4. 验证HTML：使用W3C验证器排查错误
  5. 添加结构化数据：包含JSON-LD以提升SEO效果
  6. 监控性能：使用Lighthouse维持高分
  7. 版本控制：用清晰的提交信息逐步提交更改

Additional Resources

额外资源