UI Customization

About 425 wordsAbout 1 min

Add a .cnb/settings.yml file to the repository root to customize page UI. All parameters are optional.

A complete configuration example connects all categories together. Each category can be configured as needed, with unconfigured items using default values.

Workspace, Issue, Fork, Copy Repo buttons:

.cnb/settings.yml
# Cloud-native development configuration (reads from the branch where the launch button is located)
workspace:
  launch:
    button:
      name: Launch Cloud-Native Development
      description: Click this button to launch the cloud-native development environment
      hoverImage: .cnb/launch-hover.gif
    cpus: 4
    disabled: false
    autoOpenWebIDE: false

# Issue configuration (reads from the default branch)
issue:
  button:
    description: ~bug~ Here you go!
    hoverImage: https://cnb.cool/my/test/-/git/raw/main/issue-hover.png

# Fork configuration (reads from the default branch)
fork:
  button:
    description: Nice repo you've got. Now it's mine.
    hoverImage: ".cnb/fork-hover.png"

# Copy Repo button configuration (reads from the default branch)
copyRepo:
  button:
    description: Your repo is great, now it's mine
    hoverImage: ".cnb/copy-hover.png"

Reaction image, Tag auto-generation:

.cnb/settings.yml
# Reaction custom image
reaction:
  bug:
    image: .cnb/bug.gif

# Tag configuration (reads from the default branch)
tag:
  auto_tag:
    branch: hotfix

NPC Configuration:

.cnb/settings.yml
npc:
  imports:
    list:
      - cnb/docs
  roles:
    - name: Xiao Li
      slogan: code is cheap, show me your prompt
      prompt: You are now Xiao Li, a front-end development engineer
      enableThinking: false
      avatar:
        src: ".cnb/knowledge-base-hover.png"
    - name: Xiao Wang
      prompt: |
        You are a junior engineer,
        Being cute is your main business,
  defaultRepo: "cnb/docs"
  defaultRole: "Junior Engineer"
  button:
    name: "Quick Ask AI"
    description: "Click, start AI!"
    hoverImage: ".cnb/knowledge-base-hover.png"

Tips

If the file fails to parse or exceeds the size limit, the configuration will not take effect.

Customization Categories

UI customization supports the following categories. Click to view detailed configuration for each:

Category	Description	Config Branch
Cloud-Native Development Button	Button name, description, hover image, CPU cores, etc.	Current branch
Issue Button	Create Issue button description and hover image	Default branch
Fork Button	Fork button description and hover image	Default branch
Copy Repo Button	Copy Repo button description and hover image	Default branch
Reaction Custom Image	Replace the default image in the reaction feature	Default branch
Tag Auto-Generation	Branch that triggers automatic tag creation	Default branch
NPC Configuration	AI roles, knowledge base, prompts, etc.	Default branch