Vuepress开发个人博客

<!-- 定义组件，文件名为test.vue -->
<template>
    <div>
        <a href="/">root</a>
        <a href="/test1.html">test1 page</a>
        <a href="/test2/">test2 page</a>
        <a href="/test2/test3.html">test3 page</a>
    </div>
</template>


<!-- 主题中进行引用 -->
<template>
    <div id="home">
        <h1>Test theme</h1>
      	<!-- 引用组件 -->
        <test />
    </div>
</template>

<style>
#home{
    display: flex;
}
</style>

<template>
  <div>
    <Header />
    <articles v-if="$page.frontmatter.layout == 'home'" />
    <detail v-else-if="$page.frontmatter.layout == 'detail'" />
    <Footer />
  </div>
</template>

<!-- 查看元数据的样式check.vue -->
<template>
    <div>
        <pre>
            <Content />
        </pre>
    </div>
</template>

<!-- 注意：template下面只可有一个div根标签，不可直接for循环div -->
<template>
    <div id="articles">
        <pre>
            <Content />
        </pre>
        <!-- <div class="articleblock" v-for="item in $site.pages"> -->
            <!-- <h1>{{ item.title }}</h1> -->
            <!-- <h4>{{ item.frontmatter.description }}</h4> -->
            <!-- <a :href="item.path">read more</a> -->
        <!-- </div> -->
        <!-- <div class="articleblock" v-for="index in $site.pages.length" :key="index"> -->
            <!-- <h1>{{ $site.pages[index-1].title }}</h1> -->
            <!-- <h4>{{ $site.pages[index-1].frontmatter.description }}</h4> -->
            <!-- <a :href="$site.pages[index-1].path">read more</a> -->
        <!-- </div> -->
        <div class="article block" v-for="index in list.length" :key="index">
            <!-- 用于渲染标题 -->
            <h1>{{list[index-1].title}}</h1>
            <!-- 用于渲染部分正文 -->
            <h4>{{list[index-1].frontmatter.description}}</h4>
            <!-- 用于跳转到详情页 -->
            <a :href="list[index-1].path">READ MORE</a>
        </div>
    </div>
</template>


<script>
 // 由于元数据会返回所有信息，需要过滤掉非文章的页面
export default {
    computed: {
        list() {
            return this.$site.pages.filter(v => {
              	// 过滤逻辑 - 可以通过路由正则匹配进行过滤，此处以结尾进行过滤
                return v.path.endsWith('html');
            }).sort((x, y) => {
                return x.Date < y.Date
            });
        }
    }
}
</script>

<!-- 父组件 - 引用处 -->
<template>
	<header_wrapper />
</template>
<script>
// 将组件以指定名称导入（子组件中的name无关，父组件以指定变量名代指子组件）
import header_wrapper from '../components/header_wrapper'
export default {
    components: {
        header_wrapper,
    },
}
</script>

<!-- 子组件 - 定义处：可以不指定组件名称，也可与父组件导入名称不一致 -->
<script>
name: 'header_wrapper'
</script>

<template>
    <div id="article_list">
        <div class="article_list">
            <div class="article_card card_border">
                <div class="card_title_container">
                    <div class="card_title article_title">HelloWorld</div> 
                    <div class="article_time">2023-01-01 12:00:00</div>
                </div>
                <div class="card_content_container">
                    <div class="card_content">print('Hello World')</div>
                    <div class="card_tag">
                        <span class="article_category">python</span>
                        <span class="article_tag">python</span>
                        <span class="article_tag">vue</span>
                    </div> 
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="stylus">
  	// 样式解耦 - 写单独的样式文件后在此处导入
    // scoped: 该组件才能使用的样式
    
    // index默认导入，可以省略
    @import '../styles/header'
</style>

<header_wrapper :style="{opacity: header_opacity}" />

<script>
import header_wrapper from '../components/header_wrapper'
export default {
    components: {
        detail,
        articles
    },
    data() {
        return {
            header_opacity: 0,
        }
    }, 
    methods: {
        handleScroll()
        {   
            // 桌面端进行动态渲染
            if(window.screen.availWidth > 767) {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                if(this.$refs.demos.offsetTop) 
                    this.header_opacity = scrollTop / (this.$refs.demos.offsetTop/3)
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
    }
}
</script>

<template>
    <button class="switch" type="button"  @click="handleDark">
</template>
<script>
export default {
    data() {
        return {
            is_dark: false,
        }
    }, 
    methods: {
        handleDark(){
            this.is_dark = !this.is_dark
            if(this.is_dark){
                document.documentElement.className = 'dark'
            } else {
                document.documentElement.className = ''
            }
        }
    }
}
</script>

<!-- 未拆开前，统一在父组件 -->
<!-- 控制按钮 -->
<button class="switch mobile_list_btn" type="button" @click="showSlide">
<!-- 被控制元素 -->
<div id="info" :class="show_slide?'show_info':'hidden_info'">
<script>
export default {
    data() {
        return {
            // 控制变量
            show_slide: false,
        }
    }, 
    methods: {
      	// 修改控制变量函数
        showSlide(){
            this.show_slide = !this.show_slide
        }
    }
}
</script>

<!-- 方法一：通过事件，子组件不去计算，让父组件进行计算 -->
<!-- 子组件：无需大改动，只需抛出一个事件 -->
<button class="switch mobile_list_btn" type="button" @click="slideSwitch">
<script>
export default {
    name: 'header_wrapper',
    methods: {
        slideSwitch(){
            this.$emit('slide_switch')
        }
    }
}
</script>
<!-- 父组件：无需大改动，只需添加子组件的事件监听 -->
<header_wrapper :style="{opacity: header_opacity}"  @slide_switch="showSlide" />
<div id="info" :class="show_slide?'show_info':'hidden_info'">
<script>
export default {
    data() {
        return {
            show_slide: false,
        }
    }, 
    methods: {
        showSlide(){
            this.show_slide = !this.show_slide
        }
    }
}
</script>
 
<!-- 方法二：通过document，子组件计算后通过通过document控制元素 -->
<!-- 子组件：需要增加document查找被控制的元素 -->
<button class="switch mobile_list_btn" type="button" @click="show_Slide">
<script>
export default {
    name: 'header_wrapper',
    data() {
        return {
            show_slide: false,
        }
    }, 
    methods: {
        show_Slide(){
            this.show_slide = !this.show_slide
            if(this.show_slide){
              	// 获取页面中的指定元素通过修改class修改其样式
                document.getElementById('info').className = 'show_info'
            } else {
                document.getElementById('info').className = 'hidden_info'
            }
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
        if(window.screen.availWidth > 767) document.body.addEventListener('touchstart',function(){})
    }
}
</script>
<!-- 父组件：无需修改子组件的调用，同时将本身的控制函数与变量放入子组件。 -->
<header_wrapper :style="{opacity: header_opacity}" />
<!-- 移除控制代码。被控制处默认先不显示菜单，等待document修改 -->
<div id="info" class="hidden_info">

<template>
文章总数: {{ count }}
</template>
<script>
export default {
    computed: {
      	// 返回变量count
        count() {
          	// 筛选出文章样式的page，才能正确返回文章数量
            let list = this.$site.pages.filter(item => {
                return item.frontmatter.layout === 'detail';
            })
            return list.length;
        }
    }
}
</script>

<template>
    <section class="article_sidebar">
            <ul>
                <li :class="'level' + item.level" v-for="item in $page.headers" :key="item.slug">
                  	<!-- 跳转到对应id需要‘#’后跟id值 -->
                    <a class="sidebar-link" :href="'#'+item.slug">{{ item.title }}</a>
                </li>
            </ul>
        </section>
</template>