diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index eaba092..e800752 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2024484_poicam3vg6b.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_64i0l9tj8gq.js'
 })
 
 // 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
@@ -16,7 +16,7 @@ const IconFont = Icon.createFromIconfontCN({
 // console.log(iconNames.slice(80,160))
 
 export const iconFonts = {
-  list: ["disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
+  list: ["wulianwang-","zuji","disk-drive", "menu-fuzhi", "iso", "zuijinhuoyue","key", "shouquan", "sort", "grid", "list", "emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui",
     "maren", "zhutou", "qie", "youling", "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
 }
 
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index f41282e..466a076 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -2,13 +2,15 @@
   <div v-loading="vditorLoading">
     <div class="article-editor">
       <div class="editor-left">
-        <cite v-if="currentDarft">你正在编辑的是保存于 {{ file.updateDate }} 的草稿, 你也可以 <el-button type="text" style="color: #F56C6C" @click="deleteDraft">删除它</el-button></cite>
+        <cite v-if="currentDarft">你正在编辑的是保存于 {{ file.updateDate }} 的草稿, 你也可以
+          <el-button type="text" style="color: #F56C6C" @click="deleteDraft">删除它</el-button>
+        </cite>
         <el-header>
           <div class="header-item">
-            <el-input class="articles-title" placeholder="标题" v-model="filename" />
+            <el-input class="articles-title" placeholder="标题" v-model="filename"/>
           </div>
           <div class="url-slug">
-            <div>{{ articleLink }}</div>
+            <div>{{ siteUrl + (alonePage ? '/o/' : '/s/') }}</div>
             <edit-element
               ref="editElement"
               class="mark-setting-input"
@@ -16,6 +18,9 @@
               placeholder="缩略名"
               can-edit
             ></edit-element>
+            <a v-if="isEdit" class="view-icon" :title="'预览 '+filename" :href="siteUrl + (alonePage ? '/o/':'/s/')+file.slug" target="_blank">
+              <svg-icon class="wailian" icon-class="eye-open"></svg-icon>预览
+            </a>
           </div>
         </el-header>
         <el-main>
@@ -24,8 +29,10 @@
       </div>
       <div class="editor-right">
         <div class="operation">
-          <el-button class="release-button" type="warning" size="small" @click="saveDraft" :loading="updating">保存草稿</el-button>
-          <el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">发布文章</el-button>
+          <el-button class="release-button" type="warning" size="small" @click="saveDraft" :loading="updating">保存草稿
+          </el-button>
+          <el-button class="release-button" type="primary" size="small" @click="release" :loading="updating">发布文章
+          </el-button>
         </div>
         <div class="more-setting">
           <p class="mark-setting-label">发布日期：</p>
@@ -37,7 +44,8 @@
             format="yyyy-MM-dd HH:mm:ss">
           </el-date-picker>
           <p class="mark-setting-label">文章封面：</p>
-          <upload-image-input v-model="file.cover" placeholder="请输入文章封面大图的url" :intput-autosize="{ minRows: 2, maxRows: 6}"/>
+          <upload-image-input v-model="file.cover" placeholder="请输入文章封面大图的url"
+                              :intput-autosize="{ minRows: 2, maxRows: 6}"/>
           <div v-if="!alonePage">
             <p class="mark-setting-label">分类：</p>
             <multiple-tree-select
@@ -59,7 +67,7 @@
               closable
               :disable-transitions="false"
               @close="handleClose(tag)">
-              {{tag}}
+              {{ tag }}
             </el-tag>
             <el-autocomplete
               :class="[inputNewTagClass, inputValueExist?inputErrorClass:'']"
@@ -76,12 +84,12 @@
             >
             </el-autocomplete>
             <div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
-            <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签 </el-button>
+            <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签</el-button>
           </div>
-<!--          <p class="mark-setting-label">-->
-<!--            其他：-->
-<!--          </p>-->
-<!--          <el-button size="small" @click="moreSet">更多设置</el-button>-->
+          <!--          <p class="mark-setting-label">-->
+          <!--            其他：-->
+          <!--          </p>-->
+          <!--          <el-button size="small" @click="moreSet">更多设置</el-button>-->
         </div>
       </div>
     </div>
@@ -100,485 +108,510 @@
 </template>
 
 <script>
-  import markdownApi from '@/api/markdown-api'
-  import DirTree from"@/components/FileTree/DirTree"
-  import fileConfig from '@/utils/file-config'
+import markdownApi from '@/api/markdown-api'
+import DirTree from "@/components/FileTree/DirTree"
+import fileConfig from '@/utils/file-config'
 
-  import Vditor from 'vditor'
-  import "vditor/src/assets/scss/index.scss"
-  import categoryApi from "@/api/category";
-  import tagApi from "@/api/tag";
-  import EditElement from "@/views/markdown/EditElement";
-  import UploadImageInput from "@/components/input/UploadImageInput";
-  import MultipleTreeSelect from "@/components/select/MultipleTree";
+import Vditor from 'vditor'
+import "vditor/src/assets/scss/index.scss"
+import categoryApi from "@/api/category";
+import tagApi from "@/api/tag";
+import EditElement from "@/views/markdown/EditElement";
+import UploadImageInput from "@/components/input/UploadImageInput";
+import MultipleTreeSelect from "@/components/select/MultipleTree";
 
-  let toolbar = [
-    'emoji',
-    'bold',
-    'italic',
-    'strike',
-    'link',
-    '|',
-    'list',
-    'ordered-list',
-    'check',
-    'outdent',
-    'indent',
-    '|',
-    'line',
-    'insert-before',
-    'insert-after',
-    '|',
-    'upload',
-    'record',
-    'table',
-    '|',
-    'undo',
-    'redo',
-    '|',
-    'edit-mode',
-    'code-theme',
-    'outline',
-    'preview',
-    'fullscreen',
-    {
-      name: 'more',
-      toolbar: [
-        'export',
-        'both',
-        'info',
-        'help',
-      ],
-    }]
+let toolbar = [
+  'emoji',
+  'bold',
+  'italic',
+  'strike',
+  'link',
+  '|',
+  'list',
+  'ordered-list',
+  'check',
+  'outdent',
+  'indent',
+  '|',
+  'line',
+  'insert-before',
+  'insert-after',
+  '|',
+  'upload',
+  'record',
+  'table',
+  '|',
+  'undo',
+  'redo',
+  '|',
+  'edit-mode',
+  'code-theme',
+  'outline',
+  'preview',
+  'fullscreen',
+  {
+    name: 'more',
+    toolbar: [
+      'export',
+      'both',
+      'info',
+      'help',
+    ],
+  }]
 
-  export default {
-    name: 'MarkdownEditor',
-    components: {
-      MultipleTreeSelect,
-      EditElement,
-      DirTree, Vditor, UploadImageInput
+export default {
+  name: 'MarkdownEditor',
+  components: {
+    MultipleTreeSelect,
+    EditElement,
+    DirTree, Vditor, UploadImageInput
+  },
+  props: {
+    hasChange: {
+      type: Boolean,
+      defalut: false
     },
-    props: {
-      hasChange: {
-        type: Boolean,
-        defalut: false
-      },
-      alonePage: {
-        type: Boolean,
-        default: false
-      }
+    alonePage: {
+      type: Boolean,
+      default: false
     },
-    data() {
-      return {
-        activeNames: ['1'],
-        file: {},
-        editStatus: false,
-        filename: '',
-        clientHeight: document.documentElement.clientHeight - 150,
-        updating: false,
-        storageLocation: '',
-        selectLocationVisible: false,
-        moreSetting: false,
-        contentEditor: '',
-        categories: [],
-        draft: false,
-        currentDarft: false,
-        articleLink: `${window.origin}/artiles/`,
-        tags: [],
-        dynamicTags: [],
-        inputVisible: false,
-        inputValue: '',
-        inputValueExist: false,
-        inputNewTagClass: 'input-new-tag',
-        inputErrorClass: 'input-error',
-        vditorLoading: false,
-        releaseTime: undefined,
-      }
+    siteUrl: {
+      type: String,
+      default: ''
     },
-    mounted() {
-      this.getMarkdown()
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      activeNames: ['1'],
+      file: {},
+      editStatus: false,
+      filename: '',
+      clientHeight: document.documentElement.clientHeight - 150,
+      updating: false,
+      storageLocation: '',
+      selectLocationVisible: false,
+      moreSetting: false,
+      contentEditor: '',
+      categories: [],
+      draft: false,
+      currentDarft: false,
+      tags: [],
+      dynamicTags: [],
+      inputVisible: false,
+      inputValue: '',
+      inputValueExist: false,
+      inputNewTagClass: 'input-new-tag',
+      inputErrorClass: 'input-error',
+      vditorLoading: false,
+      releaseTime: undefined,
+    }
+  },
+  mounted() {
+    this.getMarkdown()
+    this.categoryTree()
+    this.getTags()
+  },
+  watch: {
+    file() {
+      this.valueHasChanged()
+    },
+    filename(val) {
+      this.valueHasChanged()
+      this.$emit('onTitle', val)
+    },
+    storageLocation() {
+      this.valueHasChanged()
+    }
+  },
+  computed: {},
+  methods: {
+    reload() {
+      this.getMarkdown(true)
       this.categoryTree()
-      this.getTags()
     },
-    watch: {
-      file(){
-        this.valueHasChanged()
-      },
-      filename(val){
-        this.valueHasChanged()
-        this.$emit('onTitle', val)
-      },
-      storageLocation(){
-        this.valueHasChanged()
-      }
+    querySearch(queryString, cb) {
+      let tags = this.tags
+      let results = queryString ? tags.filter((tag) => {
+        return (tag.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
+      }) : []
+      // 调用 callback 返回建议列表的数据
+      results = results.map(res => {
+        return {value: res.name}
+      })
+      cb(results)
     },
-    computed: {
+    handleSelect() {
+      this.handleInputConfirm()
     },
-    methods: {
-      reload() {
-        this.getMarkdown(true)
-        this.categoryTree()
-      },
-      querySearch(queryString, cb) {
-        let tags = this.tags
-        let results = queryString ? tags.filter((tag) => {
-          return (tag.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
-        }) : []
-        // 调用 callback 返回建议列表的数据
-        results = results.map(res => {
-          return {value: res.name}
-        })
-        cb(results)
-      },
-      handleSelect(){
-        this.handleInputConfirm()
-      },
-      valueHasChanged(){
-        this.$emit('update:hasChange', true)
-      },
-      getMarkdown(isReload){
-        this.vditorLoading = true
-        this.draft = false
-        if(this.$route.query.id){
-          this.editStatus = true
-          markdownApi.getMarkdown({
-            mark: this.$route.query.id
-          }).then((res) => {
-            if(res.data.draft) {
-              this.file = res.data.draft
-              if(res.data.release) {
-                this.currentDarft = true
-              }
-            } else {
-              this.currentDarft = false
-              this.file = res.data
+    valueHasChanged() {
+      this.$emit('update:hasChange', true)
+    },
+    getMarkdown(isReload) {
+      this.vditorLoading = true
+      this.draft = false
+      if (this.$route.query.id) {
+        this.editStatus = true
+        markdownApi.getMarkdown({
+          mark: this.$route.query.id
+        }).then((res) => {
+          if (res.data.draft) {
+            this.file = res.data.draft
+            if (res.data.release) {
+              this.currentDarft = true
             }
-            // 初始化编辑器
-            if(isReload){
-              this.contentEditor.setValue(this.file.contentText)
-              this.vditorLoading = false
-            } else {
-              this.vditorInit(this.file.contentText)
-            }
-            this.content = this.file.contentText
-            this.filename = this.file.name.split('.md')[0]
-            // 加载标签
-            if(this.file.tagIds && this.file.tagIds.length > 0 && this.tags && this.tags.length > 0) {
-              this.loadDynamicTags()
-            }
-          }).then(() => {
-            const that = this
-            setTimeout(function (){
-              that.$emit('update:hasChange', false)
-            }, 200)
-          })
-        } else {
-          if(isReload){
-            this.contentEditor.setValue('')
           } else {
-            this.vditorInit('')
+            this.currentDarft = false
+            this.file = res.data
           }
-        }
-      },
-      moreSet() {
-        this.moreSetting = true
-      },
-      categoryTree() {
-        categoryApi.categoryTree().then(res => {
-          this.categories = res.data
-        })
-      },
-      getTags() {
-        tagApi.tagList().then(res => {
-          this.tags = res.data
-          if(this.file.tagIds && this.file.tagIds.length > 0) {
+          // 初始化编辑器
+          if (isReload) {
+            this.contentEditor.setValue(this.file.contentText)
+            this.vditorLoading = false
+          } else {
+            this.vditorInit(this.file.contentText)
+          }
+          this.content = this.file.contentText
+          this.filename = this.file.name.split('.md')[0]
+          // 加载标签
+          if (this.file.tagIds && this.file.tagIds.length > 0 && this.tags && this.tags.length > 0) {
             this.loadDynamicTags()
           }
-        })
-      },
-      loadDynamicTags() {
-        this.dynamicTags = this.tags.filter(tag => this.file.tagIds.includes(tag.id)).map(tag => tag.name)
-      },
-      handleClose(tag) {
-        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
-      },
-      showInput() {
-        this.inputVisible = true
-        this.$nextTick(_ => {
-          this.$refs.saveTagInput.$refs.input.focus()
-        });
-      },
-      handleInputConfirm() {
-        const that = this
-        setTimeout(function (){
-          let inputValue = that.inputValue
-          if (inputValue) {
-            if (that.dynamicTags.includes(inputValue)){
-              that.inputValueExist = true
-              return
-            }
-            that.dynamicTags.push(inputValue)
-          }
-          that.inputValueExist = false
-          that.inputVisible = false
-          that.inputValue = ''
-        },100)
-      },
-      vditorInit(content){
-        this.contentEditor = new Vditor('vditor', {
-          height: this.clientHeight,
-          resize: {
-            "enable": true
-          },
-          toolbar: [
-            ...toolbar
-          ],
-          toolbarConfig: {
-            pin: true,
-          },
-          preview: {
-            mode: 'both',
-            hljs: {
-              lineNumber: true
-            },
-          },
-          cache: {
-            enable: false,
-          },
-          after: () => {
-            this.contentEditor.setValue(content)
-            this.vditorLoading = false
-          },
-          input: () => {
-            this.valueHasChanged()
-          },
-          upload: this.markdownImageUplaod()
-        })
-      },
-      markdownImageUplaod(){
-        return {
-          accept: 'image/*,.mp3, .wav, .rar',
-          headers: {
-            'jmal-token': this.$store.state.user.token,
-            'username': this.$store.state.user.name,
-            'userId': this.$store.state.user.userId
-          },
-          url: '/api/upload-markdown-image',
-          extraData: {
-            'username': this.$store.state.user.name,
-            'userId': this.$store.state.user.userId
-          },
-          fieldName: 'files',
-          filename (name) {
-            return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
-            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
-            replace('/\\s/g', '')
-          },
-          format(files, responseText) {
-            let response = JSON.parse(responseText)
-            let succMap = {}
-            response.data.forEach(map => {
-              succMap[map.filename] = fileConfig.mardownPreviewUrl(map.filepath)
-            })
-            response.data = {}
-            response.data['succMap'] = succMap
-            return JSON.stringify(response)
-          },
-          error(msg) {
-            console.log('error', msg)
-          },
-          linkToImgUrl: '/api/upload-markdown-link-image',
-          linkToImgFormat(responseText) {
-            let response = JSON.parse(responseText)
-            response.data['url'] = fileConfig.mardownPreviewUrl(response.data.url)
-            return JSON.stringify(response)
-          },
-        }
-      },
-      save(){
-        if(this.editStatus){
-          this.update()
-        }else{
-          this.add()
-        }
-      },
-      imageFilter() {
-        return true
-      },
-      checkParam(){
-        if(!this.filename){
-          this.$message.warning("请输入文章标题")
-          return false
-        }
-        if(this.contentEditor.getValue().length < 2){
-          this.$message.warning("请输入文章内容")
-          return false
-        }
-        return true
-      },
-      saveDraft() {
-        this.draft = true
-        this.update('保存草稿成功')
-      },
-      release() {
-        this.draft = false
-        this.update()
-      },
-      deleteDraft() {
-        this.$confirm('您确定要删除这份草稿吗?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
         }).then(() => {
-          markdownApi.deleteDraft({
-            fileId: this.$route.query.id,
-            username: this.$store.state.user.name
-          }).then(() => {
-            this.$message({
-              message: "草稿已被删除",
-              type: 'success',
-              duration : 1000
-            })
-            this.reload()
-          })
+          const that = this
+          setTimeout(function () {
+            that.$emit('update:hasChange', false)
+          }, 200)
         })
-      },
-      // update
-      update(message){
-        if(!this.checkParam()){
-          return
+      } else {
+        if (isReload) {
+          this.contentEditor.setValue('')
+        } else {
+          this.vditorInit('')
         }
-        this.updating = true
-        if(this.filename){
-          const filename = this.filename + ".md"
-          markdownApi.editMarkdown({
-            fileId: this.$route.query.id,
-            userId: this.$store.state.user.userId,
-            username: this.$store.state.user.name,
-            filename: filename,
-            cover: this.file.cover,
-            isDraft: this.draft,
-            isRelease: this.file.release,
-            isAlonePage: this.alonePage,
-            slug: this.file.slug ? this.file.slug : this.filename,
-            categoryIds: this.file.categoryIds,
-            tagNames: this.dynamicTags,
-            currentDirectory: this.storageLocation,
-            contentText: this.contentEditor.getValue(),
-            html: this.contentEditor.getHTML(),
-            uploadDate: this.file.uploadDate,
-          }).then((res) => {
-            this.$emit('update:hasChange', false)
-            this.updating = false
-            this.$message({
-              message: message ? message : "发布成功",
-              type: 'success',
-              duration : 1000
-            })
-            if(this.draft){
-              this.$router.push({path: this.$route.path, query: {operation: 'editor', id: res.data}})
-              this.$emit('onTitle', this.filename)
-              this.reload()
-            } else {
-              this.$emit('onRelease')
-            }
-          }).catch(()=> {
-            this.updating = false
-          })
-        }
-      },
-      selectDir(){
-        this.$refs.dirTree.show()
-      },
-      confirmSelectDir(){
-        const node = this.$refs.dirTree.getSelectTreeNode()
-        this.storageLocation = node.path + node.name
-        this.$refs.dirTree.hide()
       }
+    },
+    moreSet() {
+      this.moreSetting = true
+    },
+    categoryTree() {
+      categoryApi.categoryTree().then(res => {
+        this.categories = res.data
+      })
+    },
+    getTags() {
+      tagApi.tagList().then(res => {
+        this.tags = res.data
+        if (this.file.tagIds && this.file.tagIds.length > 0) {
+          this.loadDynamicTags()
+        }
+      })
+    },
+    loadDynamicTags() {
+      this.dynamicTags = this.tags.filter(tag => this.file.tagIds.includes(tag.id)).map(tag => tag.name)
+    },
+    handleClose(tag) {
+      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
+    },
+    showInput() {
+      this.inputVisible = true
+      this.$nextTick(_ => {
+        this.$refs.saveTagInput.$refs.input.focus()
+      });
+    },
+    handleInputConfirm() {
+      const that = this
+      setTimeout(function () {
+        let inputValue = that.inputValue
+        if (inputValue) {
+          if (that.dynamicTags.includes(inputValue)) {
+            that.inputValueExist = true
+            return
+          }
+          that.dynamicTags.push(inputValue)
+        }
+        that.inputValueExist = false
+        that.inputVisible = false
+        that.inputValue = ''
+      }, 100)
+    },
+    vditorInit(content) {
+      this.contentEditor = new Vditor('vditor', {
+        height: this.clientHeight,
+        resize: {
+          "enable": true
+        },
+        toolbar: [
+          ...toolbar
+        ],
+        toolbarConfig: {
+          pin: true,
+        },
+        preview: {
+          mode: 'both',
+          hljs: {
+            lineNumber: true
+          },
+        },
+        cache: {
+          enable: false,
+        },
+        after: () => {
+          this.contentEditor.setValue(content)
+          this.vditorLoading = false
+        },
+        input: () => {
+          this.valueHasChanged()
+        },
+        upload: this.markdownImageUplaod()
+      })
+    },
+    markdownImageUplaod() {
+      return {
+        accept: 'image/*,.mp3, .wav, .rar',
+        headers: {
+          'jmal-token': this.$store.state.user.token,
+          'username': this.$store.state.user.name,
+          'userId': this.$store.state.user.userId
+        },
+        url: '/api/upload-markdown-image',
+        extraData: {
+          'username': this.$store.state.user.name,
+          'userId': this.$store.state.user.userId
+        },
+        fieldName: 'files',
+        filename(name) {
+          return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').replace('/\\s/g', '')
+        },
+        format(files, responseText) {
+          let response = JSON.parse(responseText)
+          let succMap = {}
+          response.data.forEach(map => {
+            succMap[map.filename] = fileConfig.mardownPreviewUrl(map.filepath)
+          })
+          response.data = {}
+          response.data['succMap'] = succMap
+          return JSON.stringify(response)
+        },
+        error(msg) {
+          console.log('error', msg)
+        },
+        linkToImgUrl: '/api/upload-markdown-link-image',
+        linkToImgFormat(responseText) {
+          let response = JSON.parse(responseText)
+          response.data['url'] = fileConfig.mardownPreviewUrl(response.data.url)
+          return JSON.stringify(response)
+        },
+      }
+    },
+    save() {
+      if (this.editStatus) {
+        this.update()
+      } else {
+        this.add()
+      }
+    },
+    imageFilter() {
+      return true
+    },
+    checkParam() {
+      if (!this.filename) {
+        this.$message.warning("请输入文章标题")
+        return false
+      }
+      if (this.contentEditor.getValue().length < 2) {
+        this.$message.warning("请输入文章内容")
+        return false
+      }
+      return true
+    },
+    saveDraft() {
+      this.draft = true
+      this.update('保存草稿成功')
+    },
+    release() {
+      this.draft = false
+      this.update()
+    },
+    deleteDraft() {
+      this.$confirm('您确定要删除这份草稿吗?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        markdownApi.deleteDraft({
+          fileId: this.$route.query.id,
+          username: this.$store.state.user.name
+        }).then(() => {
+          this.$message({
+            message: "草稿已被删除",
+            type: 'success',
+            duration: 1000
+          })
+          this.reload()
+        })
+      })
+    },
+    // update
+    update(message) {
+      if (!this.checkParam()) {
+        return
+      }
+      this.updating = true
+      if (this.filename) {
+        const filename = this.filename + ".md"
+        markdownApi.editMarkdown({
+          fileId: this.$route.query.id,
+          userId: this.$store.state.user.userId,
+          username: this.$store.state.user.name,
+          filename: filename,
+          cover: this.file.cover,
+          isDraft: this.draft,
+          isRelease: this.file.release,
+          isAlonePage: this.alonePage,
+          slug: this.file.slug ? this.file.slug : this.filename,
+          categoryIds: this.file.categoryIds,
+          tagNames: this.dynamicTags,
+          currentDirectory: this.storageLocation,
+          contentText: this.contentEditor.getValue(),
+          html: this.contentEditor.getHTML(),
+          uploadDate: this.file.uploadDate,
+        }).then((res) => {
+          this.$emit('update:hasChange', false)
+          this.updating = false
+          this.$message({
+            message: message ? message : "发布成功",
+            type: 'success',
+            duration: 1000
+          })
+          if (this.draft) {
+            this.$router.push({path: this.$route.path, query: {operation: 'editor', id: res.data}})
+            this.$emit('onTitle', this.filename)
+            this.reload()
+          } else {
+            this.$emit('onRelease')
+          }
+        }).catch(() => {
+          this.updating = false
+        })
+      }
+    },
+    selectDir() {
+      this.$refs.dirTree.show()
+    },
+    confirmSelectDir() {
+      const node = this.$refs.dirTree.getSelectTreeNode()
+      this.storageLocation = node.path + node.name
+      this.$refs.dirTree.hide()
     }
   }
+}
 </script>
 <style lang="scss" scoped>
 @import "src/styles/setting";
-  /deep/ .el-main {
-    padding: 35px 20px 20px 20px;
-    .v-note-wrapper {
-      z-index: 200;
-    }
+
+/deep/ .el-main {
+  padding: 35px 20px 20px 20px;
+
+  .v-note-wrapper {
+    z-index: 200;
   }
-  /deep/ .el-header {
-    height: 43px!important;
+}
+
+/deep/ .el-header {
+  height: 43px !important;
+}
+
+/deep/ .el-input-group {
+  width: unset;
+}
+
+/deep/ .header-item {
+  line-height: 40px;
+  padding: 5px 0 5px 0;
+
+  .release-button {
+    float: right;
+    margin-left: 10px;
   }
-  /deep/ .el-input-group {
-    width: unset;
-  }
-  /deep/ .header-item {
-    line-height: 40px;
-    padding: 5px 0 5px 0;
-    .release-button {
-      float: right;
-      margin-left: 10px;
-    }
-    .el-input {
-      width: 90%;
-      input[type='text'] {
-        font-weight: 900;
-        color: #000000!important;
-        font-size: 16px;
-        border: none;
-        border-bottom: #ccc 1px solid;
-        border-radius: 0;
-      }
-    }
-    .title-label {
+
+  .el-input {
+    width: 90%;
+
+    input[type='text'] {
+      font-weight: 900;
+      color: #000000 !important;
       font-size: 16px;
-      font-weight: 500;
+      border: none;
+      border-bottom: #ccc 1px solid;
+      border-radius: 0;
     }
   }
+
+  .title-label {
+    font-size: 16px;
+    font-weight: 500;
+  }
+}
+
 /deep/ .el-drawer__body {
   .more-setting {
     padding: 15px;
   }
 }
-  /deep/ .more-setting {
-    margin-top: 32px;
-    padding-top: 15px;
-    .el-input {
-      width: 100%;
-    }
-    .mark-setting-label {
-      font-weight: bold;
-      margin-top: 10px !important;
-      margin-bottom: 5px;
-    }
-    .mark-setting-input {
-      width: 100%;
-    }
-    .mark-description {
-      font-size: 12px;
-      font-weight: 100;
-    }
+
+/deep/ .more-setting {
+  margin-top: 32px;
+  padding-top: 15px;
+
+  .el-input {
+    width: 100%;
   }
+
+  .mark-setting-label {
+    font-weight: bold;
+    margin-top: 10px !important;
+    margin-bottom: 5px;
+  }
+
+  .mark-setting-input {
+    width: 100%;
+  }
+
+  .mark-description {
+    font-size: 12px;
+    font-weight: 100;
+  }
+}
+
 .article-editor {
   min-width: 1160px;
   margin: auto;
   display: flex;
+
   .editor-left {
     width: 75%;
   }
+
   .editor-right {
     margin-top: 15px;
     width: 25%;
+
     .operation {
       float: right;
     }
   }
 }
+
 .setting-tags {
   /deep/ .el-tag {
     margin-left: 8px;
     margin-top: 8px;
   }
+
   /deep/ .button-new-tag {
     margin-left: 8px;
     margin-top: 8px;
@@ -587,21 +620,25 @@
     padding-top: 0;
     padding-bottom: 0;
   }
+
   /deep/ .input-new-tag {
     margin-left: 8px;
     margin-top: 8px;
     max-width: 94px;
     vertical-align: bottom;
+
     input {
       padding: 0 5px;
     }
   }
 }
+
 /deep/ .input-error {
   input {
     border-color: #f56c6c;
   }
 }
+
 .instruction-error {
   color: #F56C6C;
   font-size: 12px;
@@ -610,6 +647,7 @@
   position: absolute;
   margin-left: 8px;
 }
+
 /deep/ .el-autocomplete-suggestion {
   li {
     padding: 0;
@@ -622,35 +660,42 @@
     margin: 2px 4px;
     text-align: center;
   }
+
   li:hover {
     background-color: #3f9eff;
     color: #fafdff;
   }
 }
+
 /deep/ .el-autocomplete-suggestion__wrap {
   padding: 2px 0;
 }
-  @media (min-width: 1200px) {
-    .article-editor {
-      max-width: 1200px;
-    }
+
+@media (min-width: 1200px) {
+  .article-editor {
+    max-width: 1200px;
   }
+}
 
 /deep/ .el-tree-node {
-  &:focus>.el-tree-node__content {
+  &:focus > .el-tree-node__content {
     background-color: unset;
   }
+
   .el-tree-node__content:hover {
     background-color: unset;
   }
 }
+
 .category-tree {
   max-height: 500px;
   overflow: auto;
 }
+
 /deep/ .url-slug {
   display: flex;
   color: #aaaaaa;
+
   .mark-setting-input {
     font-size: 14px;
     padding: 0 2px;
@@ -659,18 +704,27 @@
     width: fit-content;
     min-width: 35px;
     background-color: #ecf5ff;
+
     &:focus {
       outline: none;
     }
   }
 }
+
 /deep/ .vditor-toolbar--pin {
   top: unset;
 }
-/deep/.el-scrollbar__wrap {
+
+/deep/ .el-scrollbar__wrap {
   &::-webkit-scrollbar {
     width: 0;
     height: 0;
   }
 }
+.view-icon {
+  margin-left: 10px;
+  /deep/.svg-icon{
+    margin-right: 2px;
+  }
+}
 </style>
diff --git a/src/views/setting/articles/alonePageManager.vue b/src/views/setting/articles/alonePageManager.vue
index 3eee284..34af284 100644
--- a/src/views/setting/articles/alonePageManager.vue
+++ b/src/views/setting/articles/alonePageManager.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <article-manager :page-title="pageTitle" alone-page></article-manager>
+    <article-manager :page-title="pageTitle" :new-article-text="newArticleText" alone-page></article-manager>
   </div>
 </template>
 
@@ -14,6 +14,7 @@ export default {
   data() {
     return {
       pageTitle: '管理独立页面',
+      newArticleText: '新增页面'
     }
   },
   computed: {},
diff --git a/src/views/setting/articles/articleManager.vue b/src/views/setting/articles/articleManager.vue
index fcc8468..53667b1 100644
--- a/src/views/setting/articles/articleManager.vue
+++ b/src/views/setting/articles/articleManager.vue
@@ -9,14 +9,14 @@
       @open="openDialog"
       @close="closeDialog"
     >
-      <markdown-editor ref="editor" :has-change.sync="hasChange" :alone-page="alonePage" @onTitle="onTitle" @onRelease="onRelease"></markdown-editor>
+      <markdown-editor ref="editor" :has-change.sync="hasChange" :alone-page="alonePage" :site-url="siteUrl" :is-edit="isEdit" @onTitle="onTitle" @onRelease="onRelease"></markdown-editor>
     </el-dialog>
     <el-card class="box-card">
       <div slot="header">
         <div class="box-card-header">
           <div class="clearfix card-header-back">
             <span>{{ alonePage ? '管理独立页面':'管理文章' }}</span>
-            <el-button class="card-button" size="mini" type="primary" @click="newArticle">写文章</el-button>
+            <el-button class="card-button" size="mini" type="primary" @click="newArticle">{{newArticleText}}</el-button>
           </div>
           <div class="card-header-right" v-show="this.multipleSelection.length > 0">
             <el-button size="small" type="danger" @click="handleDelete()">删除</el-button>
@@ -90,7 +90,7 @@
             label="标题">
             <template slot-scope="scope">
                 <a :title="'编辑 '+scope.row.name" @click="editArticle(scope.row.id)">{{scope.row.name}}<svg-icon icon-class="bianji-"></svg-icon></a>
-                <router-link :title="'浏览 '+scope.row.name" :to="(alonePage?'/articles/o/':'/articles/s/')+scope.row.slug" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></router-link>
+                <a :title="'浏览 '+scope.row.name" :href="(alonePage?siteUrl+'/o/':siteUrl+'/s/')+scope.row.slug" target="_blank"><svg-icon class="wailian" icon-class="wailian"></svg-icon></a>
             </template>
           </el-table-column>
           <el-table-column
@@ -158,6 +158,7 @@ import MarkdownEditor from '@/views/markdown/index'
 import markdownApi from "@/api/markdown-api";
 import categoryApi from "@/api/category";
 import api from "@/api/file-api";
+import {getSetting} from '@/api/setting-api'
 import MultipleTreeSelect from "@/components/select/MultipleTree";
 export default {
   name: 'articleManager',
@@ -173,6 +174,10 @@ export default {
     alonePage: {
       type: Boolean,
       default: false
+    },
+    newArticleText: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -199,6 +204,8 @@ export default {
       },
       draftNums: 0,
       multipleSelection: [],
+      siteUrl: `${window.location.origin}/articles`,
+      isEdit: false,
     }
   },
   computed: {},
@@ -215,6 +222,7 @@ export default {
   mounted() {
     this.getArticleList()
     this.categoryTree()
+    this.getWebsiteSetting()
     this.newArticleDialogVisible = !!this.$route.query.operation
     // 监听返回
     if (window.history && window.history.pushState) {
@@ -312,6 +320,14 @@ export default {
       const operation = this.$route.query.operation
       this.newArticleDialogVisible = !!operation;
     },
+    // 获取网站设置
+    getWebsiteSetting() {
+      getSetting({userId: this.$store.state.user.userId}).then((res) => {
+        if(res.data) {
+          this.siteUrl = res.data.siteUrl
+        }
+      })
+    },
     // 取消筛选
     cancelFilter() {
       this.query.userId = ''
@@ -394,8 +410,10 @@ export default {
     newArticle() {
       this.newArticleDialogVisible = true
       this.$router.push({query: {operation: 'new'}})
+      this.isEdit = false
     },
     editArticle(id) {
+      this.isEdit = true
       this.newArticleDialogVisible = true
       this.$router.push({query: {operation: 'editor', id: id}})
       if(this.$refs.editor){
@@ -431,9 +449,11 @@ export default {
         if(this.alonePage){
           this.title = '创建新页面 ' + val
         }
+        this.isEdit = false
       }
       if(operation === 'editor'){
         this.title = '编辑：' + val
+        this.isEdit = true
       }
     },
     openDialog() {
diff --git a/src/views/setting/articles/articlePageManager.vue b/src/views/setting/articles/articlePageManager.vue
index 83742cc..9c80518 100644
--- a/src/views/setting/articles/articlePageManager.vue
+++ b/src/views/setting/articles/articlePageManager.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <article-manager :page-title="pageTitle"></article-manager>
+    <article-manager :page-title="pageTitle" :new-article-text="newArticleText"></article-manager>
   </div>
 </template>
 
@@ -15,6 +15,7 @@ export default {
   data() {
     return {
       pageTitle: '管理文章',
+      newArticleText: '写文章'
     }
   },
   computed: {},
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index 140ca80..de02033 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -12,8 +12,10 @@
 
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane label="网站首页背景" name="1">
-          <div class="config-itme-label">站点背景大图：
-          </div>
+          <div class="config-itme-label">站点地址：</div>
+          <el-input autosize type="textarea" width="100%" v-model="form.siteUrl"></el-input>
+          <span class="instruction">在这里填入站点的地址或域名。例如：<a href="https://blog.jmal.top" target="_blank">https://blog.jmal.top</a></span>
+          <div class="config-itme-label">站点背景大图：</div>
           <upload-image-input v-model="form.backgroundSite"/>
           <span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span>
           <div class="config-itme-label">首页大图内文字：</div>
@@ -95,6 +97,7 @@ export default {
       activeName: '1',
       example: '<i class="fab fa-github">github</i>',
       form: {
+        siteUrl: '',
         backgroundSite: '',
         backgroundTextSite: '',
         backgroundDescSite: '',