跳到主要内容

9 篇博文 含有标签「docusaurus」

查看所有标签

Mermaid 流程图语法指南

· 阅读需 2 分钟
DingZhiyu
2023 Para team number

流程图 (Flowchart)

示例

graph TD
A[开始] --> B{条件判断}
B -->|是| C[结束]
B -->|否| D[处理过程]
D --> B

image-20240701220715588

思维导图 (Mind Map)

示例

graph TD
A[思维导图]
A --> B[主要分支1]
A --> C[主要分支2]
A --> D[主要分支3]
B --> E[子分支1]
B --> F[子分支2]
C --> G[子分支3]
C --> H[子分支4]
D --> I[子分支5]
D --> J[子分支6]

image-20240701220742929

时序图 (Sequence Diagram)

示例

sequenceDiagram
participant 用户
participant 系统
用户->>系统: 登录请求
系统-->>用户: 返回登录结果

image-20240701220809877

甘特图 (Gantt Chart)

示例

gantt
title 项目计划
dateFormat YYYY-MM-DD
section 项目阶段
需求分析 :a1, 2024-06-01, 10d
系统设计 :after a1, 15d
系统开发 : 2024-06-20, 30d
系统测试 : 2024-07-20, 20d

image-20240701220838836

类图 (Class Diagram)

示例

classDiagram
class Person{
+String name
+int age
+void speak()
}

class Employee{
+int employeeId
+double salary
}

Person <|-- Employee

image-20240701220856779

CDN原理与应用

· 阅读需 8 分钟
DingZhiyu
2023 Para team number

什么是CDN?

CDN(内容分发网络,Content Delivery Network)是一种分布式服务器系统,旨在通过将内容缓存到全球各地的节点服务器上,加速内容交付,提高网站的加载速度和可靠性。CDN节点可以有效减轻源服务器的负载,改善用户体验。

CDN如何工作?

  1. 缓存内容:CDN将静态内容(如图片、CSS、JavaScript文件)缓存到全球各地的节点服务器上。
  2. 就近分发:当用户请求内容时,CDN会将请求重定向到离用户最近的节点服务器,从而减少延迟。
  3. 动态加速:对于无法缓存的动态内容,CDN可以通过优化路由和协议,加速数据传输。

可以使用CDN的内容类型

静态内容

  • 图像文件:JPEG、PNG、GIF、SVG、WebP等。
  • 视频和音频文件:MP4、WebM、Ogg、MP3、AAC、OGG等。
  • 文档和文件下载:PDF、DOCX、PPTX、TXT、ZIP、RAR等。
  • 网页资源文件:HTML、CSS、JavaScript文件。
  • 字体文件:TTF、OTF、WOFF、WOFF2等。
  • 数据文件:JSON、XML、CSV等。
  • 图形和动画文件:SVG、Canvas等。
  • 3D 模型和资产:OBJ、FBX、GLTF等。
  • 静态网站生成器输出:使用静态网站生成器生成的内容。

是的,静态内容使用CDN分发通常不需要开发者添加额外的代码。CDN的工作原理和设置方式使得静态内容的分发相对简单。下面是一些详细说明:

静态内容使用CDN分发的设置步骤

1. 选择CDN提供商

选择一个合适的CDN提供商,如Cloudflare、Akamai、Amazon CloudFront、Google Cloud CDN等。

2. 配置DNS

将你的网站的DNS设置指向CDN提供的服务器。通常,你需要在DNS管理控制台中添加CNAME记录,指向CDN提供的域名。

示例:

www.example.com CNAME cdn.example-cdn.com

3. 配置CDN

在CDN提供商的管理控制台中配置你的站点,指定哪些内容需要通过CDN分发。通常,你可以设置一个或多个规则来匹配静态内容的路径。

4. 源站配置

确保你的源服务器(origin server)配置正确,允许CDN节点请求静态内容。大多数情况下,不需要对源服务器进行特别的调整。

5. 测试和验证

在CDN配置完成后,测试并验证CDN是否正确缓存和分发了静态内容。你可以使用浏览器的开发者工具检查请求头和响应头,确保内容通过CDN节点传输。

6. 缓存策略

根据需要配置缓存策略,例如缓存的时间、哪些内容需要强制刷新等。

无需额外代码示例

假设你有一个简单的网站,包含HTML、CSS、JavaScript、图片等静态文件。配置CDN后,这些文件的请求流程如下:

  1. 用户请求:用户浏览器请求网页内容。
  2. CDN节点检查缓存:CDN节点检查是否有缓存的版本。
  3. 缓存命中:如果缓存命中,CDN节点直接返回缓存内容。
  4. 缓存未命中:如果缓存未命中,CDN节点向源服务器请求内容,并缓存返回的内容以供后续请求使用。

示例请求流程:

  • 用户请求 https://www.example.com/index.html
  • CDN节点返回缓存的 index.html 文件
  • 用户请求 https://www.example.com/style.css
  • CDN节点返回缓存的 style.css 文件
  • 用户请求 https://www.example.com/image.jpg
  • CDN节点返回缓存的 image.jpg 文件

这些请求和响应过程中,开发者不需要在代码中做任何改动。

示例配置和响应头

在使用CDN后,典型的响应头可能如下所示:

HTTP/1.1 200 OK
Date: Sat, 08 Jun 2024 10:00:00 GMT
Content-Type: text/html
Content-Length: 1024
Connection: keep-alive
Cache-Control: max-age=3600
CDN-Cache: HIT
Server: example-cdn

使用CDN处理动态内容

动态内容

  • 用户数据:用户个人资料、订单历史、消息、通知等。
  • 实时更新的内容:新闻、社交媒体动态、股票价格、天气预报等。
  • 个性化内容:推荐系统生成的个性化推荐、广告等。
  • 搜索结果:用户查询生成的搜索结果页面。
  • 购物车和结账页面:显示用户的购物车内容、订单详情等。

虽然动态内容不能像静态内容那样直接缓存,但可以通过以下方式优化:

配置缓存策略

  • HTTP头配置:使用Cache-ControlExpiresETagLast-Modified等头部设置控制缓存。
    Cache-Control: private, max-age=60
    ETag: "12345"
  • Vary 头:根据请求头(如Accept-EncodingUser-Agent)缓存不同版本的内容。
    Vary: Accept-Encoding, User-Agent

边缘计算和自定义逻辑

  • 边缘计算:在CDN节点上运行自定义脚本(如Cloudflare Workers、AWS Lambda@Edge)。
    addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
    })

    async function handleRequest(request) {
    // 自定义逻辑
    return new Response('Hello from the edge!', { status: 200 })
    }

配置CDN规则

  • 路径规则:在CDN控制台中设置路径规则,定义哪些内容应缓存,哪些应直接从源服务器获取。
    /api/* - No Cache
    /static/* - Cache

动态内容缓存和过期

  • 短期缓存:对动态内容进行短期缓存,以减少服务器负载。
  • 条件请求:利用条件请求头减少数据传输。
    If-None-Match: "12345"
    If-Modified-Since: Wed, 21 Oct 2020 07:28:00 GMT

利用CDN的高级功能

  • 实时日志和监控:使用CDN的日志和监控功能,调整策略。
  • 动态加速:优化动态内容的传输路径和速度。

示例配置

以下是一个示例配置,展示如何在CDN中配置和利用缓存策略:

# 针对静态内容
Cache-Control: public, max-age=31536000

# 针对动态内容(短期缓存)
Cache-Control: private, max-age=60

# 针对不缓存的API请求
Cache-Control: no-store

总结

CDN可以显著提升静态和动态内容的交付效率,通过合理配置缓存策略和利用CDN的各种高级功能,开发者可以改善用户体验,减轻服务器负载,并提高内容交付的速度和可靠性。

HTTP&HTTPS

· 阅读需 6 分钟
DingZhiyu
2023 Para team number

HTTP与HTTPS的区别

1. 定义

  • HTTP(HyperText Transfer Protocol,超文本传输协议):一种用于分布式、协作和超媒体信息系统的应用层协议,是万维网的数据通信基础。
  • HTTPS(HyperText Transfer Protocol Secure,超文本传输安全协议):是在HTTP基础上加入SSL/TLS协议,用于在计算机网络上进行安全通信。

2. 安全性

  • HTTP:数据在客户端和服务器之间以明文形式传输,容易被中间人攻击、窃听和篡改。
  • HTTPS:数据通过SSL/TLS协议加密后传输,保障了数据的机密性、完整性和真实性。

3. 端口

  • HTTP:使用端口80。
  • HTTPS:使用端口443。

4. 性能

  • HTTP:由于不需要加密解密,性能略优。
  • HTTPS:需要进行加密解密操作,可能会略微降低性能,但现代硬件和优化技术使得这个性能差异通常不明显。

5. SEO优势

  • HTTP:搜索引擎对HTTP网站的排名可能较低。
  • HTTPS:搜索引擎(如Google)优先考虑HTTPS网站,提高其排名。

6. 可信度

  • HTTP:用户访问时,浏览器通常不会提示安全警告,但用户可能会对网站安全性存疑。
  • HTTPS:用户访问时,浏览器会显示安全锁图标,增强用户信任。

网站开发者为网站申请SSL证书的好处

1. 数据加密

  • 好处:保证数据在传输过程中不被窃听,保护用户隐私和敏感信息,如登录密码、支付信息等。
  • 详细解释:SSL/TLS协议会对数据进行加密处理,使得即使数据被截获,也难以解密和利用。

2. 认证网站身份

  • 好处:通过第三方认证机构验证网站身份,防止钓鱼网站和中间人攻击。
  • 详细解释:SSL证书由受信任的证书颁发机构(CA)签发,确保用户访问的网站是真实的,而不是仿冒的。

3. 提高SEO排名

  • 好处:搜索引擎优先考虑HTTPS网站,有助于提高网站在搜索引擎中的排名。
  • 详细解释:例如,Google明确表示其搜索算法会优先考虑HTTPS网站,以提供更安全的搜索体验。

4. 增强用户信任

  • 好处:浏览器会显示安全锁图标,用户更愿意在感到安全的网站上进行交互和交易。
  • 详细解释:HTTPS标志着网站的安全性,用户看到安全锁图标时,更愿意提供个人信息和进行在线购物。

5. 防止流量劫持

  • 好处:保护网站不被恶意软件和广告劫持,提高用户体验。
  • 详细解释:HTTP容易被劫持,插入恶意广告或内容,而HTTPS可以防止这种劫持行为。

SSL证书的劣势

1. 成本

  • 劣势:部分SSL证书需要付费,尤其是高级别的EV证书(扩展验证证书)。
  • 详细解释:虽然有免费的SSL证书(如Let’s Encrypt),但高级别证书需要支付费用,增加了网站运营成本。

2. 配置复杂性

  • 劣势:SSL证书的安装和配置需要一定的技术知识,可能增加网站开发和维护的复杂性。
  • 详细解释:需要正确配置服务器、处理证书的续期和更新,否则可能导致网站无法正常访问。

3. 性能影响

  • 劣势:加密和解密过程需要计算资源,可能会稍微影响网站的加载速度。
  • 详细解释:尽管现代服务器和优化技术可以减小这一影响,但在高并发访问情况下,性能开销仍然存在。

4. 兼容性问题

  • 劣势:部分旧设备或浏览器可能不完全支持最新的SSL/TLS协议,导致访问问题。
  • 详细解释:尽管现代浏览器大多支持SSL/TLS,但一些旧版本或特定设备可能存在兼容性问题,影响用户体验。

总结

为网站申请SSL证书,转换到HTTPS协议是确保网站安全性和用户信任的重要措施。尽管有一些成本和技术上的挑战,但其带来的安全和SEO优势使其成为现代网站的标准配置。为了更好地保护用户数据和提升网站竞争力,网站开发者应积极采用HTTPS,并选择适合自己需求的SSL证书类型。

希望这些内容能帮助你形成一个详细的文档。如果你有更多问题或需要进一步细化某些部分,请告诉我。

阿Q与精神胜利法

· 阅读需 8 分钟
DingZhiyu
2023 Para team number

阿Q与精神胜利法

阿Q是中国现代文学家鲁迅在他的小说《阿Q正传》中塑造的一个经典人物形象。阿Q是一个生活在清末民初的农村贫苦农民,他的性格和行为反映了当时社会底层人民的精神状态。阿Q的名字中的“Q”并没有具体的含义,鲁迅借此表达了对这个人物的讽刺和批判。

阿Q的性格特点

  1. 自欺欺人:阿Q经常通过自我安慰和自我欺骗来逃避现实的困境。例如,当他被人打了之后,他会说“这不算什么”,以此来安慰自己。
  2. 自我优越感:尽管生活困苦,阿Q总是以一种自我感觉良好的态度来看待自己,认为自己比别人高明。例如,他认为自己是“革命党”,尽管他对革命的理解非常肤浅。
  3. 盲目乐观:阿Q总是对未来抱有不切实际的希望,认为自己总有一天会“发达”,但从未为此付出实际行动。

精神胜利法

精神胜利法是阿Q用来逃避现实、安慰自己的心理策略。这个方法主要体现在以下几个方面:

  1. 自我安慰:当阿Q遭遇挫折或失败时,他会通过自我安慰来减轻痛苦。例如,当他被人打了之后,他会对自己说“这不算什么,他们只是嫉妒我”。
  2. 自我欺骗:阿Q经常通过扭曲事实来让自己感到胜利。例如,当他偷了别人的东西被抓住时,他会认为自己是在“革命”。
  3. 幻想胜利:阿Q通过幻想来获得心理上的满足。例如,他常常幻想自己将来会成为一个大人物,尽管现实中他一事无成。

精神胜利法的社会意义

精神胜利法不仅是阿Q个人的心理策略,更是鲁迅对当时中国社会的一种批判。鲁迅通过阿Q这个形象,揭示了当时很多底层人民在面对困境时,选择逃避现实、安于现状的心理状态。阿Q的精神胜利法反映了人们在无法改变现实的情况下,通过自我欺骗和幻想来获得心理上的安慰。

《阿Q正传》内容梳理

背景介绍

《阿Q正传》发表于1921年至1922年间,最初连载于《晨报副刊》。小说的背景设定在清末民初的中国农村,通过阿Q这个典型人物,鲁迅揭示了当时社会底层人民的生活状况和心理状态。

主要人物

  • 阿Q:主人公,一个贫困的农民,性格自欺欺人、自我安慰、盲目乐观。
  • 赵太爷:乡绅,阿Q的雇主,象征着封建势力。
  • 吴妈:阿Q的情感寄托对象,村里的寡妇。
  • 小D:阿Q的朋友,后来成为革命党人。

故事情节

  1. 阿Q的生活: 阿Q是一个无家可归的流浪汉,靠给别人打短工为生。他经常受到村里人的欺负和嘲笑,但他总是通过“精神胜利法”来自我安慰和自我欺骗。例如,当他被赵太爷打了之后,他会说“这不算什么,他们只是嫉妒我”。

  2. 阿Q的自我安慰: 阿Q经常自称是“革命党”,尽管他对革命的理解非常肤浅。他认为自己是一个“革命者”,但实际上他对革命并没有任何实际的贡献或理解。他的“革命”只是他自我安慰的一种方式。

  3. 阿Q的幻想: 阿Q常常幻想自己将来会成为一个大人物。他认为自己总有一天会“发达”,但从未为此付出实际行动。他的幻想成为他逃避现实的一种手段。

  4. 阿Q的失败: 阿Q多次尝试改变自己的命运,但都以失败告终。例如,他曾试图追求吴妈,但被拒绝;他曾加入革命党,但被排斥。每次失败后,他都会通过精神胜利法来自我安慰。

  5. 阿Q的结局: 最终,阿Q因被误认为是革命党人而被捕,并被处以死刑。在临死前,他仍然试图通过精神胜利法来安慰自己,认为自己是“革命烈士”。

主题与意义

《阿Q正传》通过阿Q这个典型人物,鲁迅揭示了当时中国社会的病态和人民的精神困境。阿Q的精神胜利法反映了人们在面对困境时,通过自欺欺人和幻想来获得心理上的安慰。这种心理状态不仅是个人的悲剧,更是社会的病态。

鲁迅通过阿Q的形象,批判了当时中国社会的封建势力和人民的麻木不仁。他希望通过这部小说,唤醒人们的觉悟,让他们正视现实,积极面对生活中的挑战,而不是通过自欺欺人来逃避问题。

结语

《阿Q正传》不仅是一部文学作品,更是一部社会批判的经典。阿Q的形象和他的精神胜利法,成为了中国文学史上的经典符号,具有深刻的现实意义和历史意义。通过这部小说,鲁迅向读者传达了对社会现状的深刻反思和对未来的期望。

阿Q和他的精神胜利法是鲁迅对中国社会的一种深刻反思。通过这个形象,鲁迅揭示了当时社会的病态和人民的精神困境。阿Q的故事不仅在当时引起了广泛的关注和讨论,也在今天仍具有重要的现实意义。我们可以从中看到人们在面对困境时的心理机制,同时也提醒我们要正视现实,积极面对生活中的挑战,而不是通过自欺欺人来逃避问题。

部署文档网站

· 阅读需 2 分钟
DingZhiyu
2023 Para team number

官方安装文档

知乎简洁教程

Ubuntu配置docusaurus环境

安装nodejs

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

安装Yarn

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt update
sudo apt install yarn

安装

npx create-docusaurus@latest my-website classic

Rocky linux配置docusaurus环境

安装nodejs

curl -fsSL https://rpm.nodesource.com/setup_20.x | bash -
yum install -y nodejs

安装Yarn

curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
sudo dnf install yarn

安装

npx create-docusaurus@latest my-website classic

运行

cd my-website
npm start -- --port 5000

导出部署

导出静态文件,导出到build文件夹中

npm run build

部署测试

npm run serve

项目结构

my-website
├── blog
│ ├── 2019-05-28-hola.md
│ ├── 2019-05-29-hello-world.md
│ └── 2020-05-30-welcome.md
├── docs
│ ├── doc1.md
│ ├── doc2.md
│ ├── doc3.md
│ └── mdx.md
├── src
│ ├── css
│ │ └── custom.css
│ └── pages
│ ├── styles.module.css
│ └── index.js
├── static
│ └── img
├── docusaurus.config.js
├── package.json
├── README.md
├── sidebars.js
└── yarn.lock

添加对Latex公式的支持

参考官方的教程官方Latex插件教程

记得看官方的示例

插件的KaTeX CSS添加错位置会导致公式渲染错误!!!!

(也可以参考这个站的配置文件)

经验

下面这种单独出现的大写字母要放在``里,不然会报错

image-20240502205849267

h t ml添加的图片不要加zoom,不然会报错

image-20240502210229835

Welcome

· 阅读需 1 分钟
Sébastien Lorber
Docusaurus maintainer
Yangshun Tay
Front End Engineer @ Facebook

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.

First Blog Post

· 阅读需 1 分钟
Gao Wei
Docusaurus Core Team

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