diff --git a/.gitignore b/.gitignore index a352c4e..8c86210 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,12 @@ * +!components +!components/** !pages !pages/** +!panels +!panels/** +!layouts +!layouts/** !config !config/** !public diff --git a/README.md b/README.md index 5f8b07e..a83151e 100644 --- a/README.md +++ b/README.md @@ -345,6 +345,53 @@ export default { } ``` +### Customizing the Layout + +The application comes with a default layout that includes a header and a footer. If you'd like to replace this layout with your own, you can do so by creating a custom layout file. + +Steps to replace the default layout + +1. In the root folder of your project, create a new folder called `layouts` (if it doesn't already exist). +2. Inside this folder, create a file named default.vue. +3. Define your custom layout structure inside this file as needed. + +Example of layouts/default.vue + +```vuejs + +``` + +This custom layout will replace the default one and be applied throughout the application. You can include your own elements, such as a navigation bar or footer, as needed. + +#### Using Multiple Layouts + +In addition to replacing the default layout, you can create multiple layouts by adding more .vue files inside the layout folder. You can then specify which layout to use for a specific page by setting the layout name in the meta property of the `` tag in your Single File Component (SFC). + +JSON5: + +```js + +{ + meta: { + layout: 'custom' + } +} + +``` + +YAML: + +```yaml + +meta: + layout: custom + +``` + ### External panels To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`