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 :
```shell
# 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