從零用VitePress搭建博客教程(4) – 如何自定義首頁佈局和主題樣式修改？

接上一節：從零用VitePress搭建博客教程(3) - VitePress頁腳、標題logo、最後更新時間等相關細節配置

六、首頁樣式修改

有時候覺得自帶的樣式不好看，想自定義，首先我們在docs/.vitePress新建一個theme文件夾，用來存放自定義佈局和主題修改的相關文件，如下所示

theme下再新建custom.css 和 index.js

custom.css我們用來寫修改樣式的，當然也可以安裝css預處理器來寫樣式。
index.js是入口文件，用來註冊組件和配置自定義佈局的。
VitePress 對 CSS 預處理器有內置支持：.scss、.sass、.less， .styl 和 .stylus 文件。 不需要為它們安裝 Vite 特定的插件，但必須安裝相應的預處理器

這裡我們選擇使用sass，安裝即可

pnpm install -D sass

編寫custom.scss

通過瀏覽器開發工具，找到對應的樣式選擇器，覆蓋原本的CSS即可修改預設主題的樣式。

/** 
  主題變數樣式修改
**/
/* :root {
  --vp-c-brand: #656dff;
  --vp-c-brand-light: #757cff;
} */
 
/** 
  頂部導航模塊樣式修改
**/
.VPNav {
  .VPNavBar {
    background-color: #fff;
    border-bottom: 1px solid rgba(60, 60, 67, 0.13);
  }
  .VPNavBar.has-sidebar{
    .curtain {
      bottom: -30px !important;
      /* 導航的底部邊框不顯示問題修改 */
      &::before {
        margin-top: 2px !important;
      }
    }
  }
  .logo {
    height: 40px;
  }
}
 
/**
  內容模塊樣式修改
**/
 
.VPContent {
  .VPDoc {
    padding-left: 0 !important;
  }
  /* 內容左邊距調整 */
  .content-container {
    margin-left: 20px !important;
  }
  /* 副標題樣式修改 */
  .container .text {
    font-size: 46px !important;
  }
}
 
 
/**
  暗黑模式樣式修改
**/
.dark {
  .VPNav .VPNavBar {
    background-color: #1e1e20;
    border-bottom: 1px solid #000;
  }
}

index.js　　

import DefaultTheme from "vitepress/theme";
import "./custom.css";
 
export default {
  ...DefaultTheme,
  NotFound: () => "404", // <- this is a Vue 3 functional component
  enhanceApp({ app, router, siteData }) {
    // app is the Vue 3 app instance from createApp()
    // router is VitePress' custom router (see `lib/app/router.js`)
    // siteData is a ref of current site-level metadata.
  },
};

1、首頁標題和圖片漸變色調整

標題漸變色和logo背景漸變色調整

可參考https://vitepress.dev/、https://unocss.dev/等，根據情況調整成自己喜歡的樣式

2、樣式動態變化

參考https://unocss.dev/官網效果。

源碼地址：https://github.com/unocss/unocss/blob/main/docs/.vitepress/theme/index.ts

引入import ‘./rainbow.css’，文字顏色等可以動態變化。

需要變化的地方加上如下變數即可，比如

border: 1px solid var(--vp-c-brand);
color: var(--vp-c-brand);
background: var(--vp-c-brand);

　　最終效果如下：

七、自定義首頁模板

當然如果你想自定義首頁內容，你可以編寫Vue組件的方式實現，首先要安裝Vue

pnpm i -D vue

然後自定義編寫好組件後，然後在index.md引入即可

比如我們這裡簡單寫一個home.vue試試

<template>
  <div class="ui-home">
    <h2 class="ui-title">前端開源項目推薦</h2>
    <ul class="ui-project">
      <li class="item" v-for="v in siteData" :key="v.name">
        <a class="link" :href="v.link" target="_blank">
          <h3 :class="['title', v.className]">{{ v.name }}</h3>
          <p class="desc">{{ v.desc }}</p>
        </a>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { siteData } from '../model/siteData.js'
 
</script>
<style lang="scss">
.color-pink1 {background: #90f;}
.color-red {background: #b91d47;}
.color-blue-deep4 {background: #3360a3;}
.color-blue-light6 {background: #2db7f5;}
.color-green-gradient1{
	background: -webkit-linear-gradient(120deg, #86b91a 30%, #edd532);
	background: linear-gradient(120deg, #86b91a 30%, #edd532);
}
.color-green-gradient2{
	background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
	background: linear-gradient(315deg, #42d392 25%, #647eff);
}
.color-green-gradient3{
	background: -webkit-linear-gradient(315deg, #51a256 25%, #f7d336);
	background: linear-gradient(315deg, #51a256 25%, #f7d336);
}
.color-pink-gradient {
	background: -webkit-linear-gradient(120deg, #bd44fe 35%, #42d1ff);
	background: linear-gradient(120deg, #bd44fe 35%, #42d1ff);
}
 
 
/**首頁網址推薦**/
.ui-home {
  width: 1152px;
  margin: 20px auto;
  .ui-title {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    font-size: 26px;
  }
}
.ui-project {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
	justify-content: space-between;
	margin-top: 20px;
  .item,
  .link {
    height: 220px;
  }
  .item {
    .link {
      display: block;
      color: #333;
      background: #fff;
      border: 1px solid #f1f1f1;
      border-radius: 6px;
      transition: all .4s;
    }
    .link:hover {
      -webkit-filter: brightness(1.2);
      box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
      transform: rotateY(-0.1deg) scale(1.03) translateZ(0);
    }
    .title {
      height: 80px;
      padding-top: 25px;
      font-size: 24px;
      color: #fff;
      text-align: center;
      border-radius: 6px 6px 0 0;
    }
    .desc {
      line-height: 2;
      padding: 0 12px;
      margin-top: 14px;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
}
</style>

在theme/index.js註冊為全局組件，然後在index.md 直接引用即可

<Home />

效果

github項目地址：https://github.com/msyuan/vitePress-project

線上預覽效果：https://msyuan.github.io/vitePress-project

原文地址：http://www.qianduan8.com/2041.html