One

主题

B

主题配置 ​

主题配置 ​

主题的配置在.vuepress/config.ts文件的themeConfig字段中，是在原有配置的基础上做的新增和修改，配置示例请查看：config.ts (opens new window)。

详细信息
ts
import{resolve } from'path'import{defineConfig4CustomTheme,UserPlugins } from'vuepress/config'import{VdoingThemeConfig } from'vuepress-theme-vdoing/types'importdayjs from'dayjs'importbaiduCode from'./config/baiduCode'importhtmlModules from'./config/htmlModules'constDOMAIN_NAME='xugaoyi.com'constWEB_SITE=`https://${DOMAIN_NAME}`exportdefaultdefineConfig4CustomTheme<VdoingThemeConfig>({theme:'vdoing',locales:{'/':{lang:'zh-CN',title:"Evan's blog",description:'web前端技术博客,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,React,python,css3,html5,Node,git,github等技术文章。',}},themeConfig:{nav:[{text:'首页',link:'/'},{text:'前端',link:'/web/',items:[{text:'前端文章',items:[{text:'JavaScript',link:'/pages/8143cc480faf9a11/'},],},{text:'学习笔记',items:[{text:'《JavaScript教程》',link:'/note/javascript/'},{text:'《JavaScript高级程序设计》',link:'/note/js/'},{text:'《ES6 教程》',link:'/note/es6/'},{text:'《Vue》',link:'/note/vue/'},{text:'《React》',link:'/note/react/'},{text:'《TypeScript 从零实现 axios》',link:'/note/typescript-axios/',},{text:'《Git》',link:'/note/git/',},{text:'TypeScript',link:'/pages/51afd6/',},{text:'JS设计模式总结',link:'/pages/4643cd/',},],},],},{text:'页面',link:'/ui/',items:[{text:'HTML',link:'/pages/8309a5b876fc95e3/'},{text:'CSS',link:'/pages/0a83b083bdf257cb/'},],},{text:'技术',link:'/technology/',items:[{text:'技术文档',link:'/pages/9a7ee40fc232253e/'},{text:'GitHub技巧',link:'/pages/4c778760be26d8b3/'},{text:'Nodejs',link:'/pages/117708e0af7f0bd9/'},{text:'博客搭建',link:'/pages/41f87d890d0a02af/'},],},{text:'更多',link:'/more/',items:[{text:'学习',link:'/pages/f2a556/'},{text:'面试',link:'/pages/aea6571b7a8bae86/'},{text:'心情杂货',link:'/pages/2d615df9a36a98ed/'},{text:'实用技巧',link:'/pages/baaa02/'},{text:'友情链接',link:'/friends/'},],},{text:'关于',link:'/about/'},{text:'收藏',link:'/pages/beb6c0bd8a66cea6/',},{text:'索引',link:'/archives/',items:[{text:'分类',link:'/categories/'},{text:'标签',link:'/tags/'},{text:'归档',link:'/archives/'},],},],sidebarDepth:2,logo:'/img/logo.png',repo:'xugaoyi/vuepress-theme-vdoing',searchMaxSuggestions:10,lastUpdated:'上次更新',docsDir:'docs',editLinks:true,editLinkText:'编辑',sidebar:'structuring',author:{name:'xugaoyi',link:'https:},blogger:{avatar:'https:name:'Evan Xu',slogan:'前端界的小学生',},social:{icons:[{iconClass:'icon-youjian',title:'发邮件',link:'mailto:894072666@qq.com',},{iconClass:'icon-github',title:'GitHub',link:'https:},{iconClass:'icon-erji',title:'听音乐',link:'https:},],},footer:{createYear:2019,copyrightInfo:'Evan Xu |<a href="https:},extendFrontmatter:{author:{name:'xugaoyi',link:'https:}},htmlModules},head:[['link',{rel:'icon',href:'/img/favicon.ico'}],['meta',{name:'keywords',content:'前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown',},],['meta',{name:'baidu-site-verification',content:'7F55weZDDc'}],['meta',{name:'theme-color',content:'#11a8cd'}],],plugins:<UserPlugins>[["sitemap",{hostname:WEB_SITE,},],'vuepress-plugin-baidu-autopush',['vuepress-plugin-baidu-tongji',{hm:baiduCode,},],['thirdparty-search',{thirdparty:[{title:'在MDN中搜索',frontUrl:'https:behindUrl:'',},{title:'在Runoob中搜索',frontUrl:'https:},{title:'在Vue API中搜索',frontUrl:'https:},{title:'在Bing中搜索',frontUrl:'https:},{title:'通过百度搜索本站的',frontUrl:`https://www.baidu.com/s?wd=site%3A${DOMAIN_NAME}%20`,},],}],['one-click-copy',{copySelector:['div[class*="language-"] pre','div[class*="aside-code"] aside'],copyMessage:'复制成功',duration:1000,showInMobile:false,},],['demo-block',{settings:{jsfiddle:false,codepen:true,horizontal:false,},},],['vuepress-plugin-zooming',{selector:'.theme-vdoing-content img:not(.no-zoom)',options:{bgColor:'rgba(0,0,0,0.6)',},},],['vuepress-plugin-comment',{choosen:'gitalk',options:{clientID:'a6e1355287947096b88b',clientSecret:'f0e77d070fabfcd5af95bebb82b2d574d7248d71',repo:'blog-gitalk-comment',owner:'xugaoyi',admin:['xugaoyi'],pagerDirection:'last',id:'<%- (frontmatter.permalink ||frontmatter.to.path).slice(-16) %>',title:'「评论」<%- frontmatter.title %>',labels:['Gitalk','Comment'],body:'页面：<%- window.location.origin + (frontmatter.to.path ||window.location.pathname) %>',},},],['@vuepress/last-updated',{transformer:(timestamp,lang) =>{returndayjs(timestamp).format('YYYY/MM/DD,HH:mm:ss')},},],],markdown:{lineNumbers:true,extractHeaders:['h2','h3','h4','h5','h6'],},extraWatchFiles:['.vuepress/config.ts','.vuepress/config/htmlModules.ts',]})

更多官方配置，请查看vuepress文档 (opens new window)。

是否打开分类、标签、归档 ​

category ​

  • 类型：boolean
  • 默认：true

是否打开分类功能。 如打开，会做的事情有：

  1. 自动生成的front matter包含分类字段
  2. 页面中显示与分类相关的信息和模块
  3. 自动生成分类页面（在@pages文件夹）

如关闭，则反之。

tag ​

  • 类型：boolean
  • 默认：true

是否打开标签功能。 如打开，会做的事情有：

  1. 自动生成的front matter包含标签字段
  2. 页面中显示与标签相关的信息和模块
  3. 自动生成标签页面（在@pages文件夹）

如关闭，则反之。

archive ​

  • 类型：boolean
  • 默认：true

是否打开归档功能。 如打开，会做的事情有：

  1. 自动生成归档页面（在@pages文件夹）

如关闭，则反之。

NOTE

提示

如果你仅仅是想使用这个主题来搭建知识库，并不想使用分类、标签、归档功能，就可以关闭它们。

使用知识库，也可以使用此功能哦哈哈。😂

使用分类页、标签页、归档页链接 ​

当你打开了分类、标签、归档功能，就可以在导航或其他地方添加分类页、标签页、归档页的链接：

  • 分类页:/categories/
  • 标签页:/tags/
  • 归档页:/archives/

碎片化文章默认分类值 ​

categoryText ​

  • 类型：string
  • 默认：'随笔'

碎片化文章（_posts文件夹的文章）默认生成的分类值

页面风格 ​

pageStyle v1.12.0 + ​

  • 类型：string
  • 可选值：'card'|'line'（line在未设置bodyBgImg时才生效）
  • 默认：'card'

页面风格，card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框（未设置bodyBgImg时才生效）

defaultMode v1.12.3 + ​

  • 类型：string
  • 可选值：'auto'|'light'|'dark'|'read'
  • 默认：'auto'

默认外观模式，用户未在页面手动修改过模式时才生效，否则以用户设置的模式为准

body背景大图 ​

bodyBgImg ​

  • 类型：string|array
  • 默认：undefined

body背景大图，单张图片使用String，多张图片使用Array， 多张图片时每隔 <bodyBgImgInterval>秒换一张

bodyBgImgOpacity v1.4.0 + ​

  • 类型：number
  • 默认：0.5
  • 选值范围：0 ~1.0

body背景图透明度

bodyBgImgInterval v1.12.0 + ​

  • 类型：number
  • 默认：15
  • 单位：s

body有多张背景大图时的切换间隔

文章标题前的图标 ​

titleBadge ​

  • 类型：boolean
  • 默认：true

是否打开文章标题图标

titleBadgeIcons ​

  • 类型：array
  • 默认：内置图标

文章标题图标的地址

文章内容块的背景底纹 ​

contentBgStyle v1.4.0 + ​

  • 类型：number
  • 默认：undefined
  • 选值：1 =>方格 |2 =>横线 |3 =>竖线 |4 =>左斜线 |5 =>右斜线 |6 =>点状

文章内容块的背景底纹

侧边栏 ​

  • 类型：srting|object|array
  • 在默认主题原有的配置上新增两项参数：
    • 'structuring'自动生成结构化侧边栏
    • {mode:'structuring',collapsable:Boolean}自动生成结构化侧边栏，并设置侧边栏是否可折叠，默认true

提示

如需构建结构化站点请把此配置设置为structuring或 {mode:'structuring',collapsable:false}

sidebarOpen ​

  • 类型：boolean
  • 默认：true

初始状态下是否打开侧边栏

提示

在侧边栏关闭状态下，页面向下滚动时会隐藏顶部导航栏，让用户更专注于阅读。

对指定页面禁用侧边栏 ​

你可以通过 front matter 来禁用指定页面的侧边栏：

yaml
---sidebar:false---

碎片化文章的侧边栏 ​

在_posts文件夹的文章会自动在 front matter 添加 sidebar:auto

yaml
---sidebar:auto---

最近更新栏 ​

updateBar ​

  • 类型：object

  • 默认：

    {showToArticle:true,moreArticle:'/archives/'}
    • showToArticle 显示到文章页底部，默认true
    • moreArticle “更多文章”跳转的页面，默认'/archives/'

最近更新栏，显示于文章页底部和简约版首页文章列表

非文章页的设置 ​

对于非文章页，如目录页、关于、友情链接等自定义页面，最好在front matter设置article:false，设置之后这个页面将被认定为非文章页，不显示面包屑和作者、时间，不显示最近更新栏，不会参与到最近更新文章的数据计算中。

yaml
---article:false---

右侧文章大纲栏 ​

rightMenuBar v1.6.3 + ​

  • 类型：boolean
  • 默认：true

是否显示右侧文章大纲栏。设置为false或屏宽小于1300px时，文章大纲将与左侧侧边栏混合在一起。 (注：在屏宽小于1300px下无论如何都不显示右侧文章大纲栏。)

快捷翻页按钮 ​

pageButton v1.4.3 + ​

  • 类型：boolean
  • 默认：true

是否显示快捷翻页按钮 (此按钮是文章页左右两边的箭头按钮，小屏中不会显示。)

文章作者信息 ​

author ​

  • 类型：string|{name:String,link:String}
  • 默认：undefined
  • 属性：
    • name 作者名称
    • link 作者链接

文章默认的作者信息

指定的文章作者信息 ​

你也可以在指定的文章front matter设置作者信息，优先级比默认作者信息高，示例：

yaml
---author:name:作者名link:https:---或---author:作者名---

博主信息 ​

blogger ​

  • 参数和类型：{avatar:String,name:String,slogan:String}
  • 默认：undefined
    • avatar 头像，必需
    • name 博主名称，必需
    • slogan 标语，可选

博主信息显示于首页博主信息栏

社交图标 ​

social ​

  • 参数和类型：{iconfontCssFile:String,icons:[{iconClass:String,title:String,link:String}]}
  • 默认：undefined
    • iconfontCssFile 可选，阿里图标库（或其他）的在线css字体图标文件地址，对于主题没有的图标可自由添加
    • icons 图标列表，数量自由
      • iconClass 图标的Class名称
      • title 图标的title
      • link 图标的跳转链接

社交图标显示于博主信息栏和页脚栏

主题内置的社交图标 v1.2.2+,部分v1.7.2+ ​

微信icon-weixinQQicon-QQ邮件icon-youjiannpmicon-npmgithubicon-githubgiteeicon-gitee微博icon-weibo
知乎icon-zhihu语雀icon-yuque豆瓣icon-douban掘金icon-juejin简书icon-jianshu思否icon-sf博客园icon-bokeyuan
CSDNicon-csdnv2exicon-v2ex抖音icon-douyin哔哩哔哩icon-bilibiliyoutubeicon-youtubefacebookicon-facebooktwittericon-twitter
telegramicon-telegramRSSicon-rss耳机icon-erji猫咪icon-mao书本icon-shuben相册icon-xiangce

扩展自动生成front matter ​

extendFrontmatter v1.11.0 + ​

  • 类型：Object
  • 默认：undefined

当.md文件的front matter不存在extendFrontmatter内相应的字段时，将在运行开发服务dev或打包build时自动添加，但不会覆盖已有的数据。

例子：

js
extendFrontmatter:{author:{name:'xugaoyi',link:'https:},titleTag:'',}

生成到front matter：

yaml
---author:name:xugaoyilink:https:titleTag:---

页脚版权栏 ​

  • 参数和类型：{createYear:Number |String,copyrightInfo:String}
  • 默认：undefined
    • createYear 博客创建的年份
    • copyrightInfo 可以配置包括版权信息、备案信息在内的所有信息，支持a标签

页脚版权栏信息，原默认主题在首页的front matter中的footer配置项已弃用。

自定义html模块 ​

可用于插入广告模块

htmlModules v1.7.0 + ​

  • 类型：object

  • 默认：undefined

  • 属性：

    • homeSidebarB首页侧边栏底部

    • sidebarT所有左侧边栏顶部

    • sidebarB所有左侧边栏底部

    • pageT页面顶部

    • pageB页面底部

    • pageTshowMode

      页面顶部的显示方式

      • 未配置默认所有页面显示
      • 'article'仅文章页①显示
      • 'custom'仅自定义页①显示
    • pageBshowMode

      页面底部的显示方式

      • 未配置默认全局显示
      • 'article'仅文章页①显示
      • 'custom'仅自定义页①显示

    • windowLB全局窗口左下角②

    • windowRB全局窗口右下角②

    ①注：在.md文件front matter配置article:false的页面是自定义页，未配置的默认是文章页（首页除外）。

    ②注：windowLB 和 windowRB：1.展示区块最大宽高200px400px。2.请给自定义元素定一个不超过200px400px的宽高。3.在屏幕宽度小于960px时无论如何都不会显示。

  • 格式：

js
htmlModules:{homeSidebarB:htmlString,sidebarT:htmlString,sidebarB:htmlString,pageT:htmlString,pageB:htmlString,pageTshowMode:'article'|'custom',pageBshowMode:'article'|'custom',windowLB:htmlString,windowRB:htmlString,}