Список статей

Тема предоставляет вам список всех статей по пути /article/ по умолчанию.

Статья

Все статьи будут добавлены в список статей по умолчанию и отображены по пути /article/.

Если вы не хотите, чтобы список содержал какие-то конкретные статьи, просто установите для параметра article значение false в начале статьи или вы можете настроить его с помощью plugins.blog.filter в параметрах темы.

Чтобы прикрепить конкретную статью к списку статей, просто установите для параметра sticky значение true в frontmatter статьи.

Порядок

Для липких статей вы можете установить sticky с числом, чтобы установить их порядок. Статьи с большими номерами будут перечислены первыми.

Выдержка

Добавление выдержки

Если вы хотите добавить отрывок к статье, вы можете пометить содержимое комментарием <!-- more -->. Любой контент до этого комментария будет считаться выдержкой.

Между тем, если отрывок, который вы хотите установить, не соответствует тому, что вы хотите показать в начале статьи, вы также можете установить строку HTML с помощью параметра excerpt во Frontmatter.

Автоматически генерировать выдержку

По умолчанию тема автоматически извлекает для вас выдержки из статьи.

Если вы хотите, чтобы тема отображала только указанный вами отрывок, установите plugins.blog.excerptLength: 0 в параметрах темы.

Ограничение выдержки

Мы рекомендуем вам использовать <!-- more -->, чтобы отметить отрывок как первый выбор. Если вам нужна особая выдержка, установите ее во вступительном слове самостоятельно.

Кроме того, отрывок напрямую вставляется в DOM через innerHTML, это означает, что никакие функции Vue недоступны.

Звездные статьи

Вы можете пометить статью, установив для параметра star значение true в frontmatter. После просмотра пользователи могут просмотреть эти статьи на странице /star/.

В то же время любые звездные статьи будут отображаться в столбце статей на боковой панели главной страницы блога.

Инфо

Наше соображение по поводу предоставления звездочек: пользователи темы могут захотеть показать посетителям некоторые высококачественные статьи, но не хотят, чтобы прилепленные статьи переполняли главную страницу, в результате чего посетители не могли видеть недавно обновленные статьи.

Порядок

Как и в случае с прикрепленными статьями, вы также можете установить star на номер, чтобы установить их порядок. Статьи с большими номерами будут перечислены первыми.

Другие типы статей Продвинутый

Тема предоставляет отдельные списки для дополнительных типов статей.

Чтобы добавить дополнительный тип статьи, вы должны установить plugins.blog.type в настройках темы с массивом объектов, описывающих нужный вам тип.

Каждый тип должен иметь уникальный ключ (без специальных символов) и функцию filter, чтобы определить, должна ли страница соответствовать типу. Функция filter должна принимать объект страницы и возвращать логическое значение.

Для сортировки страниц в списке типов вы также можете установить функцию sorter. Функция sorter должна принимать два объекта страницы и возвращать число.

По умолчанию путь к списку типов будет /key/ (с заменой key вашим фактическим ключом). Вы также можете установить собственный путь, установив path в параметрах.

Опция frontmatter управляет лицевой стороной страницы макета, а функция принимает localePath и возвращает объект внешней оболочки. Этот параметр полезен при установке заголовка страницы макета.

Заметка

layout — это имя макета, по умолчанию это будет BlogType, зарегистрированный макет vuepress-theme-hope. ТОЛЬКО ЕСЛИ вы создаете собственный макет для списка типов, вы должны установить для этой опции значение вашего макета.

Также вам необходимо установить blogLocales[key] в локалях темы с фактическим именем типа, чтобы тема могла правильно отображать имя типа.

Для начала мы хотели бы показать вам несколько примеров.

Примеры

1. Добавление типа страниц слайдов.

   Все страницы со слайдами должны иметь layout: Slide во frontmatter. И последовательность не имеет значения.

2. Добавление исходного типа.

Вы должны установить следующие параметры:

import { defineUserConfig } from "vuepress";
// you may need to install vuepress-shared to use its `compareDate`
import { compareDate } from "vuepress-shared/node";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  // other config
  // ...

  theme: hopeTheme({
    blogLocales: {
      slide: "Slides",
      original: "Original",
    },

    plugins: {
      blog: {
        type: [
          {
            key: "slide",
            filter: (page) => page.frontmatter.layout === "Slide",
            frontmatter: () => ({ title: "Slides" }),
          },
          {
            key: "original",
            filter: (page) => page.frontmatter.original,
            sorter: (pageA, pageB) =>
              compareDate(pageA.frontmatter.date - pageB.frontmatter.date),
            frontmatter: () => ({ title: "Original" }),
          },
        ],
      },
    },
  }),
});