Twikoo Documentation

repository·main·Indexed 24 days ago

https://github.com/twikoojs/twikoo

A lightweight, secure, and free comment system designed for static websites. Twikoo supports image uploads, emojis, and math formulas. It offers flexible deployment options including AWS Lambda via Terraform, Netlify Functions, Tencent Cloud Functions, Docker Compose, and self-hosted servers (tkserver). The system includes a JavaScript API for retrieving comment counts and recent activity, and supports various storage backends such as MongoDB, lokijs, and EdgeOne Blob storage.

Tokens
22.6K
Snippets
39
Records
119
Agent score
80%

What's inside Twikoo

  1. Overview of Twikoo features

    main

    Twikoo is a simple, safe, and free comment system for static websites. It supports various deployment methods including Cloud Development, Vercel, or private servers.

    Key Capabilities

    • Ease of Use: Supports replies, likes, image pasting/insertion, and emoji support. It features real-time draft saving and supports Katex formulas and language-specific code highlighting.
    • Security: Protects privacy via cloud functions, supports Akismet and Tencent Cloud content security for spam detection, includes manual moderation mode, and provides XSS protection. It also allows rate-limiting comments per IP.
    • Notifications: Supports email alerts (for visitors and bloggers), WeChat alerts (via Server酱), and QQ alerts (via Qmsg酱 or go-cqhttp).
    • Customization: Allows customizing background images, 'Blogger' labels, email templates, placeholders, emoji lists (compatible with OwO format), and field requirements (nickname, email, website).
    • Management: Includes an embedded management panel for viewing, hiding, deleting comments, and modifying configurations via password login. It also supports importing comments from Valine, Artalk, or Disqus.
  2. Understand the Twikoo deployment architecture

    main

    Twikoo's architecture is split into two distinct parts that must be deployed and kept in sync:

    1. Cloud Functions: The backend logic that handles data storage and processing. You must choose a deployment platform (e.g., Vercel, Netlify, AWS Lambda, etc.) that suits your needs.
    2. Front-end: The client-side component that renders the comment interface on your website.

    Critical Requirement: You must ensure that both the cloud function version and the front-end version are consistent to avoid compatibility issues.

  3. Configure specific database names in MongoDB Atlas

    main

    By default, the MongoDB Atlas connection string does not specify a database name, so Twikoo will connect to the default test database.

    If you want to run multiple Twikoo instances or other services within the same MongoDB cluster, you should append the specific database name to your connection string and ensure the corresponding Access Control List (ACL) is configured.

  4. Update Twikoo on Tencent Cloud (One-click Deployment)

    main

    If you used the one-click deployment method on Tencent Cloud, follow these steps to update:

    1. Log in to Environment - My Applications.
    2. Enter the following configuration:
      • Source Address: https://github.com/twikoojs/twikoo/tree/main
      • Deployment Branch: main
    3. Leave the Application Directory empty.
    4. Click Confirm to complete the deployment.

    Important: After a successful update, you must also update the version number (x.x.x) in your frontend Twikoo CDN address to match the cloud function version, then redeploy your website.

  5. Deploy Twikoo to Vercel

    main

    Requires twikoo.js version 1.4.0 or higher. Note that *.vercel.app domains may be slow or inaccessible in mainland China; binding a custom domain is recommended.

    Steps:

    1. Obtain a MongoDB connection string from MongoDB Atlas.
    2. Click the Deploy to Vercel button.
    3. In Vercel, go to Settings -> Environment Variables and add:
      • Key: MONGODB_URI
      • Value: Your MongoDB connection string.
    4. In Settings -> Deployment Protection, set Vercel Authentication to Disabled and Save.
    5. Go to Deployments, click the three dots on any deployment, and select Redeploy.
    6. Your environment ID is the Vercel Domain (e.g., https://xxx.vercel.app).
  6. Enable Katex support for math formulas

    main

    Twikoo supports Katex formulas but does not include the library by default to keep the package size small. To enable it, you must load Katex assets in your page <head> and optionally configure the delimiters during twikoo.init.

    Step 1: Load Katex assets

    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
      <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
      <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"></script>
    </head>

    Step 2: Configure Twikoo Pass a katex object to twikoo.init to define your delimiters (e.g., $$ for display mode or $ for inline mode).

    twikoo.init({
      envId: 'Environment id',
      el: '#tcomment',
      katex: {
        delimiters: [
          { left: '$$', right: '$$', display: true },
          { left: '$', right: '$', display: false },
          { left: '\\(', right: '\\)', display: false },
          { left: '\[', right: '\]', display: true }
        ],
        throwOnError: false
      }
    });
  7. Deploy to Hugging Face Spaces

    main

    Deploy Twikoo to Hugging Face using Docker. Warning: Email functionality is unavailable on Hugging Face because the default email port is blocked.

    1. Get a MongoDB connection string from MongoDB Atlas.
    2. Create a new Space on Hugging Face with the Docker SDK and a Blank template.
    3. In the Space Settings, add a new secret named MONGODB_URI with your connection string.
    4. Create a new file named Dockerfile in the Space and add the following content:
    FROM imaegoo/twikoo
    ENV TWIKOO_PORT 7860
    EXPOSE 7860
    1. Commit the file. Your Environment ID is the Direct URL found in the Space settings (e.g., https://xxx-xxx.hf.space).
  8. Develop Twikoo locally

    main

    If you are contributing to the project or developing locally, use the following commands to manage the development environment:

    • yarn dev: Starts the local development server (typically accessible at http://localhost:9820/demo.html).
    • yarn lint: Runs linting checks.
    • yarn build: Builds the project, generating the production file at dist/twikoo.all.min.js.
    yarn dev # (http://localhost:9820/demo.html)
    yarn lint 
    yarn build # (dist/twikoo.all.min.js)
  9. Integrate QQ API with Twikoo

    main

    Once go-cqhttp is running, use the following URL formats in the Twikoo QQ Private API configuration settings. Replace IP:PORT with your server's address and token with the access-token defined in your config.yml.

    For Private Messages (QQ Number): http://<YOUR_IP>:<PORT>/send_private_msg?user_id=<QQ_NUMBER>?token=<YOUR_TOKEN>

    For Group Messages: http://<YOUR_IP>:<PORT>/send_group_msg?token=<YOUR_TOKEN>?group_id=<GROUP_ID>