UI Customization
About 582 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:
# Customize the cloud-native development launch button
button:
# Button name
name: Launch Cloud-Native Development
# Button description
# If the value is null, the default description is not displayed
description: Click this button to launch the cloud-native development environment
# Image displayed when hovering over the button (can only use images from the current branch in the repository, specify the path relative to the repository root directory, e.g., .cnb/launch-hover.gif)
# Image maximum 10MB
hoverImage: .cnb/launch-hover.gif
# CPU core number, default is: 8. Only valid for the default template. If there is a custom cloud-native development launch pipeline, this configuration is invalid
cpus: 4
# Whether to disable the default button. The default is: false means not disabled. true means disabled
disabled: false
# Whether to automatically open the WebIDE after the environment is created. The default is: false
# When openssh is not installed in the development environment (only supports WebIDE): regardless of the value of this parameter, the WebIDE will be automatically opened after the environment is created
autoOpenWebIDE: false
# Issue configuration, reads the .cnb/settings.yml configuration from the repository's main branch
issue:
# Customize the create issue button
button:
# Button description
description: ~bug~ Here you go!
# Image displayed when hovering over the button (can only use images from the current branch in the repository, specify the path relative to the repository root directory, e.g., .cnb/issue-hover.png)
# Image maximum 10MB
hoverImage: ".cnb/issue-hover.png"
# Fork configuration, reads the .cnb/settings.yml configuration from the repository's main branch
fork:
# Customize the fork button
button:
# Button description
description: Nice repo you've got. Now it's mine.
# Image displayed when hovering over the button (can only use images from the current branch in the repository, specify the path relative to the repository root directory, e.g., .cnb/fork-hover.png)
# Image maximum 10MB
hoverImage: ".cnb/fork-hover.png"
# Copy Repo Button Configuration, read from the .cnb/settings.yml file in the repository's main branch
# The "Copy Repo" button is not displayed by default on the repository homepage.
# Conditions for displaying the "Copy Repo" button: Add an example tag to the repository's homepage description (recommended for repositories that can serve as templates or examples)
copyRepo:
# Customize the "Copy Repo" button
button:
# Button description
description: Your repo is great, now it's mine
# Image displayed when hovering over the button (must be an image from the current branch of the repository, provide a relative path from the repository root, e.g., .cnb/copy-hover.png)
# Maximum image size: 10MB
hoverImage: ".cnb/copy-hover.png"
Tips
Note: If the file fails to parse or exceeds the limit, the configuration will not be used.
Copy Repo Button
The "Copy Repo" button does not appear by default on the repository homepage. It is recommended for repositories that can serve as templates or examples to enable this button.
How to Enable the Button: Edit the repository description on the right side of the homepage and add the example tag to display the button.
What It Does: Clicking this button provides a quick way to copy the repository.