# 导入文本

注意

由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，node_modules > @（文档根目录） > 相对目录。

注意

由于导入是全局性质的，以下内容中<<< 和 include 之间的空格，使用时需要删除

你可以通过下述的语法导入已经存在的文件文本：

<<< include(@/filepath)

或者

<<< include @/filepath

输入

<<< include(./fragments/snippet.js)

输出

export default function () {
// ..
}

为了只导入对应部分的代码，你也可运用 VS Code region。你可以在文件路径后方的 # 紧接着提供一个自定义的区域名称（预设为 snippet ）

输入

<<< include(./fragments/snippet-with-region.js#snippet)

代码文件

// #region snippet
function foo () {
    return ({
      dest: '../../vuepress',
      locales: {
        '/': {
          lang: 'en-US',
          title: 'VuePress',
          description: 'Vue-powered Static Site Generator'
        },
        '/zh/': {
          lang: 'zh-CN',
          title: 'VuePress',
          description: 'Vue 驱动的静态网站生成器'
        }
      },
      head: [
        ['link', { rel: 'icon', href: `/logo.png` }],
        ['link', { rel: 'manifest', href: '/manifest.json' }],
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
        ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
        ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
        ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
      ]
    })
  }
  // #endregion snippet
  
  export default foo

输出

function foo () {
return ({
dest: '../../vuepress',
locales: {
'/': {
lang: 'en-US',
title: 'VuePress',
description: 'Vue-powered Static Site Generator'
},
'/zh/': {
lang: 'zh-CN',
title: 'VuePress',
description: 'Vue 驱动的静态网站生成器'
}
},
head: [
['link', { rel: 'icon', href: /logo.png }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
['link', { rel: 'apple-touch-icon', href: /icons/apple-touch-icon-152x152.png }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-TileColor', content: '#000000' }]
]
})
}

← Mermaid →