扩展配置 #
底部栏 #
我们为主题新增了首页底部栏功能，最大可支持 4 个栏目数，每个栏目数可以添加多个 Item。接下来我们将讲解如何去开启这个功能以及使用时需要注意的问题。
打开你默认作为首页的 README.md 文件，在 Front Matter 之间添加以下配置：
footerColumn: 2
footerWrap:
- headline: Column 1
items:
- title: Item 1
link: https://github.com/zpfz/vuepress-theme-antdocs
details: details
- title: Item 2
link: https://github.com/zpfz/vuepress-theme-antdocs
details: details
- headline: Column 2
items:
- title: Item 1
link: https://github.com/zpfz/vuepress-theme-antdocs
details: details
- title: Item 2
link: https://github.com/zpfz/vuepress-theme-antdocs
details: details
其中，相关字段说明如下：
footerColumn：底部栏分栏数，最大支持 4 个栏目数。必选footerWrap：底部栏数组。必选headline：底部栏分栏标题。可选itemstitle：底部栏分栏下 item 的名称。必选link：底部栏分栏下 item 的导航链接。必选details：底部栏分栏下 item 的描述信息。可选
页脚 v1.2.2+ #
为了满足首页页脚支持填写备案号等需求，我们对页脚进行了优化，将其支持填写 html 代码片段。现在，除了直接填写文本外，你还可以这样使用:
footer: Written by Feng L.H. | <a href="http://beian.miit.gov.cn/" target="_blank">自行填写ICP备案号</a>
广告位 #
为了保证项目维护与发展，我们给主题添加了广告位功能，用户可以给侧边栏自定义广告，通过获取额外的资金来鼓励自己写作的积极性，这对开发者是极有帮助的。
目前，广告位支持两种风格以及一种招待状态。打开 .vuepress/config.js 文件，在 themeConfig 下添加 ads 字段，如下所示：
themeConfig: {
...
ads:{
// 广告位配置
},
...
},
广告风格一 #
最基本的广告风格就是 图片+文字描述，你可以通过以下的配置来使用这个功能：
themeConfig: {
...
ads:{
style: 1,
image: 'https://s1.ax1x.com/2020/03/22/84PzLD.png',
text: 'Limited time offer: Get 10 free Adobe Stock images.',
link: 'https://vuepress.vuejs.org/',
},
...
},
其中，相关字段说明如下：
style：指定某种风格，可选参数：1，2，3。必选image：指定图片链接。可选text：指定文本描述。可选link：指定点击广告时跳转的链接。可选
此外，你可以在 .vuepress/styles/palette.less 下添加样式变量 @PromoStyle1MW 来设置图片的最大宽度。
广告风格二 #
当你想直接用图片或者有多张图片作为广告时，你可以通过以下的配置来使用这个功能：
themeConfig: {
...
ads:{
style: 2,
speed: 2000,
items:[
{
text: 'Ads details here',
image:'https://cn.bing.com/th?id=OHR.LoughriggTarn_ZH-CN1404327665_1920x1080.jpg',
link: 'https://vuepress.vuejs.org/'
},
{
text: 'Ads details here',
image:'https://cn.bing.com/th?id=OHR.MetamorphicRocks_ZH-CN9753251368_1920x1080.jpg',
link: 'https://vuepress.vuejs.org/'
},
{
text: 'Ads details here',
image:'https://cn.bing.com/th?id=OHR.KeichitsuCrocuse_ZH-CN1061292366_1920x1080.jpg',
link: 'https://vuepress.vuejs.org/'
}
]
},
...
},
其中，相关字段说明如下：
style：指定某种风格，可选参数：1，2，3。必选speed：指定切换图片时的速度，默认 3000 毫秒（3秒）。可选itemstext：指定鼠标在广告上悬停时显示的信息。可选image：指定图片链接。可选link：指定点击广告时跳转的链接。可选
招待状态 #
当你需要招广告商时，你可以通过以下的配置来使用这个功能：
themeConfig: {
...
ads:{
style: 3,
title: '赞助商',
btnText: '成为赞助商',
msgTitle: '成为赞助商',
msgText: '如果您有品牌推广、活动推广、招聘推广、社区合作等需求，欢迎联系我们，成为赞助商。您的广告将出现在 AndDocs 文档侧边栏等页面。',
msgOkText: '确定',
},
...
},
其中，相关字段说明如下：
style：指定某种风格，可选参数：1，2，3。（实际上，除了1和2之外，其他参数的状态都是这个风格。）必选title：指定广告位的标题。可选btnText：指定广告位按钮的名称。必选msgTitle：指定弹窗的标题。必选msgText：指定弹窗的文本信息。必选msgOkText：指定弹窗关闭按钮的名称。必选
当然，这三种效果的配置可以同时存在，你只需要设置好 style 就能指定显示某种效果。
此外，为了给用户保留较好的浏览效果，广告位在移动端默认不显示。如果你非要在移动端显示侧边栏广告的话，可以在 .vuepress/styles/palette.less 下添加 @MobileShow: block; 即可。
置顶按钮 #
为了能够让用户有更多的自由性去设置主题，我们将置顶按钮修改为可自定义开启，只需在 .vuepress/config.js 中 themeConfig 字段下添加一行 backToTop: true 即可开启，反之则关闭。配置示例代码如下：
themeConfig: {
...
backToTop: true,
...
}
首页按钮 #
为了让首页主要和次要按钮有个鲜明的对比，在视觉上快速引导用户的选择，我们进一步优化了主要和次要按钮相关配置。你需要打开你的首页 md 文件，在 YAML 内添加以下代码：
actionBtn:
text: Get Started
link: /guide/
type: primary
ghost: false
size: large
preactionBtn:
text: Playground
link: /guide/
type: primary
ghost: true
size: large
其中，相关字段说明如下：
actionBtn：主要按钮。可选text：按钮文字，默认值ActionBtn。可选link：点击按钮后导航链接，默认值/，可以是文档内部链接也可以是外部链接。可选type：按钮类型，默认值primary，可选值有：primary、dashed、danger、link，效果可参考：按钮类型 (opens new window) 可选ghost：镂空按钮，默认值false，可选值有：true和false。可选size：指定按钮大小，默认值large，可选值有：large、default、small，效果可参考：按钮尺寸 (opens new window) 可选shape：按钮形状，默认值null，可选值有：circle、round和null。可选
preactionBtn：次要按钮。可选text：同上，默认值PreActionBtn。可选link：同上。可选type：同上。可选ghost：同上。可选size：同上。可选shape：同上。可选
如果您使用的 1.2.2 版本，您应该参考以下配置：
考虑到有些用户需要使用首页次级按钮来引导读者，所以我们在新版本中多添了一个次级按钮。打开你的首页 md 文件，在 YAML 内添加以下代码开启次级按钮：
preactionText: 次级按钮
preactionLink: /guide/
移动端侧边栏按钮 已修复 #
当你的页面没有侧边栏时，应该在页面 YAML 部分添加以下配置来关闭移动端的侧边栏按钮：
---
toggleBtn: 0
---