MaraPython

Appearance

本站 - 首页 ​

本文记录和讲解一下关于首页的一些配置，包括 Banner 配置，文章列表，分页配置，

首页 Banner 配置，位于首页顶部。直接抄作业，然后修改。

站点使用到的图片，创建 docs\public\img\ 目录，专门存放。项目部署上线之后，会在根目录下生成 \img\ 目录，所以在项目内各配置文件内使用图片时，使用相对路径引用即可。

文章列表 ​

首页的文章列表，同样，先抄作业，再修改。

ts
// .vitepress/config.ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

const teekConfig = defineTeekConfig({
  post: {
    excerptPosition: "top", // 文章摘要位置
    showMore: true, // 是否显示更多按钮
    moreLabel: "阅读全文 >", // 更多按钮文字
    coverImgMode: "default", // 文章封面图模式
    showCapture: true, // 是否在摘要位置显示文章部分文字，当为 true 且不使用 frontmatter.describe 和 <!-- more --> 时，会自动截取前 400 个字符作为摘要
  },
});

Teek 主题提供了三种配置方法：

  1. 在 frontmatter 内通过 frontmatter.describe 属性进行手工配置
  2. 在文章恰当的位置使用注释标签 <!-- more --> 截取位置
  3. 自动截取前 400 个字符

第一种方法比较费时费力，因为 Teek 主题并没有提供自动生成和插入 frontmatter 的功能，暂时全靠手动添加。第三种方法自动截取的文字都是基于纯文本，当显示在首页列表卡片中时，Markdown 的语法并没有解析成 HTML 标签，所以显示出来的文字会比较混乱。当前建议使用第二种配置方法，使用此方法截取的 Markdown 文本，在输送到首页文章卡片之前，已经完成了从 Markdown 到 HTML 的转换。

分页配置 ​

首页文章列表的默认分页配置是每页 10 篇文章，可以尝试配置成每页 20 篇，看看效果。

博主卡片 ​

博主信息，显示在首页左边第一个卡片。

ts
import { defineTeekConfig } from "vitepress-theme-teek/config";

// Teek 主题配置
const teekConfig = defineTeekConfig({
  banner: {
    enabled: true,
    name: "MaraPython", // Banner 标题，默认读取 vitepress 的 title 属性
    bgStyle: "fullImg", // Banner 背景风格：pure 为纯色背景，partImg 为局部图片背景，fullImg 为全屏图片背景
    pureBgColor: "#28282d", // Banner 背景色，bgStyle 为 pure 时生效
    imgSrc: ["/img/26578153_1162.jpg", "/img/18954425_6053821.jpg"], // Banner 图片链接。bgStyle 为 partImg 或 fullImg 时生效
    imgInterval: 15000, // 当多张图片时（imgSrc 为数组），设置切换时间，单位：毫秒
    imgShuffle: false, // 图片是否随机切换，为 false 时按顺序切换，bgStyle 为 partImg 或 fullImg 时生效
    imgWaves: true, // 是否开启 Banner 图片波浪纹，bgStyle 为 fullImg 时生效
    mask: true, // Banner 图片遮罩，bgStyle 为 partImg 或 fullImg 时生效
    maskBg: "rgba(0, 0, 0, 0.4)", // Banner 遮罩颜色，如果为数字，则是 rgba(0, 0, 0, ${maskBg})，如果为字符串，则作为背景色。bgStyle 为 partImg 或 fullImg 且 mask 为 true 时生效
    textColor: "#ffffff", // Banner 字体颜色，bgStyle 为 pure 时为 '#000000'，其他为 '#ffffff'
    titleFontSize: "3.2rem", // 标题字体大小
    descFontSize: "1.4rem", // 描述字体大小
    descStyle: "types", // 描述信息风格：default 为纯文字渲染风格（如果 description 为数组，则取第一个），types 为文字打印风格，switch 为文字切换风格
    description: [
      "Success is not final, failure is not fatal: it is the courage to continue that counts. — Winston Churchill",
      "Your time is limited, so don’t waste it living someone else’s life. — Steve Jobs",
      "The way to get started is to quit talking and begin doing. — Walt Disney",
      "I find that the harder I work, the more luck I seem to have. — Thomas Jefferson",
      "Don’t watch the clock; do what it does. Keep going. — Sam Levenson",
      "Strive not to be a success, but rather to be of value. — Albert Einstein",
      "It always seems impossible until it’s done. — Nelson Mandela",
      "You miss 100% of the shots you don’t take. — Wayne Gretzky",
      "Dream big and dare to fail. — Norman Vaughan",
      "Do one thing every day that scares you. — Eleanor Roosevelt",
    ], // 描述信息
    switchTime: 4000, // 描述信息切换间隔时间，单位：毫秒。descStyle 为 switch 时生效
    switchShuffle: false, // 描述信息是否随机切换，为 false 时按顺序切换。descStyle 为 switch 时生效
    typesInTime: 100, // 输出一个文字的时间，单位：毫秒。descStyle 为 types 时生效
    typesOutTime: 50, // 删除一个文字的时间，单位：毫秒。descStyle 为 types 时生效
    typesNextTime: 800, // 打字与删字的间隔时间，单位：毫秒。descStyle 为 types 时生效
    typesShuffle: false, // 描述信息是否随机打字，为 false 时按顺序打字，descStyle 为 types 时生效
  },
  post: {
    excerptPosition: "top", // 文章摘要位置
    showMore: true, // 是否显示更多按钮
    moreLabel: "阅读全文 >", // 更多按钮文字
    coverImgMode: "default", // 文章封面图模式
    showCapture: true, // 是否在摘要位置显示文章部分文字，当为 true 且不使用 frontmatter.describe 和 <!-- more --> 时，会自动截取前 400 个字符作为摘要
  },
  page: {
    pageSize: 20,
  },
});