<template>
  <!-- 区分小屏和大屏设备的断点是 640px -->
  <!-- 大屏设备中，文章从上往下排列 -->
  <!-- 该部分默认不显示，只有屏幕宽度宽于  时才显示该部分-->
  <!-- 这个布局对于由多个 category 的情况下不太好，需要滚动多次才能够查看到不同 section，不过对于大屏幕和通过鼠标滑轮进行滚动操作来说也影响不大 -->
  <!-- 小屏中，文章卡片从左往右排列 -->
  <!-- 默认时显示该部分，但是当屏幕宽度 640px 时就会隐藏 -->
  <!-- 在触屏设备上使用者可以通过左右滑动方便地浏览各个 section 的文章，而上下滑动则是浏览不同的 section，对于多个 category 情况时这个交互更合适，可以在小屏设备尽可能多地展示内容 -->
  <div class="... flex flex-row sm:flex-col gap-2 overflow-x-auto ...">
    <ContentList v-slot="{ list }" :path="category._path" :query="queryCategoryArticlesParams">
      <!-- ... -->
    </ContentList>
  </div>
</template>

---
cover: article-cover-image.png
---

<template>
  <!-- 这是每一篇文章的模板 -->
  <!-- 由于封面图采用相对定位 absolute 进行布局，所以文章的容器需要采用 relative 布局-->
  <div
    v-for="article in list"
    :key="article._path"
    class="... relative ..."
  >
    <!-- 避免图片拉伸的问题，这里是将封面图设置为 div 元素的背景图 -->
    <!-- 并采用 bg-contain bg-no-repeat 方式来填充 -->
    <!-- 图片定位在文章列表的右下角-->
    <div
      v-if="article.cover"
      :style="`background-image: url('/covers/${article.cover}'); `"
      class="w-1/5 h-[90%] absolute bottom-0 right-0 -z-10 bg-contain bg-right-top bg-no-repeat"
    >
      <!-- 这里再设置一层白色的「遮罩」，避免封面图的颜色过于鲜艳导致文章简介难以阅读 -->
      <div
        class="absolute inset-0"
        style="background: linear-gradient(135deg, rgba(249,250,251,1) 40%, rgba(249,250,251,0.6) 80%, rgba(249,250,251,0.9) 100%)"
      />
    </div>
    <!--- ... -->
  </div>
</template>

// 该全局状态就是用于记录和管理网站处于 'blog' 模式还是处于 'note' 模式，依此变化网页的布局
// 网站默认处于 'blog' 模式
// flexible mode
export const useFlexiMode = () => useState<'blog' | 'note'>('flexiMode', () => 'blog')

// 具体的文章是在 📁 /content/article 目录里
// 所以先构建一个查询器
// 约束 fetchContentNavigation() 以 📁 /content/article 目录为根目录获取其目录树结构
const queryBuilder = queryContent().where({ _path: { $contains: '/article' } })
const { data } = await useAsyncData('articleTree', () => fetchContentNavigation(queryBuilder))

[
  {
    title: 'Article',
    _path: '/article',
    children: [
      // ...
    ]
  }
]

// 所获取到的数据 data 是一个数组，其唯一元素就是 📁 /content/article 目录
const articleFolder = data.value[0]
// 创建一个变量 currentTree，它是一个响应式变量，用于表示当前的目录树结构
// 可以通过改变该变量的值，模拟我们浏览目录树结构（打开子文件夹或返回祖先文件夹）的操作
const currentTree = ref([])
// 初始的目录树就是 📁 /content/article 目录里的内容
currentTree.value = articleFolder.children

<template>
  <!-- 将 Grid 网格布局的列数设置为随页面宽度响应性变化，以更高的效率利用大屏幕来展示数据 -->
  <div
    class="... grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-col-4 xl:grid-cols-5 2xl:grid-cols-6 gap-2"
  >
    <template v-for="(item, index) in currentTree">
      <!-- 根据树节点的类型（文件还是子文件夹）不同而显示不同的内容 -->
    </template>
  </div>
</template>

// 该组件会接收一系列的 props
// 其中 rootName 就是该文件夹名称（对于该组件而言就是根目录的名称）
// 而 rootTree 就是该文件夹所包含的内容（对于该组件而言就是根目录树）
// 此外 rootIndex 是该文件夹在其父文件夹里的索引值，这是为了实现整个页面下钻时需要使用的
const props = defineProps<{
  rootName: string;
  rootTree: NavItem[];
  rootIndex: number;
}>()

// 一开始还没进行下钻，所以导航栏数组只有一个元素，即只包含根目录自身
// title 属性是文件夹的名称
// path 属性是该文件夹所对应的下钻（相对于根目录，即其自身）路径
// 由于没有进行下钻，所以 path 为空数组
const folderNavArr = ref([
  {
    title: props.rootName,
    path: []
  }
])
// 当前的下钻路径，每下钻一步，该数组就会添加一个元素
// 它是用于构建导航栏数组的
let folderNavPath = []
// 当前的目录树
const currentTree = ref<NavItem[]>([])
// 初始值是根文件夹所包含的内容
currentTree.value = props.rootTree
const setFolderNavPath = (path) => {
  // 该方法是响应浏览者点击导航栏的操作
  // 返回上几级的目录
}
const addFolderNav = (title, index) => {
  // 该方法是响应浏览者点击子文件夹的操作
  // 触发数据下钻
}
const setTreeHandler = () => {
  // 该方法是响应浏览者点击当前的文件夹
  // 抛出 'set-tree' 操作，触发整个页面的数据下钻
}

<template>
  <!-- 未展开文件夹时，渲染为一个按钮 -->
  <!-- 点击按钮后将变量 expand 设置为 true 就可以将文件夹「展开」，且隐藏该按钮-->
  <button
    v-show="!expand"
    class="..."
    @click="expand = true"
  >
    <!-- 未展开文件夹时，只显示文件夹的名称 -->
    {{ props.rootName }}
  </button>
  <!-- 展开文件夹时，渲染为一个包含复杂元素的 div -->
  <!-- 该 div 是 grid 布局的项目（之后可能会对这个布局方案进行优化）-->
  <!-- 它占据 grid 布局中的两列 -->
  <!-- 而根据文件夹中包含的文件数量，动态调整其所占据 grid 布局的行数 -->
  <div
  :class="expand ? (rootTree.length <= 2 ? 'col-span-1 sm:col-span-2 row-span-2' : (rootTree.length <= 4 ? 'col-span-1 sm:col-span-2 row-span-3' : 'col-span-1 sm:col-span-2 row-span-4')) : 'col-span-1 self-start'">
    <!-- 展开文件夹时，显示文件夹中所包含的具体内容 -->
  </div>
</template>

<template>
  <!-- 组件顶部的导航栏 -->
  <div class="folder-nav-container ...">
    <!-- 固定在导航栏左侧的按钮，属于面包屑导航栏的一部分 -->
    <!-- 要将面包屑导航栏分开为两部分，这是因为交互逻辑不同-->
    <!-- 这一部分只显示一个文件夹是 folderNavArr 的第一个元素，即当前下钻的目录 -->
    <!-- 如果再点击该按钮，其交互逻辑是触发整个页面的数据下钻到该目录 -->
    <!-- 可以查看 setTreeHandler 方法是如何实现该交互逻辑的 -->
    <button
      class="..."
      @click="setTreeHandler"
    >
      {{ folderNavArr[0].title }}
    </button>
    <!-- 面包屑导航栏的另一部分 -->
    <!-- 这一部分显示一系列文件夹是 folderNavArr 的第二个元素到最后一个元素，即当前下钻目录的祖先文件夹 -->
    <!-- 所以这里通过 v-show 设置了显示条件，当组件的数据没有下钻时，不需要显示导航栏的该部分 -->
    <!-- 该部分是可以左右滚动的（如果下钻过深时，面包屑包含很多文件夹名称，就有可能过长而无法完全显示，需要左右滚动，设置了相关的样式 overflow-x-auto scroll-smooth -->
    <div
      v-show="folderNavArr.length > 1"
      ref="folderNavContainer"
      class="folder-nav-container overflow-x-auto scroll-smooth ..."
      @scroll.passive="folderNavScrollingHandler"
    >
      <!-- 如果点击该部分的按钮，其交互逻辑时触发该组件的数据返回到该目录（下钻的逆操作） -->
      <!-- 可以查看 setFolderNavPath 方法是如何实现该交互逻辑的 -->
      <button
        v-for="(folder, index) in folderNavArr.slice(1)"
        ...
        @click="setFolderNavPath(folder.path)"
      >
        {{ folder.title }}
      </button>
    </div>
    <!-- 固定在导航栏右侧的一些操作按钮 -->
    <div class="...">
      <!-- 让面包屑导航栏向左滚动的按钮 -->
      <!-- 如果面包屑导航栏滚动到最左侧时，scrollPos 的值就会是 start，则该按钮就会 disabled，且透明度降为 30% -->
      <!-- 可以查看 scrollFolderNavHandler 方法是如何实现该交互逻辑的 -->
      <button
        v-show="showScrollBtn"
        :disabled="scrollPos === 'start'"
        class="..."
        :class="scrollPos === 'start' ? 'opacity-30' : ''"
        @click="scrollFolderNavHandler('left')"
      >
        <!-- ... -->
      </button>
      <!-- 让面包屑导航栏向右滚动的按钮，也有类似的交互逻辑 -->
      <button
        v-show="showScrollBtn"
        :disabled="scrollPos === 'end'"
        class="..."
        :class="scrollPos === 'end' ? 'opacity-30' : ''"
        @click="scrollFolderNavHandler('right')"
      >
        <!-- ... -->
      </button>
      <!-- 「关闭」组件按钮，将状态设置回未展开的状态 expand=false -->
      <button
        class="..."
        @click="expand = false"
      >
        <!-- ... -->
      </button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.folder-nav-container {
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>

const scrollFolderNavHandler = (direction) => {
  if (!folderNavContainer.value) { return }
  const containerWidth = folderNavContainer.value.clientWidth // 面包屑导航栏（第二部分）的长度
  // 根据方向 direction 来增加/减小面包屑的滚动距离 scrollLeft
  if (direction === 'left') {
    folderNavContainer.value.scrollLeft -= containerWidth
  } else if (direction === 'right') {
    folderNavContainer.value.scrollLeft += containerWidth
  }
}

<template>
  <div ref="folderNavContainer" ... @scroll.passive="folderNavScrollingHandler"
  >
    <!-- 面包屑导航栏（第二部分）-->
  </div>
</template>

// 该方法会在面包屑导航栏滚动时被调用
const folderNavScrollingHandler = () => {
  if (folderNavContainer.value) {
    // scrollLeft 是面包屑导航栏已经滚动的距离
    // clientWidth 是面包屑导航栏的宽度
    // scrollWidth 是面包屑导航栏的总宽度（相对于把滚动部分展开的总长度）
    if (folderNavContainer.value.scrollLeft + folderNavContainer.value.clientWidth >= folderNavContainer.value.scrollWidth) {
      // 通过比较 scrollLeft + clientWidth 与 scrollWidth 的大小，可以知道面包屑是否滚动到最右侧
      // 如果面包屑导航栏在最右侧，则将 scrollPos 设置为 end
      scrollPos.value = 'end'
    } else if (folderNavContainer.value.scrollLeft === 0) {
      // 如果没有滚动距离，则面包屑导航栏滚动到最左侧，则将 scrollPos 设置为 start
      scrollPos.value = 'start'
    } else {
      // 如果面包屑导航栏滚动在中间状态，则将 scrollPos 设置为 middle
      scrollPos.value = 'middle'
    }
  }
  }

<template>
  <main>
    <ContentDoc v-slot="{ doc }">
      <!-- 默认插槽 -->
      <!-- 先设置一个一级标题 -->
      <h1>{{ doc.title }}</h1>
      <!-- 再使用 ContentRenderer 组件渲染出文章数据 -->
      <ContentRenderer :value="doc" />
    </ContentDoc>
  </main>
</template>

<template>
  <main>
    <ContentDoc>
      <!-- 具名插槽 not-found -->
      <!-- 无法查询到文章时，展示的替代内容 -->
      <template #not-found>
        <h1>Document not found</h1>
      </template>
      <!-- 具名插槽 empty -->
      <!-- 文章数据未渲染到页面时，展示的默认内容 -->
      <template #empty>
        <h1>Document is empty</h1>
      </template>
    </ContentDoc>
  </main>
</template>

<script setup lang="ts">
// 异步获取文章数据
const { data } = await useAsyncData('page-data', () => queryContent('/hello').findOne())
</script>
<template>
  <main>
    <ContentRenderer :value="data">
      <!-- 具名插槽 empty -->
      <!-- 文章数据未渲染到页面时，展示的默认内容 -->
      <template #empty>
        <p>No content found.</p>
      </template>
    </ContentRenderer>
  </main>
</template>

// 基于当前页面的路由获取文章数据
const { data, pending } = await useAsyncData(`${route.path}`, () => queryContent<ParsedContent>(route.path).findOne())

<template>
  <!-- 使用组件 <ContentRenderer> 渲染文章数据 -->
  <ContentRenderer v-if="!pending && data" :value="data">
    <!-- 具名插槽 empty -->
    <!-- 文章数据未渲染到页面时，展示的默认内容 -->
    <template #empty>
      <div>
        <h1>Article is empty</h1>
      </div>
    </template>
  </ContentRenderer>
</template>

<template>
  <h4 :id="id">
    <a :href="`#${id}`">
      <slot />
    </a>
  </h4>
</template>
<script setup lang="ts">
defineProps<{ id: string }>()
</script>

<h4 id="heading-4">
  <a href="#heading-4">
    Heading 4
  </a>
</h4>

<template>
  <h5><slot /></h5>
</template>

<template>
  <h5 :id="id">
    <NuxtLink :href="`#${id}`">
      <slot />
    </NuxtLink>
  </h5>
</template>
<script setup lang="ts">
defineProps<{ id: string }>()
</script>

<template>
  <h6 :id="id">
    <NuxtLink :href="`#${id}`">
      <slot />
    </NuxtLink>
  </h6>
</template>
<script setup lang="ts">
defineProps<{ id: string }>()
</script>

<template>
  <div class="max-w-full overflow-x-auto">
    <table>
      <slot />
    </table>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '#imports'
export default defineComponent({
  props: {
    code: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: null
    },
    filename: {
      type: String,
      default: null
    },
    highlights: {
      type: Array as () => number[],
      default: () => []
    }
  }
})
</script>
<template>
  <slot />
</template>
<style>
pre code .line {
  display: block;
  min-height: 1rem;
}
</style>

// ...
export default defineNuxtConfig({
  // ...
  content: {
    highlight: {
      theme: 'one-dark-pro', // 选择 one-dark-pro 高亮主题
      preload: ['vue', 'python'] // 列出需要额外预载的编程语言，以对这些代码也实现高亮
    },
    // ...
  }
})

<pre>
  <code>
    <span class="line">
      <span class="ct-f1aa4d">const</span>
      <span class="ct-e1b0cb"> </span>
      <span class="ct-792e78">name</span>
      <span class="ct-e1b0cb"> </span>
      <span class="ct-bc88f2">=</span>
      <span class="ct-e1b0cb"> </span>
      <span class="ct-b23614">"Nuxt Content v2"</span>
    </span>
    <span class="line">
      <span class="ct-792e78">console</span>
      <span class="ct-e1b0cb">.</span>
      <span class="ct-c08727">log</span>
      <span class="ct-e1b0cb">(</span>
      <span class="ct-b23614">'hello world!'</span>
      <span class="ct-e1b0cb">)</span>
    </span>
  </code>
</pre>

<template>
  <div class="...">
    <div class="...">
      <!-- 顶部工具栏 -->
    </div>
    <div ref="codeContainer" class="..." ...>
      <!-- 代码块 -->
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  src: {
    type: String,
    default: ''
  },
  alt: {
    type: String,
    default: ''
  },
  width: {
    type: [String, Number],
    default: undefined
  },
  height: {
    type: [String, Number],
    default: undefined
  }
})
</script>
<template>
  <img :src="src" :alt="alt" :width="width" :height="height">
</template>

<script setup lang="ts">
// ...
const image = ref(null) // 用于获取图片 DOM 元素
// 用了一系列的全局的状态变量
// 因为该图片 Prose 组件需要与 ImageLightbox 组件联动，所以需要共享状态数据
const showZoomImage = useShowZoomImage() // 该状态表示是否展示 Lightbox，该值是一个布尔值
const zoomImage = useZoomImage() // 该状态表示需要缩放的图片，该值是一个对象，包含了需要缩放的图片的相关信息
const currentZoomImage = useCurrentZoomImage() // 该状态表示当前缩放的图片（这是用于和图片组相兼容的），一般情况该值是和 zoomImage 相同
// 双击后执行以下函数
const doubleClickHandler = () => {
  if (image.value) {
     // 通过 getBoundingClientRect() 方法获取该图片的尺寸和定位坐标
     // 这些数据是用于实现 Lightbox 从图片的原始大小和位置弹出的动效
    const imageRect = image.value.getBoundingClientRect()
    // 设置需要缩放的图片
    zoomImage.value = {
      src: props.src,
      width: imageRect.width,
      height: imageRect.height,
      x: imageRect.x,
      y: imageRect.y
    }
    currentZoomImage.value = zoomImage.value
    // 触发 lightbox 弹出
    showZoomImage.value = 'show'
  }
}
</script>
<template>
  <!-- 主要是添加了双击事件监听器 -->
  <img
    ref="image"
    ...
    @dblclick="doubleClickHandler"
  >
</template>