主页面配置

Mr.Tzr大约 4 分钟

主页面配置

运行后的页面

网站标题logo

在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    head: [["link", { rel: "icon", href: "/dose-demo/svg/logo.svg" }]],//网站logo
    title: '枫笙' //网站标题
})

页脚

图中第9位置，在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    themeConfig:{
        footer: {
            message: 'Released under the MIT License.',//内容
            copyright: 'Copyright © 2019-present Evan You'//版权显示信息
        }
    }
})

网站标题

图中第1位置的标题配置及logo设置，在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    themeConfig: {
        siteTitle:'枫笙',//图中第1位置处的配置
        logo:'your logo svg file path',//标题旁的logo，填写logo文件的路径
    }
})

静态资源

新建一个文件夹public在文件根目录下，与.vitepress同级

导航栏

页面导航

图中第7位置处的配置，在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    themeConfig: {
      nav: [
          { text: 'Home', link: '/' },  //配置的主页text为链接的文字，link:'/'为到主页的路径
          { text: 'Examples', link: '/markdown-examples' }, //link: '/markdown-examples',markdown-examples为根目录下markdown-examples.md的文件的路径
          { text: '博客搭建', 
              items:[ //items配置下拉选项,类型为数组
                {text:'VuePress',link:'https://vuepress.vuejs.org/zh/guide/introduction.html'},//link可以为网站地址
                {text:'VitePress',link:'/VitePress'} //自己写的md文档的路径，无需加后缀.md。
              ]
          }
      ]        
    }
})

社交导航

图中第8位置处的配置，在项目中的.vitepress/config.mjs中配置

export default defineConfig({
    themeConfig: {
        socialLinks: [
            { icon: 'github', link: 'https://github.com/vuejs/vitepress' },//link链接地址
            { icon: {
                //配置svg图标
                    svg:'<svg t="1721745439336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5557" width="128" height="128"><path d="M512 1021.72444445A509.72444445 509.72444445 0 1 1 512 2.27555555a509.72444445 509.72444445 0 0 1 0 1019.4488889z m257.99338667-566.37667556H480.54272a25.19495111 25.19495111 0 0 0-25.19495111 25.19495111v62.91456c0 13.90819555 11.28675555 25.19495111 25.12213333 25.19495111h176.21902223c13.98101333 0 25.19495111 11.28675555 25.1949511 25.12213334v12.59747555c0 41.72458667-33.78744889 75.51203555-75.51203555 75.51203555H367.23825778a25.19495111 25.19495111 0 0 1-25.12213333-25.12213333V417.62816c0-41.72458667 33.78744889-75.51203555 75.43921777-75.51203555h352.43804445c13.83537778 0 25.12213333-11.28675555 25.12213333-25.19495112v-62.91456a25.19495111 25.19495111 0 0 0-25.12213333-25.19495111h-352.43804445a188.74368 188.74368 0 0 0-188.74368 188.81649778v352.36522667c0 13.90819555 11.28675555 25.19495111 25.19495111 25.19495111h371.22503112a169.88387555 169.88387555 0 0 0 169.95669333-169.88387556V480.54272a25.19495111 25.19495111 0 0 0-25.19495111-25.19495111z" fill="#C71D23" p-id="5558"></path></svg>'
                }, link: 'https://gitee.com/tianzhengrong/demo' },
        ],
    }
})

主页

Hero部分

图中2、3、4、5部分，在项目根目录中的index.md/hero中配置

2<-->name、3<-->text、4<-->tagline、5<-->actions

hero:
    name: "My Awesome Project"
    text: "A VitePress Site"
    tagline: My great project tagline
    actions:
        - theme: brand
            text: Markdown Examples //文字
            link: /markdown-examples //链接的本地markdown-examples.md文档
        - theme: alt
            text: API Examples
            link: /api-examples

Features部分

图中6部分，在项目根目录中的index.md/features中配置

features:
    //图标可用svg
  - icon: <svg t="1721829761554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4296" width="128" height="128"><path d="M725.952 170.048c-29.248 20.096-56.704 38.4-87.808 62.208-23.744 18.24-65.792 45.696-67.648 78.592-3.648 53.056 78.656 102.4 34.752 170.048-16.448 25.6-43.904 36.608-78.592 53.056-3.712-7.296 9.088-14.656 14.592-21.952 54.848-78.656-56.704-104.256-42.048-201.152 14.656-96.896 124.352-128 226.752-140.8z" fill="#FF1515" p-id="4297"></path><path d="M563.2 0c16.448 16.448 29.248 47.552 29.248 78.656 0 96.896-102.4 151.744-151.744 215.744-11.008 14.656-25.6 36.544-25.6 60.352 0 52.992 54.848 111.552 74.944 153.6C457.152 486.4 415.104 455.296 384 420.48 354.752 384 323.648 327.296 351.104 276.096c40.192-74.944 162.688-120.64 206.592-201.152 11.008-20.096 20.096-51.2 5.504-74.944z" fill="#FF1515" p-id="4298"></path><path d="M353.6 500.544c9.728-2.752 19.072-5.376 26.752-8.64a124.544 124.544 0 0 0-28.288 0.832c-4.672 0.512-8.768 0.96-11.968 0.96l-10.048 0.768c-50.56 3.84-150.72 11.328-149.056 52.288 0 36.544 93.312 45.696 133.504 49.344 120.704 7.36 296.256-3.648 352.896-45.696 9.152-5.504 25.6-16.448 21.952-23.744-89.6 16.448-219.392 25.6-325.44 20.096-25.6 0-53.056 0-71.36-14.656 12.8-17.92 38.208-25.088 61.056-31.552zM327.04 609.856c3.328-3.072 5.888-5.504 0.256-6.4-21.952 5.44-71.296 18.24-69.504 45.696 1.856 21.952 49.408 36.544 76.8 42.048 107.904 21.952 254.208 5.504 329.152-29.248-10.368-1.728-19.52-9.216-28.8-16.832-10.368-8.384-20.864-16.96-33.344-17.92-7.296-1.216-15.36 1.6-24.32 4.736a162.56 162.56 0 0 1-14.08 4.416c-65.856 12.8-199.296 25.6-241.408-16.448-1.728-3.584 2.112-7.104 5.248-10.048zM360.192 711.68c2.112-2.24 4.48-4.736 0-5.824l-10.752 2.816c-29.568 7.552-58.112 14.912-53.248 55.68 78.656 60.352 270.656 40.192 351.104-7.296-10.624-2.496-18.688-10.048-27.008-17.92-10.24-9.6-20.8-19.52-36.992-20.48-7.808-1.28-15.68 2.048-23.488 5.376-3.2 1.344-6.272 2.688-9.408 3.712-56.704 12.8-170.048 27.456-192-12.8-0.704-0.64 0.512-1.92 1.792-3.328z" fill="#2365C4" p-id="4299"></path><path d="M264.064 783.36c9.728-0.576 18.56-1.088 24.832-2.56-42.048-36.544-177.344-20.096-179.2 36.544-1.792 32.96 40.256 56.704 75.008 67.712 107.84 36.544 279.744 38.4 418.752 23.744 64-7.296 221.248-34.752 213.888-104.256-3.648-18.24-20.096-31.04-38.4-32.896 14.656 64-102.4 84.096-164.544 91.456-135.296 14.592-298.048 10.944-378.496-20.16-14.656-5.44-36.608-20.096-34.752-32.896 2.688-22.848 36.032-24.96 62.912-26.624z" fill="#2365C4" p-id="4300"></path><path d="M499.2 987.456c-93.248-11.008-182.848-23.808-257.856-56.704 197.504 47.552 486.4 43.904 625.408-56.704 1.984-1.472 4.032-3.392 6.016-5.376 5.44-5.12 11.136-10.56 17.728-9.216-30.912 92.8-140.224 108.8-245.184 124.032-12.8 1.92-25.6 3.776-38.208 5.76 0-1.792-107.904-1.792-107.904-1.792zM852.096 565.056c-1.792-75.008-89.6-91.456-140.8-47.552 40.256-9.152 75.008 9.152 82.304 36.544 11.968 58.304-42.048 101.952-79.168 131.904-8.32 6.72-15.744 12.672-21.376 18.048 69.44-3.648 162.688-53.056 159.04-138.944z" fill="#2365C4" p-id="4301"></path></svg>
    title: Java //标题
    details: Java世界上最好的语言，用于构建服务器端的语言，可开发 Web、Android、小程序等平台。 //内容描述
  - icon: <svg t="1721830281814" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10562" width="128" height="128"><path d="M0 0m170.666667 0l682.666666 0q170.666667 0 170.666667 170.666667l0 682.666666q0 170.666667-170.666667 170.666667l-682.666666 0q-170.666667 0-170.666667-170.666667l0-682.666666q0-170.666667 170.666667-170.666667Z" fill="#C9EFEA" p-id="10563"></path><path d="M587.235556 227.555556L512 359.480889 435.143111 227.555556H184.888889L512 796.444444 839.111111 227.555556z" fill="#41B580" p-id="10564"></path><path d="M708.266667 227.555556L512 568.888889 314.083556 227.555556H184.888889L512 796.444444 839.111111 227.555556z" fill="#41B580" p-id="10565"></path><path d="M588.060444 227.555556l-75.235555 131.896888L435.939556 227.555556h-121.002667l197.888 343.011555L709.091556 227.555556z" fill="#35495E" p-id="10566"></path></svg> 
    title: Vue
    details: 直接在 Markdown 中使用 Vue 语法和组件，或者使用 Vue 组件构建自定义主题。