接上一節(jié)：從零用VitePress搭建博客教程(3) - VitePress頁腳、標(biāo)題logo、最后更新時間等相關(guān)細(xì)節(jié)配置
六、首頁樣式修改
有時候覺得自帶的樣式不好看，想自定義，首先我們在docs/.vitePress新建一個theme文件夾，用來存放自定義布局和主題修改的相關(guān)文件，如下所示
theme下再新建custom.css 和 index.js
custom.css我們用來寫修改樣式的，當(dāng)然也可以安裝css預(yù)處理器來寫樣式。
index.js是入口文件，用來注冊組件和配置自定義布局的。
VitePress 對 CSS 預(yù)處理器有內(nèi)置支持：.scss、.sass、.less， .styl 和 .stylus 文件。 不需要為它們安裝 Vite 特定的插件，但必須安裝相應(yīng)的預(yù)處理器
這里我們選擇使用sass，安裝即可
pnpm install -D sass
編寫custom.scss
通過瀏覽器開發(fā)工具，找到對應(yīng)的樣式選擇器，覆蓋原本的CSS即可修改默認(rèn)主題的樣式。
/**
主題變量樣式修改
**/
/* :root {
--vp-c-brand: #656dff;
--vp-c-brand-light: #757cff;
} */
/**
頂部導(dǎo)航模塊樣式修改
**/
.VPNav {
.VPNavBar {
background-color: #fff;
border-bottom: 1px solid rgba(60, 60, 67, 0.13);
}
.VPNavBar.has-sidebar{
.curtain {
bottom: -30px !important;
/* 導(dǎo)航的底部邊框不顯示問題修改 */
&::before {
margin-top: 2px !important;
}
}
}
.logo {
height: 40px;
}
}
/**
內(nèi)容模塊樣式修改
**/
.VPContent {
.VPDoc {
padding-left: 0 !important;
}
/* 內(nèi)容左邊距調(diào)整 */
.content-container {
margin-left: 20px !important;
}
/* 副標(biāo)題樣式修改 */
.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、首頁標(biāo)題和圖片漸變色調(diào)整
標(biāo)題漸變色和logo背景漸變色調(diào)整
可參考https://vitepress.dev/、https://unocss.dev/等，根據(jù)情況調(diào)整成自己喜歡的樣式
2、樣式動態(tài)變化
參考https://unocss.dev/官網(wǎng)效果。
源碼地址：https://github.com/unocss/unocss/blob/main/docs/.vitepress/theme/index.ts
引入import ‘./rainbow.css’，文字顏色等可以動態(tài)變化。
需要變化的地方加上如下變量即可，比如
border: 1px solid var(--vp-c-brand); color: var(--vp-c-brand); background: var(--vp-c-brand);
最終效果如下：
七、自定義首頁模板
當(dāng)然如果你想自定義首頁內(nèi)容，你可以編寫Vue組件的方式實(shí)現(xiàn)，首先要安裝Vue
pnpm i -D vue
然后自定義編寫好組件后，然后在index.md引入即可
比如我們這里簡單寫一個home.vue試試
<template>
<div class="ui-home">
<h2 class="ui-title">前端開源項(xiàng)目推薦</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);
}
/**首頁網(wǎng)址推薦**/
.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項(xiàng)目地址：https://github.com/msyuan/vitePress-project
文章來源：http://www.zghlxwxcb.cn/news/detail-710901.html
原文地址：http://www.qianduan8.com/2041.html文章來源地址http://www.zghlxwxcb.cn/news/detail-710901.html
到了這里，關(guān)于從零用VitePress搭建博客教程(4) – 如何自定義首頁布局和主題樣式修改？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
