开发主题布局组件假设你的主题取决于你目录

　　开发主题布局组件假设你的主题取决于你目录

　　开发主题

　　要编写主题，请首先在文档根目录中创建.vuepress / theme目录，然后创建Layout.vue文件：

　　<p>.

└─ .vuepress

 └─ theme

   └─ Layout.vue

</p>

　　在这里，这就像在开发普通的Vue应用程序一样。如何组织主题完全取决于您。

　　获取渲染内容

　　当前.md文件呈现的内容可以用作唯一的全局组件。您可能希望它显示在页面上的某处。最简单的主题可以是唯一的Layout.vue组件，并且收录以下内容：

　　了解更多：

　　内容摘录

　　如果降价文件中有注释，则注释之前的内容将被捕获并显示在$ page.excerpt属性中。如果您正在开发博客主题，则可以使用此属性来呈现带有摘录的文章列表。

　　目录结构

　　随着需求的变化，仅一个布局组件Layout.vue可能不够。您可能想为不同的页面定义更多的布局组件，您可能还想自定义一个组件，甚至应用一些插件。

　　然后是时候重新组织您的主题了！商定主题的目录结构如下：

　　<p>theme

├── global-components

│ └── xxx.vue

├── components

│ └── xxx.vue

├── layouts

│   ├── Layout.vue (必要的)

│   └── 404.vue

├── styles

│   ├── index.styl

│   └── palette.styl

├── templates

│   ├── dev.html

│   └── ssr.html

├── index.js

├── enhanceApp.js

└── package.json

</p>

　　注意

　　当您将主题发布为npm软件包时，如果没有任何主题配置，即没有theme / index.js，则需要将package.json中的“ main”字段设置为布局/ Layout.vue，只有这样VuePress才能正确解析主题。

　　{

...

"main": "layouts/Layout.vue",

...

}

　　布局组件

　　假设您的主题布局目录如下：

　　<p>theme

└── layouts

   ├── Layout.vue

   ├── AnotherLayout.vue

   └── 404.vue

</p>

　　然后，默认情况下，所有页面将使用Layout.vue作为布局组件，而40 4. vue将用于那些无法匹配的路由。

　　如果要使用AnotherLayout.vue作为某个页面中的布局组件，则只需更新此页面的前题：

　　---

layout: AnotherLayout

---

　　提醒

　　每个布局组件都可以呈现完全不同的页面。如果要设置一些全局UI（例如global），则可以考虑使用。

　　使用插件

　　您可以通过主题的配置文件themePath / index.js将一些插件应用于主题：

　　// .vuepress/theme/index.js

module.exports = {

plugins: [

'@vuepress/pwa',

{

serviceWorker: true,

updatePopup: true

}

]

}

　　网站和页面元数据

　　The

　　布局组件将对文档目录中的每个.md执行一次。同时，整个网站和特定页面的元数据将分别作为this。$ site和this。$ page属性公开，并将它们注入到当前应用程序的每个组件中。

　　这是您现在看到的网站中$ site的值：

　　{

"title": "VuePress",

"description": "Vue 驱动的静态网站*敏*感*词*",

"base": "/",

"pages": [

{

"lastUpdated": 1524027677000,

"path": "/",

"title": "VuePress",

"frontmatter": {}

},

...

]

}

　　标题，描述和基础将从.vuepress / config.js中的相应字段复制，而页面是收录每个页面元数据对象的数据，包括其路径，页面标题（明确传递给它指定，或通过页面的第一个标题获取它），以及所有源文件中的YAML前项数据。

　　以下对象是您正在查看的页面的$ page值：

　　{

"lastUpdated": 1524847549000,

"path": "/custom-themes.html",

"title": "自定义主题",

"headers": [/* ... */],

"frontmatter": {}

}

　　如果用户在.vuepress / config.js中配置themeConfig，则可以通过$ site.themeConfig访问它。这样，您可以使用它为用户打开一些自定义主题配置，例如指定目录或页面的顺序，还可以结合$ site.pages来动态构建导航链接。

　　最后，请不要忘记，作为Vue Router API的一部分，还可以使用this。$ route和this。$ router。

　　提醒

　　lastUpdated是此文件的最后git提交的UNIX时间戳。有关更多详细信息，请参阅：。

　　参考：

　　应用程序配置

　　自定义主题还可以通过主题根目录中的EnhanceApp.js文件扩展VuePress应用程序的配置。此文件应导出默认的挂钩函数，并接受收录某些应用程序级属性的对象作为参数。您可以使用此挂钩安装一些其他的Vue插件，注册全局组件或添加其他路由挂钩等。

　　export default ({

Vue, // VuePress 正在使用的 Vue 构造函数

options, // 附加到根实例的一些选项

router, // 当前应用的路由实例

siteData // 站点元数据

}) => {

// ...做一些其他的应用级别的优化

}