跳到主要内容

7、使用小细节😜

使用小细节​

image-20241101070626419

目录​

[toc]

折叠代码块​

image-20240820071344483

测试过程：

  • 语法
<details>
  <summary>点击查看更多</summary>

我是隐藏内容
</details>
  • 测试效果

折叠代码测试：

点击展开所有代码：
#!/bin/bash

# 由用户输入当前机器的IP地址
read -p "请输入当前机器的IP地址： " new_ip_address
echo "开始执行ruyu-blog安装脚本……："

#配置颜色
RED="\E[1;31m"
GREEN="\E[1;32m"
END="\E[0m"

pull_softwares(){
    ########################################步骤1：从oss拉取基础环境包######################################
    echo -e $RED "########################################步骤1：从oss拉取基础环境包######################################" $END
    sleep 2
    cd /root
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/ruyu-blog-install-softwares.zip
    unzip ruyu-blog-install-softwares.zip

    cd /root/
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/apache-maven-3.9.8-bin.tar.gz
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/jdk-17_linux-x64_bin.rpm
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/node-v16.20.2-linux-x64.tar.xz
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/ruyu-blog-v1.4.2.zip
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/docker-compose-linux-x86_64
    curl -O  https://bucket-hg.oss-cn-shanghai.aliyuncs.com/code/maven-repo.tar.gz

    ##解压ruyu-blog源码及sql
    cd ~
    unzip ruyu-blog-v1.4.2.zip
    mv ruyu-blog-v1.4.2 ruyu-blog
    cd ruyu-blog/sql
    mv "blog(部署).sql" blog.sql
    cp blog.sql ~
}

其它内容。

  • 测试

docsuarusu渲染后的效果：

image-20240820071033001

image-20240820071107983

  • 存在的问题

typora不支持折叠代码，不然体验会更好。

高亮代码行​

  • 效果

image-20240825212117311

  • 配置方法

在代码里加入如下注释行就好：

{
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "types": ["@types/jest"]
  }
}

image-20240825212154887

侧边栏索引​

  • 效果

image-20240827055344734

  • 配置方法

在2、玩转Docusaurus目录下新创建_category_.json文件就好：

{
  "link": {
    "type": "generated-index"
  }
}

image-20240827055418888

测试mdx代码效果（mdx组件）​

2024年9月13日-测试成功。

官方js风格测试

环境：

win10 Docusaurus version: 3.5.2 Node version: v20.12.1 npm 10.8.2 基于官网默认仓库

本次测试：

  • 创建如下2个文件

src\components\Highlight.js

image-20240913073218975

import React from 'react';

export default function Highlight({children, color}) {
  return (
    <span
      style={{
        backgroundColor: color,
        borderRadius: '2px',
        color: '#fff',
        padding: '0.2rem',
      }}>
      {children}
    </span>
  );
}

src\theme\MDXComponents.js

image-20240913073336935

import React from 'react';
// Import the original mapper
import MDXComponents from '@theme-original/MDXComponents';
import Highlight from '@site/src/components/Highlight';

export default {
  // Re-use the default mapping
  ...MDXComponents,
  // Map the "<Highlight>" tag to our Highlight component
  // `Highlight` will receive all props that were passed to `<Highlight>` in MDX
  Highlight,
};
  • docs创建md文件

docs\tutorial-basics\test.md

image-20240913073500448

typora里效果：

image-20240913073526748

<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.

I can write **Markdown** alongside my _JSX_!



---



I can conveniently use <Highlight color="#25c2a0">Docusaurus green</Highlight> everywhere!
  • 验证

image-20240913073542451

实现点击目录后自动链接到某个md页面​

方法1：目录下创建index.md​

这个小功能配置后，对于用户访问很友好哦，nice😜。

测试成功-2024.11.01

  • 环境
win10
Docusaurus version: 3.5.2
Node version: v20.12.1
npm 10.8.2
基于官网默认仓库
  • 效果

docus-test-1101

  • 配置方法

在Docusaurus中，要实现点击一个目录（类别）后直接打开一个特定的Markdown文档页面，可以使用以下方法：

方法一：在类别中指定一个默认文档

  1. 将Markdown文件放在目录中：首先，把你希望成为默认页面的Markdown文件放在该目录（类别）中。
  2. 重命名该Markdown文件为index.md：Docusaurus会自动将名为index.md的文件视为该目录的默认文档，相当于目录的“首页”。

具体步骤

假设你的文档结构如下：

复制docs/
  getting-started/
    _category_.json
    index.md
    setup.md

在这个例子中：

  • index.md 将作为 getting-started 目录的默认文档。当用户点击这个目录时，index.md将自动显示。

自己本次配置：

image-20241101065249438

---
title: 4、全网最美个人相册machete
id: machete
slug: /machete
tags: [machete]
keywords:
  - 相册
last_update:
  date: 2024-09-07
  author: One
---
## machete

方法2：目录下的md名称和目录名称一致​

  • 环境
win10
Docusaurus version: 3.5.2
Node version: v20.12.1
npm 10.8.2
基于官网默认仓库
  • 配置方法

目录下的md名称和目录名称如果一致的话，那么渲染后的效果就会是以下这样的（点击目录后，直接到达了这个md页面，很nice）。

image-20240911224049843

  • 现象

image-20240911224119804

总结​

个人更推荐第一种方式，更加灵活一些。

关于我​

我的博客主旨：

  • 排版美观，语言精炼；
  • 文档即手册，步骤明细，拒绝埋坑，提供源码；
  • 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！

🍀 微信二维码

x2675263825 （舍得）， qq：2675263825。

image-20230107215114763

🍀 微信公众号

《云原生架构师实战》

image-20230107215126971

🍀 csdn

https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421

image-20230107215149885

🍀 知乎

https://www.zhihu.com/people/foryouone

image-20230107215203185

往期推荐​

QQ群

《玩转Typora+Docusuaurus+起始页》交流群：（欢迎小伙伴一起探讨有趣的IT技术，来完成一些漂亮的项目）

开源项目：

项目名称我的文档我的demo作者demo
1、玩转Typorahttps://wiki.onedayxyy.cn/docs/typorahttps://wiki.onedayxyy.cn/docs/typorahttps://typoraio.cn/#
2、玩转Docusaurushttps://wiki.onedayxyy.cn/docs/mogai-docusaurushttps://wiki.onedayxyy.cn/https://www.docusaurus.cn/
3、个人主页home3.0https://wiki.onedayxyy.cn/docs/home3.0https://onedayxyy.cn/https://github.com/hsBUPT/hsBUPT.github.io
4、家庭相册filesite-iohttps://wiki.onedayxyy.cn/docs/filesite.io-photot-install-fullhttps://photo.onedayxyy.cn/https://demo.jialuoma.cn/

https://wiki.onedayxyy.cn/docs/OpenSource

image-20241007221810896

  • typora皮肤

https://wiki.onedayxyy.cn/docs/typora

image-20241007221846691

  • 起始页

https://onedayxyy.cn/

image-20240814230557697

  • 知识库/博客

https://wiki.onedayxyy.cn/

  • 个人相册

https://photo.onedayxyy.cn/

image-20241028072523651

最后​

好了，关于本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！

标签：
最后由 One 于 更新
0%