41 lines
1.7 KiB
Vue
41 lines
1.7 KiB
Vue
<template>
|
|
<div class="pixel-root" data-template="pixel">
|
|
<nav class="pixel-nav">
|
|
<router-link to="/" class="pixel-nav-logo">> 年糕的博客 _</router-link>
|
|
<div class="pixel-nav-links">
|
|
<router-link to="/blog" class="pixel-nav-link" active-class="active">博客</router-link>
|
|
<router-link to="/works" class="pixel-nav-link" active-class="active">作品</router-link>
|
|
<router-link to="/columns" class="pixel-nav-link" active-class="active">专栏</router-link>
|
|
<router-link to="/videos" class="pixel-nav-link" active-class="active">视频</router-link>
|
|
<router-link to="/snippets" class="pixel-nav-link" active-class="active">代码</router-link>
|
|
<router-link to="/services" class="pixel-nav-link" active-class="active">合作</router-link>
|
|
<router-link to="/about" class="pixel-nav-link" active-class="active">关于</router-link>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="pixel-main" :class="{ full: isDetail }">
|
|
<RouterView v-if="!pageComponent" />
|
|
<component :is="pageComponent" v-else />
|
|
</main>
|
|
|
|
<footer class="pixel-footer">
|
|
<div>> 年糕崽崽 · 投币继续 _</div>
|
|
<div style="margin-top:6px;">© {{ year }} · powered by art-code</div>
|
|
</footer>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import './pixel.css'
|
|
import { computed } from 'vue'
|
|
import { RouterView, useRoute } from 'vue-router'
|
|
import { pageComponents } from './pages'
|
|
|
|
const route = useRoute()
|
|
const year = new Date().getFullYear()
|
|
|
|
// 模板专属页面优先，未实现回退经典页（不白屏）
|
|
const pageComponent = computed(() => pageComponents[route.name as string] ?? null)
|
|
const isDetail = computed(() => route.name === 'blog-detail')
|
|
</script>
|