vitepress-theme-trigger

Blog theme for VitePress with Tailwind CSS.

• 中文 README

Introduction

"Trigger" is a out-of-the-box VitePress theme, named after my favorite Anime "World Trigger". You can use it directly or customize it to better suit your needs.

More info about customization :

• VitePress Doc - Using Vue in Markdown
• VitePress Doc - Extending the Default Theme
• VitePress Doc - Build-Time Data Loading

If there has any problem please feel free to create issue.

Changelog

Detailed changes are documented in the CHANGELOG.

Features

• 🖋️ Generate new posts via CLI – Scaffold articles instantly with a single command
• 🤖 AI-powered summary – Real-time article overview powered by AI
• 📈 SEO-ready with JSON-LD – Auto-injected schema data on every post page
• 🎨 Style with Tailwind CSS – Responsive design that looks great in both light/dark mode
• 📚 Pagination powered by History API – Smooth navigation between post lists
• 🗺️ Automatic sitemap generation – Boost your site's visibility in search engines
• 🧩 Modular config integration – Centralized control for site and theme settings
• 💬 Utterances for comments – GitHub-powered commenting system
• 🔄 Theme-aware Utterances – Auto-sync comment box with light/dark mode
• 📐 Optimized MathJax rendering – Clean, responsive math formulas on mobile
• ⏭️ Prev/Next post links – Auto-generated without extra frontmatter
• 🦶 Footnote support – Powered by markdown-it-footnote for scholarly notes

Prerequisite

• Node.js version 18 or higher.

Usage

• Clone the project.
• Edit theme config and public files for custom.
• To enable the AI-powered realtime summary, you need to sign up for Cloudflare, create your own AI Worker (free) and AI Gateway (traffic control), and configure the Worker API in the theme config.

# worker.js
const corsHeaders = {
  'Access-Control-Allow-Origin': 'YOUR_HOST',
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type',
  'Content-Type': 'application/json'
};

const sendErrorResponse = (message, status = 500) => {
  return new Response(JSON.stringify({ error: message }), {
    status,
    headers: corsHeaders
  });
};

export default {
  async fetch(request, env) {
    if (request.method === 'OPTIONS') {
      return new Response(null, { headers: corsHeaders });
    }

    if (request.method !== 'POST') {
      return sendErrorResponse('Only POST requests are allowed', 405);
    }

    try {
      const { message } = await request.json();
      if (!message) {
        return sendErrorResponse('Missing message in request body', 400);
      }
      const model = '@cf/meta/llama-3.1-8b-instruct';
      const userID = 'YOUR_USER_ID';
      const gatewayID = 'YOUR_AI_GATEWAY_NAME'
      const gateway = `https://gateway.ai.cloudflare.com/v1/${userID}/{gatewayID}/workers-ai/${model}`;
      const prompt = `You are a professional summarization assistant. Based on the content I provide, generate a summary no longer than 60 characters, and return only the summary—no additional text: ${message}`;
      const apiResponse = await fetch(
        gateway,
        {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `${env.key}`
          },
          body: JSON.stringify({'prompt': prompt})
        }
      );

      if (!apiResponse.ok) {
        throw new Error(`Cloudflare Workers AI error: ${apiResponse.statusText}`);
      }

      const response = await apiResponse.json();
      return new Response(JSON.stringify({ response }), { headers: corsHeaders });
    } catch (error) {
      return sendErrorResponse(error.message);
    }
  }
};

• Launch terminal and execute commands as follows :

# install devDependencies
(p)npm install

# create new post under /posts
(p)npm run new {new-post-filename}

# start local dev server
(p)npm run dev

# build for production
(p)npm run build

# Locally preview the production build
(p)npm run preview

Deploy

Our project includes the GitHub workflow. You just need to ensure that the themeConfig.base is properly configured and GitHub pages auto-deployment will be triggered after push to GitHub.

• Deploy Your VitePress Site
• AWS Amplify

# amplify.yml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm use 18
        - npm install -g pnpm
        - pnpm install --no-frozen-lockfile
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: ./.vitepress/dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

Reference

• vuejs/blog
• airene/vitepress-blog-pure
• clark-cui/vitepress-blog-zaun