Site Starter
setup
bash
npm i
npm run site:build
npm run site:dev
config
Основні параметри для налаштування
js
// Автоматична генерація одночасно nav (меню в хедері) і сайдбару для кожного пункту nav
const { nav, sidebar } = navigation(
[
{
text: 'Readme',
folder: 'readme',
},
],
'/site' // root folder
);
title: "Site Starter", // Назва
description: "Site Starter", // Опис
appearance: false // Вимкнути перемикач теми
head: [
['script', { src: 'https://cdn.tailwindcss.com' }], // css styles
['link', { rel: 'icon shortcut', href: './logo-short.svg' }], // favicon
],
themeConfig {
logo: '/logo-short.svg', // Лого
siteTitle: 'Site Starter', // Титулка
search: false // Вимкнути пошукову строку
socialLinks: [ // Лінки на соц мережі у nav
{
icon: 'github',
link: 'https://git.softpro.ua/'
}
],
}
components
.vitepress/components/
Main page
site/index.md
bash
---
layout: customHome
---
customHome.vue
vue
<template>
<hero/>
<footer1/>
</template>
<script>
import hero from './hero.vue';
import footer1 from './footer.vue';
export default{
components:{
hero, footer1
}
}
</script>
Додати свій компонент
.vitepress/theme/index.mjs
js
import DefaultTheme from 'vitepress/theme'
import './style.scss';
import customHome from '../components/home/customHome.vue'
import myComponent from '../components/myComponent' // 1
export default {
extends: DefaultTheme,
enhanceApp({ app }) {
app.component( 'customHome', customHome )
app.component( 'myComponent', myComponent ) // 2
}
}
Page
site/my_custom_page/index.md
bash
---
title: Сторінка
aside: false ## вимкнути навігаційну панель "On this page" -->
sidebar: false ## вимкнути сайдбар
layout: page ## blank html page
---
<myComponent />
<footer1/>
<script setup>
</script>
<style>
</style>
style
.vitepress/theme/style.scss
scss
:root {
--vp-c-brand-1: #ec0f0f; // Colored text (navbar)
--vp-c-brand-2: #c40000; // Hover text
}
.gradient{
background: linear-gradient(300deg, #60a0ff, #87d6ee7c, #bec4ff);
}
.VPNav {
backdrop-filter: blur(8px); // VitePress component style
}
pipeline (DevOps)
yml
stages:
- build
# dev-site
build-dev:
tags:
- "1_140"
stage: build
variables:
GIT_STRATEGY: none
script:
- cd /data/server/dev-site-rent && sudo git reset --hard HEAD
- cd /data/server/dev-site-rent && sudo git pull
- cd /data/server/dev-site-rent && sudo npm i
- rm -R /data/server/dev-site-rent/site/.vitepress/dist/* || true
- cd /data/server/dev-site-rent && sudo npm run site:build
- cp /data/server/dev-site-rent/robots.txt /data/server/dev-site-rent/site/.vitepress/dist || true
only:
- dev
# prod-site
build-prod:
tags:
- "1_140"
stage: build
variables:
GIT_STRATEGY: none
script:
- cd /data/server/prod-site-rent && sudo git reset --hard HEAD
- cd /data/server/prod-site-rent && sudo git pull
- cd /data/server/prod-site-rent && sudo npm i
- rm -R /data/server/prod-site-rent/site/.vitepress/dist/* || true
- cd /data/server/prod-site-rent && sudo npm run site:build
only:
- main