vuepress-theme-vdoing vuepress-theme-vdoing
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
首页
  • 主题初衷与诞生
  • 介绍
  • 快速上手
  • 目录结构
  • 核心配置和约定
  • 自动生成front matter
  • Markdown 容器
  • Markdown 中使用组件
  • 相关文章

    • 使目录栏支持h2~h6标题
    • 如何让你的笔记更有表现力
    • 批量操作front matter工具
    • 部署
    • 关于写文章和H1标题
    • 关于博客搭建与管理
    • 在线编辑和新增文章的方法
  • 主题配置
  • 首页配置
  • front matter配置
  • 目录页配置
  • 添加摘要
  • 修改主题颜色和样式
  • 评论栏
资源
案例
问答
赞助
GitHub (opens new window)
npm

(进入注册为作者充电)

  • 配置

    • 主题配置
    • 首页配置
    • front matter配置
    • 目录页配置
    • 添加摘要
    • 修改主题颜色和样式
    • 评论栏

添加摘要

文章摘要会显示于首页的详细版文章列表中,在编写文章时(.md文件中)在合适的位置添加一个<!-- more -->注释。注释前面的内容将会暴露在摘要中。

示例:

# 如何根据系统主题自动响应CSS深色模式

![Dark](https://jsd.cdn.zzko.cn/gh/xugaoyi/image_store/blog/20200427163531.jpg)

很多人喜欢选择APP或网站中的深色模式,也许他们更喜欢这样的外观,或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何在网站中实现一个自动的CSS深色模式,根据访客的系统主题来自动响应。

<!-- more -->

## CSS 深色模式 (Dark Mode)

...

如示例的内容,在<!-- more -->注释前面的除了标题之外所有内容将显示到摘要中。摘要在文章列表的显示效果如下:

值得注意的是摘要的内容也是文章内容的一部分,会显示在文章详情页中。

上次更新: 2023/11/01, 06:12:07
目录页配置
修改主题颜色和样式

← 目录页配置 修改主题颜色和样式→

Theme by Vdoing | Copyright © 2019-2024 Evan Xu | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式