UI Customization

About 461 wordsAbout 2 min

You can customize certain UI elements of the page by adding a .cnb/settings.yml configuration file to the root directory of your repository, unlocking more interesting possibilities.

Configuration File Description

You need to add and commit the .cnb/settings.yml configuration file to the root directory of your repository. Below is an example of the configuration file:

.cnb/settings.yml
# All parameters below are optional

# Cloud-native development configuration, reads the .cnb/settings.yml configuration from the current branch where the cloud-native 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 the .cnb/settings.yml configuration from the repository's default branch
issue:
  button:
    description: ~bug~ Here you go!
    hoverImage: https://cnb.cool/my/test/-/git/raw/main/issue-hover.png

# Fork configuration, reads the .cnb/settings.yml configuration from the repository's 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 repository's default branch
copyRepo:
  button:
    description: Your repo is great, now it's mine
    hoverImage: ".cnb/copy-hover.png"

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

# Tag configuration, reads the .cnb/settings.yml configuration from the repository's default branch
tag:
  auto_tag:
    branch: hotfix

# NPC Configuration
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

Note: If the file fails to parse or exceeds the limit, the configuration will not be used.

Customization Categories

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

Category	Description	Config Branch
Cloud-Native Development Button	Customize the launch button name, description, hover image, CPU cores, auto-open WebIDE, etc.	Current branch
Issue Button	Customize the create Issue button description and hover image	Default branch
Fork Button	Customize the Fork button description and hover image	Default branch
Copy Repo Button	Customize the 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	Configure the branch that triggers automatic tag creation	Default branch
NPC Configuration	Configure AI roles, knowledge base, prompts, etc.	Default branch