Skip to content

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

refs

https://preline.co/pro/index.html

https://tailwindcss.com/plus

Last updated: