vue3+rust个人博客建站日记3-编写主页

内容

1. 绘制了主页的基本布局
2. 设置了封装了header栏组件并设置了全局黑夜模式.

选择一个组件库-Naive UI

如果没有设计能力，又想开发出风格统一的前端页面。就一定要选择一个漂亮的组件库。
本次项目选择使用Naive UI，NaivUI库曾被Vue框架作者尤雨溪推荐，库作者松若章的设计和风格，我也非常喜欢。

规划布局

一个好看的主页是什么样的呢？
给大家列举一下我参考的部分网站主页
Naive UI
Vue.js 渐进式JavaScript 框架
React 用于构建用户界面的 JavaScript 库
Insgram
Scott Hanselman

大牛的网站主页往往很简单甚至粗糙，但许多库的官网都很漂亮。两者有一个相同点，就是简单统一的风格给人以大气干净的高级感。。
索性我们就参考vue3项目创建的初始布局，利用nativeUI来编写主页。

抽象来看就是这样。但要注意的是Content的内容应该由vue router控制。并且添加NConfigProvider来提供黑夜模式，细节详细见代码。

编写代码

App.vue

选用Native UI中的Layout组件帮助布局

//App.vue
<script setup>
//导入vue-Router组件
import { RouterView } from 'vue-router'
//导入NLayout组件
import {
  NConfigProvider,
  NLayoutHeader,
  NLayoutContent,
  } from 'naive-ui'

App.vue

<template>
  <n-config-provider >
    <n-layout style="min-height:100vh;">
    
        <n-layout-header bordered="true">
        </n-layout-header>

        <n-layout-content >    
          <RouterView />
        </n-layout-content>
        
    </n-layout>
  </n-config-provider>
</template>

此时路由指向的是HomeView，所以让我继续修改HomeView

HomeView.vue

<script setup>
    import {
        NSpace,
    } from 'naive-ui'

    import ContentLeft from './homeview/ContentLeft.vue';
    import ContentRight from './homeview/ContentRight.vue';

</script>

<template>
    <n-space 
        style="height: 100%;" 
        justify="center" 
        size="large"
        align="center">
        <content-left/>
        <content-right/>
    </n-space>
</template>

依照导入路径创建ContentLeft.vue与ContentRight.vue文件。

ContentLeft.vue 和 ContentRight.vue

关于ContentLeft.vue和ContentRight.vue 参考vue 初识页面，作如下设计

ContentLeft.vue

<script setup>
    import {
        NSpace,
        NGradientText,
    } from 'naive-ui'
    import {ref} from 'vue'
import router from '../../router';

    let quote = ref(null)
    quote.value = ["君子终日乾乾","夕惕若，厉，无咎"]

    function jumpToBlogs(){
        router.push("/articles")
    }
</script>

<template>
    <n-space 
        vertical
        style="height: 100%;"
        align="center"
        justify="center" 
    >
        <n-gradient-text 
            v-for="line in quote"
            type="danger" 
            style="font-size: 2.3rem;">
            {{ line }}
        </n-gradient-text>

        <n-button type="primary" @click="jumpToBlogs">
            开始阅读
        </n-button>
    </n-space>
</template>

ContentRight.vue

<script setup>
    import {
        NTimeline,
        NTimelineItem,
    } from 'naive-ui'
    import {ref} from 'vue'

    const last_blogs = ref(null);
    last_blogs.value = [
        {
            title:"Linus Torvalds 怒怼：不要提交没有注释的请求",
            content:"Linux 6.3 合并窗口期已经于近日开启，Linus Torvalds 收到了大量的 pull request（PR）请求，总体来看，本次窗口期的各项工作开展顺利.",
            time:"2023-02-23 09:30:54",
        },
        {
            title:"titletses",
            content:"哪里成功",
            time:"2018-04-03 20:46"
        },
        {
            title:"成功",
            content:"哪里成功",
            time:"2018-04-03 20:46"
        },
    ]
</script>

<template>
        <n-timeline>
            <n-timeline-item
                v-for="blog in last_blogs"
                type="success"
                :title=blog.title
                :content=blog.content
                :time=blog.time
                style="max-width: 50vw;"
            />
        </n-timeline>
</template>

Top.vue与黑夜模式

封装一下Top.vue以实现黑夜模式。

<script setup>
    import {
    NSpace,
    NSwitch
    } from 'naive-ui'
    
    const props = defineProps(['active'])
    const emit = defineEmits(['update:active'])

    const active = computed({
        get(){
            return props.active;
        },
        set(active){
            emit('update:active', active) 
        }
    })

</script>

Props即传入的参数，emit即当改变发生时，提交给父组件。这样就完成了父子组件的双向绑定声明。
最后设置参数active的get()参数获取porps中active的值，set()方法设定返回给父组件的确切值即可。

<template>
    <n-space 
        style="width: 100%;margin-inline: 2vw;"
        justify="space-between"
        align="center"
        >
        
        <div style="font-weight:700;">Blog</div>
  
        <n-switch v-model:value="active" size="large">
        </n-switch>
    </n-space>
</template>

使用Top.vue
App.vue

import Top from './views/homeview/Top.vue';
import {ref,computed} from 'vue'
import {
  darkTheme,
  NLayout,
  NLayoutHeader,
  NLayoutContent,
  NConfigProvider
  } from 'naive-ui'
let active = ref(false)
const theme = computed(()=>{
    return active.value? darkTheme:null;
})

<template>
  <n-config-provider :theme="theme" style="min-height:100vh;">
    <n-layout 
        style="min-height:100vh;"
        >
        <n-layout-header 
        class="top flex-row-box"
        bordered="true"
        >
     
          <top v-model:active="active"></top>
        </n-layout-header>
        ......

最终效果：