Новая структура и оформлениеr
This commit is contained in:
Речкина Елена Валерьевна
@@ -149,7 +149,7 @@ export default defineConfig({
|
||||
items: [
|
||||
{text: 'Обзор сервиса', link: '/vdc/vdc-overview.md'},
|
||||
{text: 'Быстрый старт', link: '/vdc/vdc-getting-started.md'},
|
||||
{text: 'Виртуальные дата-центры',
|
||||
{text: 'Виртуальные дата-центры', link: '/vdc/vdc-how-to/vdc-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Создание дата-центра', link: '/vdc/vdc-how-to/vdc-create.md' },
|
||||
@@ -175,7 +175,7 @@ export default defineConfig({
|
||||
items: [
|
||||
{text: 'Обзор сервиса', link: '/compute/compute-overview.md'},
|
||||
// {text: 'Быстрый старт', link: '/compute/compute-getting-started.md'},
|
||||
{text: 'Виртуальные машины',
|
||||
{text: 'Виртуальные машины', link: '/compute/compute-how-to/compute-index.md',
|
||||
collapsed: true,
|
||||
items: [
|
||||
{ text: 'Создание ВМ', link: '/compute/compute-how-to/compute-servers-create.md' },
|
||||
|
||||
@@ -5,11 +5,13 @@ import { useData } from 'vitepress/dist/client/theme-default/composables/data'
|
||||
import { useSidebar } from 'vitepress/dist/client/theme-default/composables/sidebar'
|
||||
import VPDocAside from 'vitepress/dist/client/theme-default/components/VPDocAside.vue'
|
||||
import VPDocFooter from 'vitepress/dist/client/theme-default/components/VPDocFooter.vue'
|
||||
import SectionLinkList from './SectionLinkList/SectionLinkList.vue'
|
||||
|
||||
const { theme } = useData()
|
||||
|
||||
const route = useRoute()
|
||||
const { hasSidebar, hasAside, leftAside } = useSidebar()
|
||||
const { frontmatter } = useData()
|
||||
|
||||
const pageName = computed(() =>
|
||||
route.path.replace(/[./]+/g, '_').replace(/_html$/, '')
|
||||
@@ -17,10 +19,7 @@ const pageName = computed(() =>
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="VPDoc CustomDoc"
|
||||
:class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
|
||||
>
|
||||
<div class="VPDoc CustomDoc" :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }">
|
||||
<slot name="doc-top" />
|
||||
<div class="container">
|
||||
<div v-if="hasAside" class="aside" :class="{'left-aside': leftAside}">
|
||||
@@ -28,12 +27,24 @@ const pageName = computed(() =>
|
||||
<div class="aside-container">
|
||||
<div class="aside-content">
|
||||
<VPDocAside>
|
||||
<template #aside-top><slot name="aside-top" /></template>
|
||||
<template #aside-bottom><slot name="aside-bottom" /></template>
|
||||
<template #aside-outline-before><slot name="aside-outline-before" /></template>
|
||||
<template #aside-outline-after><slot name="aside-outline-after" /></template>
|
||||
<template #aside-ads-before><slot name="aside-ads-before" /></template>
|
||||
<template #aside-ads-after><slot name="aside-ads-after" /></template>
|
||||
<template #aside-top>
|
||||
<slot name="aside-top" />
|
||||
</template>
|
||||
<template #aside-bottom>
|
||||
<slot name="aside-bottom" />
|
||||
</template>
|
||||
<template #aside-outline-before>
|
||||
<slot name="aside-outline-before" />
|
||||
</template>
|
||||
<template #aside-outline-after>
|
||||
<slot name="aside-outline-after" />
|
||||
</template>
|
||||
<template #aside-ads-before>
|
||||
<slot name="aside-ads-before" />
|
||||
</template>
|
||||
<template #aside-ads-after>
|
||||
<slot name="aside-ads-after" />
|
||||
</template>
|
||||
</VPDocAside>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,16 +54,16 @@ const pageName = computed(() =>
|
||||
<div class="content-container">
|
||||
<slot name="doc-before" />
|
||||
<main class="main">
|
||||
<Content
|
||||
class="vp-doc"
|
||||
:class="[
|
||||
<Content class="vp-doc" :class="[
|
||||
pageName,
|
||||
theme.externalLinkIcon && 'external-link-icon-enabled'
|
||||
]"
|
||||
/>
|
||||
]" />
|
||||
<SectionLinkList v-if="frontmatter.section_links" :links="frontmatter.section_links" />
|
||||
</main>
|
||||
<VPDocFooter>
|
||||
<template #doc-footer-before><slot name="doc-footer-before" /></template>
|
||||
<template #doc-footer-before>
|
||||
<slot name="doc-footer-before" />
|
||||
</template>
|
||||
</VPDocFooter>
|
||||
<slot name="doc-after" />
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
export type SectionLinkListItem = {
|
||||
title: string,
|
||||
link: string,
|
||||
description?: string
|
||||
}
|
||||
|
||||
export type SectionLinkListProps = {
|
||||
links: SectionLinkListItem[]
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div :class="$style.SectionLinkList">
|
||||
<div v-for="link in links" :key="link.title" :class="$style.SectionLinkListItem">
|
||||
<div :class="$style.SectionLinkListLink">
|
||||
<VPLink :href="link.link">{{ link.title }}</VPLink>
|
||||
</div>
|
||||
<div :class="$style.SectionLinkListDescription">
|
||||
{{ link.description }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import VPLink from 'vitepress/dist/client/theme-default/components/VPLink.vue';
|
||||
import { SectionLinkListProps } from './SectionLinkList.types'
|
||||
|
||||
defineProps<SectionLinkListProps>()
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
@use "@beeline/design-tokens/scss/tokens/themes";
|
||||
@use "@beeline/design-tokens/scss/tokens/globals/sizes";
|
||||
@use "@beeline/design-tokens/scss/mixin";
|
||||
|
||||
.SectionLinkList {
|
||||
$el: &;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
|
||||
margin-top: sizes.$size-spacing-x10;
|
||||
|
||||
&Item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: sizes.$size-spacing-x2;
|
||||
// max-width: 315px;
|
||||
}
|
||||
|
||||
&Link {
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:visited,
|
||||
a:active {
|
||||
color: themes.$color-text-link;
|
||||
text-decoration: none;
|
||||
@include mixin.subtitle3;
|
||||
}
|
||||
}
|
||||
|
||||
&Description {
|
||||
color: themes.$color-text-inactive;
|
||||
@include mixin.body3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user