# 如何開發自定義布局后臺布局 開發自定義布局，需在admin/src/addon/插件/layout文件夾下創建inedx.vue、layout.json的文件。  1、創建一個自定義布局并將其保存到`layout/index.vue`: ``` <template> <div class="min-w-[1200px]"> <el-container> <el-header>Header</el-header> <el-container> <el-aside width="200px">Aside</el-aside> <el-container> <el-main> <router-view></router-view> </el-main> <el-footer>Footer</el-footer> </el-container> </el-container> </el-container> </div> </template> <script lang="ts" setup></script> <style lang="scss" scoped></style> ```  2、在`layout.json`中定義布局的基本信息 ``` { "layout": "shop", // 布局標識與插件key保持一致 "cover": "/static/resource/images/system/layout_default.png" // 布局縮略圖 } ``` 下圖為縮略圖應用場景，縮略圖大小寬高為 178 / 128  3.在admin端打開配置--布局設置--選擇插件應用后的設置，選擇開發好的布局方式，點擊確認，再次進入該單應用的站點布局就會修改成功。