跳到主要内容

2 篇博文 含有标签「guide」

查看所有标签

Enable X (Twitter) Cards in Docusaurus

· 阅读需 3 分钟
liruqi
liruqi
Founder of Chinapedia

To enable X (formerly Twitter) cards in Docusaurus, you primarily configure the metadata within your docusaurus.config.js (or .ts) file. Docusaurus uses these settings to populate the <head> tags that social media platforms crawl to generate preview cards. [1, 2, 3]

1. Global Configuration​

Open your docusaurus.config.js and add or update the themeConfig object. This sets the default card behavior for your entire site. [2, 4, 5]

module.exports = {
  // ... other config
  themeConfig: {
    metadata: [
      {name: 'twitter:card', content: 'summary_large_image'},
      {name: 'twitter:site', content: '@YourTwitterHandle'},
      {name: 'twitter:creator', content: '@YourTwitterHandle'},
    ],
    image: 'img/docusaurus-social-card.jpg', // Path to your default social card image
  },
};

2. Individual Page Metadata​

If you want a specific blog post or documentation page to have its own unique X card image, you can override the global settings using Front Matter at the top of your Markdown file. [1, 6]

---
title: My Awesome Page
description: A brief summary of this page for the X card.
image: /img/unique-page-card.png
---
# Your Content Here

3. Key Metadata Tags​

Ensure these specific tags are present (either globally or per page) for the best results:

  • twitter:card: Set to summary (small image) or summary_large_image (full-width image).
  • twitter:image: The URL to the image. Docusaurus typically handles this via the image field in your config or front matter.
  • og:title & og:description: X often falls back to Open Graph (OG) tags if specific Twitter tags are missing. [7, 8]

4. Testing Your Card​

After deploying your site, you can verify how the card looks using the X Post Validator (note: X has moved some validation features directly into the post composer preview, but third-party tools like OpenGraph.xyz are also excellent for testing). [9, 10, 11]

Would you like to know how to automate social card generation for every page instead of creating images manually?

[11]: https://www.tweetarchivist.com/twitter-card-validator-guide#:~:text=This%20process%20usually%20completes%20within%20a%20few,%28%20X%20%28formerly%20Twitter%29%20%27s%20feed.)

Enabling OpenClaw Control UI for LAN Access

· 阅读需 2 分钟
liruqi
liruqi
Founder of Chinapedia

Accessing the OpenClaw Control UI from other devices on your local network requires a few manual configuration changes to the gateway settings.

By default, OpenClaw might be restricted to local access for security. To enable LAN access (e.g., accessing from your phone or another laptop at http://192.168.1.x:18789), you need to update your configuration file.

Configuration Changes​

You need to modify the gateway section of your OpenClaw configuration. Specifically, ensure that bind is set to lan and that the controlUi section includes the correct allowedOrigins.

The final configuration should look like this:

{
  "gateway": {
    "port": 18789,
    "mode": "local",
    "bind": "lan",
    "controlUi": {
      "allowedOrigins": [
        "http://localhost:18789",
        "http://127.0.0.1:18789",
        "http://192.168.1.165:18789"
      ],
      "allowInsecureAuth": true,
      "dangerouslyDisableDeviceAuth": true
    }
  }
}

Key Settings Explained​

  • bind: "lan": Sets the gateway to listen on all local network interfaces instead of just the loopback interface.
  • allowedOrigins: You must explicitly list the IP address or hostname of your server here. Browsers enforce CORS, and the Control UI won't be able to talk to the gateway if its origin isn't allowed.
  • allowInsecureAuth: Set this to true if you are not using HTTPS on your local network (common for internal home labs).
  • dangerouslyDisableDeviceAuth: This skips device-specific authentication checks, making it easier to connect from multiple devices on the LAN. Use with caution in public networks.

Once you have applied these changes, restart your OpenClaw service openclaw gateway restart for the new settings to take effect.