Skip to main content

6 posts tagged with "docusaurus"

View All Tags

· One min read
Richard Wang
note

Docusaurus没有自带搜索功能，需要使用第三方插件，一种是通过Algolia实现，另一种是通过本地搜索实现。本文介绍如何使用本地搜索插件。

tip

插件选择easyops-cn/docusaurus-search-local，为中文搜索做过优化，且最近维护日期也比较新。

项目地址：@easyops-cn/docusaurus-search-local

安装插件​

yarn add @easyops-cn/docusaurus-search-local

配置插件​

docusaurus.config.js
  themes: [
    [
      require.resolve("@easyops-cn/docusaurus-search-local"),
      /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
      ({
        hashed: true,   // 是否对搜索结果进行hash
        language: ["en", "zh"], // 搜索语言
        indexDocs: true, // 是否对docs进行索引
        indexBlog: true, // 是否对blog进行索引
        indexPages: false, // 是否对pages进行索引
        docsRouteBasePath: ["/docs","/linux","/services"], // 配置需要搜索的文档路径
      }),
    ],
  ],

本地预览效果​

npm run build
npm run serve

· 2 min read
Richard Wang
Note

在浏览Docusaurus官方推荐的案例中，发现了一个很好看的卡片连接的样式，Copy一下实现过程。

样式的参考的链接如下

Clutch说明文档
Clutch is a modular, extensible platform for infrastructure management.

创建LinkCard组件​

创建LinkCard样式文件夹​

在项目目录src/components文件夹下创建LinkCard文件夹。

创建index.tsx文件​

src/components/LinkCard/index.tsx
// @ts-ignore
import React from "react";
// @ts-ignore
import Link from "@docusaurus/Link";
// @ts-ignore
import type { Props as LinkProps } from "@docusaurus/Link";

import "./styles.css";

interface LinkCardProps extends Pick<LinkProps, "to"> {
    title: string;
    description: string;
}

const LinkCard = ({ to, title, description }: LinkCardProps): JSX.Element => (
    <Link className="lc-container" to={to}>
        <div className="lc-title">{title}</div>
        <div className="lc-description">{description}</div>
    </Link>
);

export default LinkCard;

创建styles.css文件​

src/components/LinkCard/styles.css
.lc-container {
    border: 1px solid var(--ifm-color-emphasis-300);
    border-radius: var(--ifm-global-radius);
    padding: 0.75rem;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    max-width: 45em;
    display: block;
}

.lc-container:hover {
    border-color: var(--ifm-color-primary);
    text-decoration: none;
}

.lc-title {
    font-weight: 600;
    margin-right: 0.5em;
}

.lc-description {
    font-size: 0.875rem;
    color: var(--ifm-font-color-secondary);
}

使用LinkCard组件​

在md文件中引入LinkCard组件​

import LinkCard from '@site/src/components/LinkCard';

<LinkCard title="<title>" description="<description" to="<URL or filepath>"></LinkCard>

· One min read
Sébastien Lorber
Yangshun Tay

Docusaurus blogging features are powered by the blog plugin.

Simply add Markdown files (or folders) to the blog directory.

Regular blog authors can be added to authors.yml.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

A blog post folder can be convenient to co-locate blog post images:

Docusaurus Plushie

The blog supports tags as well!

And if you don't want a blog: just delete this directory, and use blog: false in your Docusaurus config.

· One min read
Gao Wei

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet