第5章. 常用配置

作者编写的教程地址请查看 这里

一、首页布局配置

配置文件主要是两个文件

  • README.md (位于根目录)
  • config.ts (位于./vuepress/config.ts)

首页配置(README.md )

README.md 文件主要是包括主页的一些相关配置,包括主页布局、主页的脚注、主页按钮等等配置.

🎒 1.1 主页布局

modules:

  • Banner:巨幅展示图,可以展示 logo、标题、简述、背景图,上下布局
  • BannerBrand:品牌格式的巨幅展示图,可以展示 logo、标题、简述、背景图、按钮,左右布局
  • Blog:博客模块,两栏布局,作则展示博客列表,右侧展示用户信息及博客相关内容
  • MdContent:首页的 markdown 正文展示模块
  • Footer:首页底部模块
  • banner
    • 描述:用于配置 Banner 模块
    • frontmatter 配置:
      • heroText:标题
      • tagline:简述
      • heroImage: 首页 logo
      • heroImageStyle: 首页 logo 样式
      • bgImage: 背景图片
      • bgImageStyle: 背景图片样式

🎁 1.2 主页按钮

  • bannerBrand
    • 描述:用于配置 BannerBrand 模块
    • frontmatter 配置:
      • title:标题
      • description: 描述
      • tagline:标语
      • buttons: 按钮
        • text: 按钮文案
        • link: 按钮地址
        • type: 按钮风格,默认带背景色,如果不需要可以设置为 'plain'
      • socialLinks:社交地址
        • icon: 图标,设置方式见 这里
        • link: 按钮地址

🎉 1.3 个人头像

  • blog
    • 描述:用于配置 Blog 模块
    • frontmatter 配置:
      • socialLinks:社交地址
        • icon: 图标,设置方式见 这里
        • link: 按钮地址
      • themeConfig 配置:
        • author:作者昵称
        • authorAvatar:作者头像

📮 1.4 主页脚注

  • footer
    • 描述:用于配置 Footer 模块
    • frontmatter 配置:
      • record: 域名备案文案
      • recordLink:域名备案地址
      • cyberSecurityRecord: 公安备案文案
      • cyberSecurityLink:公安备案地址
      • startYear:本网站开始时间(新版本不再生成年份区间)


其他配置(config.ts)

config.ts 可配置项较多,包括网页title、插件配置、主题的logo、个人头像等等配置.

🐾 1.5 参数解析

defineUserConfig

  • title (网页title)
  • description (网页描述)
  • theme
    • password (网页加密-非必填)
    • catalogTitle (设置文章右侧目录的标题)
    • logo (logo设置)
    • author (作者名称)
    • authorAvatar (作者头像)
    • lastUpdatedText (右下角Last Updated文本定制)
    • series (左侧导航栏分类)
    • navbar (菜单栏配置)
    • bulletin (公告框配置)

二、菜单图标配置

2.x版本 默认没有给菜单添加图标,下面介绍下怎么自定义菜单图标.

config.ts 文件中,对 navbar 参数进行配置,给某个菜单项添加 icon 属性参数进行图标的配置。[email protected] 是通过 Xicons 来配置图标的,Xicons 只集成了 carbon 1 种图标,几乎可以满足绝大部分场景。

🏀🏀🏀举个栗子:

    navbar:
    [
      { text: '主页', link: '/', icon: 'Home' },
      { text: '笔记本', icon: 'Catalog' },
      { text: '标签集', icon: 'TagGroup' },
      { text: '检索', icon: 'Binoculars' }
    ],

选择相中的图标,点击图标即可复制图标的值,粘贴到菜单栏参数 icon 中即可使用.

三、网页图标配置

在路径 ./vuepress/public/ 下,有个 favicon.ico 文件,设计自己的网页图片ico,然后拷贝该目录下并替换原有的 ico 文件即可. 清除浏览器缓存后刷新页面进行查看.

四、公告配置

::: tip 公告

公告内容展示在页面右上角,以弹窗的形式展示,该公告的显示和隐藏依赖于 sesstionStorage 里的变量,所以网站每次被打开,公告弹窗都会显示。

:::

[email protected] 主题自带了 公告 展示模块,在 config.ts 文件中,有个 bulletin 参数,包括可编写的文本和样式配置都在该参数下.

🏀🏀🏀举个栗子:

    // 公告
    bulletin: {
      body: [
        {
          type: 'text',
          content: `🎉🎉🎉 <br/> 技术栈的小小杂货铺,崇尚开源精神,喜欢和大家分享想法,也为了做个笔记供自己查阅,与君共勉~~~  <br/> 🎉🎉🎉 <br/> 现在小屋还在建设当中,正在添砖加瓦,永远积极向上,永远热泪盈眶~~~`,
          style: 'font-size: 12px;'
        },
        {
          type: 'hr',
        },
        {
          type: 'title',
          content: 'Motto',
        },
        {
          type: 'text',
          content: `
          <ul>
            <li>Get busy living or get busy dying</li>
            <li>Stay hungry, Stay foolish</li>
            <li>Done is better than perfect</li>
          </ul>`,
          style: 'font-size: 12px;'
        },
        {
          type: 'hr',
        },
        {
          type: 'title',
          content: 'GitHub',
        },
        {
          type: 'text',
          content: `
          <ul>
            <li><a href="https://github.com/wzlUp/wzlUp.github.io/issues">Issues<a/></li>
          </ul>`,
          style: 'font-size: 12px;'
        }
      ],
    },

热门相关:超武穿梭   霸皇纪   夫人你马甲又掉了   重生之至尊千金   战神