扩展配置 #
底部栏 #
我们为主题新增了首页底部栏功能,最大可支持 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
:底部栏分栏标题。推荐设置items
title
:底部栏分栏下 item 的名称。开启时必选link
:底部栏分栏下 item 的导航链接。开启时必选details
:底部栏分栏下 item 的描述信息。可选
页脚 1.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
下添加样式变量 @AdsStyle1MW
来设置图片的最大宽度。
广告风格二 #
当你想直接用图片或者有多张图片作为广告时,你可以通过以下的配置来使用这个功能:
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秒)。推荐设置items
text
:指定鼠标在广告上悬停时显示的信息。推荐设置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;
即可。
置顶按钮 TIP #
为了能够让用户有更多的自由性去设置主题,我们将置顶按钮修改为可自定义开启,只需在 .vuepress/config.js
中 themeConfig
字段下添加一行 backToTop: true
即可开启,反之则关闭。配置示例代码如下:
themeConfig: {
...
backToTop: true,
...
}
首页次级按钮 #
考虑到有些用户需要使用首页次级按钮来引导读者,所以我们在新版本中多添了一个次级按钮。打开你的首页 md 文件,在 YAML 内添加以下代码开启次级按钮:
preactionText: 次级按钮
preactionLink: /guide/
移动端侧边栏按钮 TIP #
当你的页面没有侧边栏时,应该在页面 YAML 部分添加以下配置来关闭移动端的侧边栏按钮:
---
toggleBtn: 0
---