Update post

This commit is contained in:
DefectingCat
2022-08-18 17:20:37 +08:00
parent 177fae5948
commit 1849f84239
7 changed files with 748 additions and 773 deletions

View File

@ -1,7 +1,7 @@
import React from 'react';
import cn from 'classnames';
import loadingImage from 'assets/images/img/mona-loading-default.gif';
import loadingImageDimmed from 'assets/images/img/mona-loading-dimmed.gif';
import loadingImage from 'public/images/img/mona-loading-default.gif';
import loadingImageDimmed from 'public/images/img/mona-loading-dimmed.gif';
import Image from 'next/image';
import { useTheme } from 'next-themes';

View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import { GetUser } from 'lib/fetcher';
import Image from 'next/image';
import avatar from 'assets/images/img/avatar.svg';
import avatar from 'public/images/img/avatar.svg';
import { FiLink, FiMail, FiTwitter } from 'react-icons/fi';
type Props = {

View File

@ -8,6 +8,9 @@ import {
import skybox_example from 'public/images/p/how-to-load-a-background-with-threejs/Skybox_example.png';
import crawler from 'public/images/p/setting-up-docsearch-for-nextjs/cannot-login-to-algolia-crawler.png';
import indexFormat from 'public/images/p/setting-up-docsearch-for-nextjs/index-format.png';
import windowsEnv from 'public/images/p/my-develop-environmental/windows-environmentail.png';
import miniRouter1 from 'public/images/p/create-a-mini-router-for-react/router.webp';
import miniRouter4 from 'public/images/p/create-a-mini-router-for-react/image-20210823154009498.webp';
const data = {
sandpack: {
@ -24,6 +27,13 @@ const data = {
crawler,
indexFormat,
},
'dev-env': {
windowsEnv,
},
miniRouter: {
miniRouter1,
miniRouter4,
},
},
};

View File

@ -4,24 +4,9 @@ date: '2022-08-03'
tags: [JavaScript, React]
---
import Layout from 'layouts/MDXLayout';
import Image from 'components/mdx/Image';
import image1 from 'assets/images/p/create-a-mini-router-for-react/router.webp';
import image2 from 'assets/images/p/create-a-mini-router-for-react/Web架构.svg';
import image3 from 'assets/images/p/create-a-mini-router-for-react/迷你路由器.svg';
import image4 from 'assets/images/p/create-a-mini-router-for-react/image-20210823154009498.webp';
export const meta = {
title: '现代前端的Web应用路由-为React打造一个迷你路由器',
date: '2022-08-03',
tags: ['JavaScript', 'React'],
};
export default ({ children }) => <Layout {...meta}>{children}</Layout>;
路由不仅仅只是网络的代名词,它更像是一种表达路径的概念。与网络中的路由相似,前端中的页面路由也是带领我们前往指定的地方。
<Image src={image1} placeholder="" priority />
<Image src={images.miniRouter.miniRouter1} placeholder="" priority />
## 现代前端的 Web 应用路由
@ -29,7 +14,12 @@ export default ({ children }) => <Layout {...meta}>{children}</Layout>;
自那时起Web 服务器在设计和构造方面经历了很多发展前端也是。如今JavaScript 框架和浏览器技术已经足够先进,允许我们利用 JavaScript 在客户端渲染 HTML 页面,以至于 Web 应用可以采用更独特的前后的分离机制。在第一次由服务端下发了对应的 JavaScript 代码后,后续的工作就全部交给客户端 JavaScript。而后端服务器负责发送原始数据通常是 JSON 等。
<Image src={image2} alt="Web架构" />
<Image
src={'/images/p/create-a-mini-router-for-react/Web架构.svg'}
alt="Web架构"
width="732"
height="462"
/>
在旧架构中,动态内容由 Web 服务器生成,服务器会在数据库中获取数据,并利用数据渲染 HTML 模板发送给浏览器。每次切换页面都会获取新的由服务端渲染的页面发送给浏览器。
@ -57,7 +47,12 @@ React 是现代众多成熟的 SPA 应用框架之一,它自然也需要使用
首先来看下本次路由的基本工作原理,本质上很简单,我们需要一个可以渲染任意组件的父组件 `<Router />` 或者叫 `<router-view>` 之类的。然后再根据浏览器地址的变化,渲染注册路由时对应的组件即可。
<Image src={image3} alt="迷你路由器" />
<Image
src={'/images/p/create-a-mini-router-for-react/迷你路由器.svg'}
alt="迷你路由器"
width="916"
height="514"
/>
### 配置文件
@ -122,7 +117,7 @@ export default Router;
现在我们直接从地址栏访问对应的路由,我们的 Router 组件应该就可以根据已经注册好的路由配置文件来找到正确的组件,并将其渲染出来了。
<Image src={image4} alt="image-20210823154009498" />
<Image src={images.miniRouter.miniRouter4} alt="image-20210823154009498" />
### 切换路由

View File

@ -4,22 +4,15 @@ date: '2022-04-14'
tags: [Linux, Server]
---
import Layout from 'layouts/MDXLayout';
import Image from 'components/mdx/Image';
import image1 from 'assets/images/p/my-develop-environmental/logo.svg';
import image2 from 'assets/images/p/my-develop-environmental/windows-environmentail.png';
export const meta = {
title: '我的开发环境',
date: '2022-04-14',
tags: ['Linux', 'Server'],
};
export default ({ children }) => <Layout {...meta}>{children}</Layout>;
最近迁移了自己的小服务器,也顺便把本机的环境重新设置了一下,其中环节还是有点复杂的小细节的。所以打算整理下思路,方便以后再设置同样环境。
<Image src={image1} placeholder="" priority />
<Image
src={'/images/p/my-develop-environmental/logo.svg'}
width="1400"
height="787"
placeholder=""
priority
/>
## 对于服务器
@ -209,7 +202,7 @@ source $HOME/.cargo/env
对于 Windoiws 环境则需要在“设置”-“高级系统设置”-“环境变量”中添加对应的变量到用户/系统变量中。
<Image src={image2} alt="Windows environmentail" />
<Image src={images['dev-env'].windowsEnv} alt="Windows environmentail" />
当然这几个主要的变量可以放在 `.zshrc` 中,以后更新还会用到的。

View File

@ -1,9 +1,5 @@
import remarkFrontmatter from 'remark-frontmatter';
import composePlugins from 'next-compose-plugins';
// import { remarkCodeHike } from '@code-hike/mdx';
// import { createRequire } from 'module';
// const require = createRequire(import.meta.url);
// const theme = require('shiki/themes/nord.json');
const composedConfig = composePlugins([
/** @type {import('next').NextConfig} */

File diff suppressed because it is too large Load Diff

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 59 KiB