diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
index 0ed77bc8..d5c74dd8 100644
--- a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
+++ b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditor.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
-import CodeEditor from '@/components/CodeEditor'
-import {If} from '@/views/domain/ngx_conf'
 import DirectiveAdd from '@/views/domain/ngx_conf/directive/DirectiveAdd'
 import {useGettext} from 'vue3-gettext'
 import {reactive, ref} from 'vue'
-import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
 import draggable from 'vuedraggable'
+import DirectiveEditorItem from '@/views/domain/ngx_conf/directive/DirectiveEditorItem.vue'
 
 const {$gettext} = useGettext()
 
@@ -19,20 +17,6 @@ let directive = reactive({})
 
 const current_idx = ref(-1)
 
-function add() {
-    adding.value = true
-    directive = reactive({})
-}
-
-function save() {
-    adding.value = false
-    props.ngx_directives.push(directive)
-}
-
-function remove(index: number) {
-    props.ngx_directives.splice(index, 1)
-}
-
 function onSave(idx: number) {
     setTimeout(() => {
         current_idx.value = idx + 1
@@ -51,72 +35,16 @@ function onSave(idx: number) {
         handle=".ant-input-group-addon"
     >
         <template #item="{ element: directive, index }">
-            <a-form-item @click="current_idx=index">
-
-                <div class="input-wrapper">
-                    <code-editor v-if="directive.directive === If" v-model:content="directive.params"
-                                 defaultHeight="100px" style="width: 100%;"/>
-
-                    <a-input v-else
-                             v-model:value="directive.params" @click="current_idx=index" @blur="current_idx=-1">
-                        <template #addonBefore>
-                            <HolderOutlined/>
-                            {{ directive.directive }}
-                        </template>
-                    </a-input>
-
-                    <a-popconfirm @confirm="remove(index)"
-                                  :title="$gettext('Are you sure you want to remove this directive?')"
-                                  :ok-text="$gettext('Yes')"
-                                  :cancel-text="$gettext('No')">
-                        <a-button>
-                            <template #icon>
-                                <DeleteOutlined style="font-size: 14px;"/>
-                            </template>
-                        </a-button>
-                    </a-popconfirm>
-                </div>
-                <transition name="slide">
-                    <div v-if="current_idx===index" class="directive-editor-extra">
-                        <div class="extra-content">
-                            <a-form layout="vertical">
-                                <a-form-item :label="$gettext('Comments')">
-                                    <a-textarea v-model:value="directive.comments"/>
-                                </a-form-item>
-                            </a-form>
-                        </div>
-                    </div>
-                </transition>
-            </a-form-item>
+            <directive-editor-item @click="current_idx=index"
+                                   :directive="directive"
+                                   :current_idx="current_idx" :index="index"
+                                   :ngx_directives="ngx_directives"/>
         </template>
     </draggable>
 
-    <directive-add :ngx_directives="props.ngx_directives"/>
+    <directive-add :ngx_directives="ngx_directives"/>
 </template>
 
 <style lang="less" scoped>
-.directive-editor-extra {
-    background-color: #fafafa;
-    padding: 10px 20px;
-    margin-bottom: 10px;
-}
 
-.slide-enter-active, .slide-leave-active {
-    transition: max-height .2s ease;
-    overflow: hidden;
-}
-
-.slide-enter-from, .slide-leave-to {
-    max-height: 0;
-}
-
-.slide-enter-to, .slide-leave-from {
-    max-height: 600px;
-}
-
-.input-wrapper {
-    display: flex;
-    gap: 10px;
-    align-items: center;
-}
 </style>
diff --git a/frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
new file mode 100644
index 00000000..e32176b2
--- /dev/null
+++ b/frontend/src/views/domain/ngx_conf/directive/DirectiveEditorItem.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import CodeEditor from '@/components/CodeEditor'
+import {DeleteOutlined, HolderOutlined} from '@ant-design/icons-vue'
+import {If} from '@/views/domain/ngx_conf'
+
+import {useGettext} from 'vue3-gettext'
+import {onMounted, ref, watch} from 'vue'
+import config from '@/api/config'
+import {message} from 'ant-design-vue'
+
+const {$gettext, interpolate} = useGettext()
+
+const props = defineProps(['directive', 'current_idx', 'index', 'ngx_directives'])
+
+function remove(index: number) {
+    props.ngx_directives.splice(index, 1)
+}
+
+const content = ref('')
+
+function init() {
+    if (props.directive.directive === 'include')
+        config.get(props.directive.params).then(r => {
+            content.value = r.config
+        })
+}
+
+onMounted(init)
+
+watch(props, init)
+
+function save() {
+    config.save(props.directive.params, {content: content.value}).then(r => {
+        content.value = r.config
+        message.success($gettext('Saved successfully'))
+    }).catch(r => {
+        message.error(interpolate($gettext('Save error %{msg}'), {msg: r.message ?? ''}))
+    })
+}
+</script>
+
+<template>
+    <div>
+        <div class="input-wrapper">
+            <code-editor v-if="directive.directive === If" v-model:content="directive.params"
+                         defaultHeight="100px" style="width: 100%;"/>
+
+            <a-input v-else
+                     v-model:value="directive.params" @click="current_idx=index">
+                <template #addonBefore>
+                    <HolderOutlined/>
+                    {{ directive.directive }}
+                </template>
+            </a-input>
+
+            <a-popconfirm @confirm="remove(index)"
+                          :title="$gettext('Are you sure you want to remove this directive?')"
+                          :ok-text="$gettext('Yes')"
+                          :cancel-text="$gettext('No')">
+                <a-button>
+                    <template #icon>
+                        <DeleteOutlined style="font-size: 14px;"/>
+                    </template>
+                </a-button>
+            </a-popconfirm>
+        </div>
+        <transition name="slide">
+            <div v-if="current_idx===index" class="directive-editor-extra">
+                <div class="extra-content">
+                    <a-form layout="vertical">
+                        <a-form-item :label="$gettext('Comments')">
+                            <a-textarea v-model:value="directive.comments"/>
+                        </a-form-item>
+                        <a-form-item :label="$gettext('Include Content')" v-if="directive.directive==='include'">
+                            <code-editor v-model:content="content"
+                                         defaultHeight="200px" style="width: 100%;"/>
+                            <div class="save-btn">
+                                <a-button @click="save">{{ $gettext('Save') }}</a-button>
+                            </div>
+                        </a-form-item>
+                    </a-form>
+                </div>
+            </div>
+        </transition>
+    </div>
+
+</template>
+
+<style lang="less" scoped>
+.directive-editor-extra {
+    background-color: #fafafa;
+    padding: 10px 20px;
+    margin-bottom: 10px;
+
+    .save-btn {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 15px;
+    }
+}
+
+.slide-enter-active, .slide-leave-active {
+    transition: max-height .2s ease;
+    overflow: hidden;
+}
+
+.slide-enter-from, .slide-leave-to {
+    max-height: 0;
+}
+
+.slide-enter-to, .slide-leave-from {
+    max-height: 600px;
+}
+
+.input-wrapper {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin: 15px 0;
+}
+</style>
diff --git a/server/router/routers.go b/server/router/routers.go
index 7be56211..54fec7cb 100644
--- a/server/router/routers.go
+++ b/server/router/routers.go
@@ -74,9 +74,9 @@ func InitRouter() *gin.Engine {
 			g.DELETE("domain/:name", api.DeleteDomain)
 
 			g.GET("configs", api.GetConfigs)
-			g.GET("config/:name", api.GetConfig)
+			g.GET("config/*name", api.GetConfig)
 			g.POST("config", api.AddConfig)
-			g.POST("config/:name", api.EditConfig)
+			g.POST("config/*name", api.EditConfig)
 
 			//g.GET("backups", api.GetFileBackupList)
 			//g.GET("backup/:id", api.GetFileBackup)