## React官网

新官网：[https://zh-hans.react.dev/](https://zh-hans.react.dev/)

## 编程环境

### Node.js

Node.js官网：[https://nodejs.org/en](https://nodejs.org/en)

也可以使用淘宝npm镜像下载对应的node版本：[https://npm.taobao.org/mirrors/node/](https://npm.taobao.org/mirrors/node/)

#### Linux Mint环境

    wget https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.xz
    tar -xvf node-v18.17.1-linux-x64.tar.xz
    mv node-v18.17.1-linux-x64 nodejs
    sudo mv nodejs /usr/local/

接下来建立软链接，使得命令全局可用：

    sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin
    sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin

将/usr/local/bin路径添加到PATH环境变量中：

    sudo chmod o+w /etc/profile
    echo "export PATH=/usr/local/bin:$PATH" >> /etc/profile
    sudo chmod o-w /etc/profile
    reboot

重启系统后，查看node版本:`node -v`，查看npm版本：`npm -v`。

### create-vite脚手架

Vite 需要 Node.js 版本 14.18+，16+。

    npm create vite@latest
    √ Project name: ... react-study
    √ Select a framework: » React
    √ Select a variant: » JavaScript + SWC

SWC是一个可扩展的基于Rust的平台，用于下一代快速开发工具，SWC在单线程上比Babel快20倍，在四核上快70倍。

安装脚手架依赖：

    cd react-study
    npm i

启动脚手架：

    npm run dev

### ESLint配置与Prettier配置

ESLint是代码规范插件，而Prettier是代码格式化插件。

    npm i vite-plugin-eslint

安装完进行相关的配置，在文件vite.config.js中引入eslintPlugin：

    import eslintPlugin from "vite-plugin-eslint"
    export default defineConfig({
    plugins: [
    react(),
    eslintPlugin({
    include: ["src/.jsx", "src/**/.jsx"],
    }),
    ],
    })

### sass预处理与classnames模块的使用

    npm i sass
    npm i classnames

## JSX

是JavaScript语法扩展，可以在JavaScript文件中书写类似HTML的标签。

1. JSX浏览器是不认识的，所以利用脚手架中的SWC或Babel进行编译，转换成浏览器能识别的代码
2. JSX and React是相互独立的东西。但它们经常一起使用，可以单独使用它们中的任意一个，JSX是一种语法扩展，而React则是一个JavaScript的库

### JSX语法与HTML的写法区别

对象和函数不能直接放到JSX {} 中，另外，这些值也不会渲染：布尔值、空字符、null、undefined。

如何对不渲染的值进行输出：{ JSON.stringify({age: 18}) }、{ undefined + '' }

让样式支持驼峰写法，在文件vite.config.js中添加：

    export default defineConfig({
    plugins: [],
    css: {
    modules: {
    localsConvention: 'camelCase',
    },
    },
    })

## 组件

### 数据类型

通信的数据可以通过组件的propTypes属性，配合第三方模块prop-types进行类型限定。

prop-types模块官网：[https://github.com/facebook/prop-types](https://github.com/facebook/prop-types)

    npm install --save prop-types

使用：

    import PropTypes from 'prop-types'
    function Welcome({ count }) {
    return <div>hello Welcome, {count}</div>
    }
    Welcome.propTypes = {
    count: PropTypes.number,
    }
    function App() {
    return (
    <div>
    hello App
    <Welcome count={123} />
    </div>
    )
    }
    export default App


前端React 18系统

## 背景

为什么抛弃WordPress？

1. 网站访问量极少，大部分是自用记录些笔记
2. 不想再买服务器了

为什么选择Hugo？

1. Hugo编译速度贼快
2. 有一款喜欢的Hugo主题

## 从WordPress导出数据

在 WordPress 仪表盘中，[工具] -> [导出] -> [下载导出的文件]。

## 搭建临时Hexo博客

### 安装node.js

node.js官方下载地址：[https://nodejs.org/en/](https://nodejs.org/en/)

设置npm淘宝镜像站：`npm config set registry https://registry.npm.taobao.org`。

切回官方镜像用：`npm config set registry http://www.npmjs.org`。

### 安装Git

Git官方下载地址：[https://git-scm.com/downloads](https://git-scm.com/downloads)

### 安装Hexo

运行下列命令安装Hexo：

    npm install -g hexo

新建一个Hexo博客：

    hexo init <folder>
    cd <folder>
    npm install

再安装 hexo-migrator-wordpress 插件：

    npm install hexo-migrator-wordpress --save

插件安装完成后，执行下列命令来迁移所有文章，source 可以是 WordPress 导出的文件路径或网址。

    hexo migrate wordpress <source>

文章很快就能出现在source/_posts目录下，转换效果非常棒。

## 修改文章属性

刚迁移完的每篇文章都有yaml配置，像这样：

    title: 3G壁纸
    tags:
      - 网站
    id: '73'
    categories:
      - - 软件
    comments: false
    date: 2022-01-10 22:05:31

直接丢到Hugo的posts文件夹里也没什么问题，但最好还是改一下。比如改成这样：

    author: abee
    categories:
    - 软件
    date: 2022-01-10 22:05:31
    draft: false
    title: 3G壁纸

可以使用下面的Python脚本来实现：

    # pip install pyyaml 安装 yaml 包
    import os
    import yaml
    import re
    path = "C:\Users\ec\Desktop\_posts"
    cnt = 0
    for file in os.listdir(path):
        if file[-3:] == ".md":  # 判断是否为md文件
            cnt += 1
            print(cnt, file)
    with open(os.path.join(path, file), "r+", encoding='utf-8') as f:
                all_text = f.read()
    yaml_text = re.findall("---([\s\S]*?)---", all_text)[0]  # 找到yaml字符串
            old_dic = yaml.safe_load(yaml_text)  # 用yaml库转字典对象
    new_dic = {
                "title": old_dic["title"],
                "author": "abee",
                "draft": False,
                "categories": old_dic['categories'][0],
                "tags": old_dic['tags'],
                "date": old_dic["date"]
            }
    yaml_res = yaml.safe_dump(new_dic, allow_unicode=True)  # 用yaml库将字典解析为yaml字符串
            res = all_text.replace(yaml_text, "\n"+yaml_res)
    post_id = old_dic["id"]
            os.mkdir(os.path.join(path, post_id))
            path_md = os.path.join(path, post_id)
            with open(os.path.join(path_md, 'index.md'), "w+", encoding='utf-8') as f:
                f.write(res)

## 安装Hugo

Hugo有两个版本：hugo和hugo_extended，怎么选？建议安装hugo_extended，很多功能，包括一些主题，都需要hugo_extended的支持。

Hugo官方下载地址：[https://github.com/gohugoio/hugo/releases](https://github.com/gohugoio/hugo/releases)

### 创建目录

例如，在D盘创建文件夹Hugo，在文件夹Hugo下创建文件夹bin和sites。

Hugo下载后，解压，将hugo.exe文件放到D:\Hugo\bin目录下。

### 配置环境变量

将Hugo添加到Windows的环境变量 PATH 中。

[此电脑] -> [属性] -> [高级系统设置] -> [环境变量] -> [系统变量] -> [Path] -> [编辑] -> [新建]，把D:\Hugo\bin加入环境变量。

打开cmd，输入hugo version，查看hugo是否添加成功。

### 搭建博客

    cd Hugo\sites
    hugo new site myblog

### 创建第一篇文章

    cd myblog
    hugo new posts/first_post.md

### 启动博客

    hugo serve -e production -D

-D 表示将草稿文件也进行渲染。
-e production，hugo serve 默认运行环境是 development，而 hugo 默认运行环境是 production。

### 添加主题

hugo没有自带主题，所以需要自己导入主题文件。

官网主题库：[https://themes.gohugo.io/](https://themes.gohugo.io/)

导入主题可以用 git clone 的方式，也可以到相应主题的github中下载zip文件然后解压到自己博客的themes文件夹中。

Hugo全局配置文件支持三种格式：toml，yaml，yml。这个配置文件可以直接从主题文件中的exampleSite 里copy到博客文件夹下，然后进行修改。

### 构建网站

    hugo

默认会在站点根目录的public/目录下生成对应的静态页面，可通过在命令行指定-d或者--destination参数来改变静态页面的存放路径，也可以通过在配置文件中设置publishDir来指定。

### public上传到github

    git init
    git add . # 添加当前目录下的所有文件到暂存区
    git commit -m "add post" # 生成版本
    git branch -M main
    git remote add origin git@github.com:用户名/仓库
    git push -u origin main


从WordPress迁移到Hugo完整过程

## 阅读APP

是一款使用Kotlin全新开发的开源的阅读软件，主要功能有：

- 自定义书源，自己设置规则，抓取网页数据，规则简单易懂，软件内有规则说明
- 列表书架，网格书架自由切换
- 书源规则支持搜索及发现，所有找书看书功能全部自定义，找书更方便
- 支持替换净化，去除广告替换内容很方便
- 支持本地TXT、EPUB阅读，手动浏览，智能扫描
- 支持高度自定义阅读界面，切换字体、颜色、背景、行距、段距、加粗、简繁转换等
- 支持多种翻页模式，覆盖、仿真、滑动、滚动等
- 软件开源，持续优化，无广告

## 源集合

阅读APP源集合：[https://legado.aoaostar.com/](https://legado.aoaostar.com/)

## 下载地址

官方：[https://github.com/gedoor/legado/releases](https://github.com/gedoor/legado/releases)

酷安[推荐]：[https://www.coolapk.com/apk/256030](https://www.coolapk.com/apk/256030)


阅读APP-Kotlin全新开发的开源阅读软件

## 火山写作

是字节跳动孵化的AI工具，免登录可对内容进行润色 / 改写 / 校对 10000 字，登录后不限字数，有提供浏览器插件。

在你输入文本时，火山写作将实时检测你的文本，并提供写作建议。让你在写作过程中不再担心用语错误和表达恰当性，从而更加专注于内容的创作。

目前支持的功能如下：
【中文】

- 错别字纠正

【英文】

- 拼写检查
- 语法检查
- 多风格润色：支持 通用/正式/礼貌/通俗 四种风格，帮助你在邮件、社交媒体等场景下找到更恰当的表达
- 多样化同义改写：帮助你探索表达的更多可能性，提升表达丰富度

火山写作可以帮助你在写作中更加专注、准确、流畅地表达。无论你是在写中文还是英文，无论是在写作业还是邮件。试试火山写作，让写作变得更简单、更高效！

## 网站地址

火山写作：[https://www.writingo.net/](https://www.writingo.net/)


火山写作-免登录提供语法纠错/语句润色/智能改写等功能

## Yesicon

是一个免费开源高质量矢量图标下载网站，收录了全球157个图标集，18万+矢量图标集合，可以直接复制、下载 SVG/PNG 等格式图标，支持快速定制图标颜色、大小和代码风格，供开发者和设计者一键复制下载，网站支持中英文等语言，支持搜索查找。

## 网站地址

Yesicon：[https://yesicon.app/](https://yesicon.app/)

作者新出的一个 Emoji 搜索引擎：[https://searchemoji.app/zh-hans](https://searchemoji.app/zh-hans)

## 类似网站

- Iconoir：[https://iconoir.com/](https://iconoir.com/)


Yesicon-免费开源高质量矢量图标下载

这里是 aboss.top 的自留地。写了十几年野路子代码，攒了些摸爬滚打的经验，做成系列课程慢慢讲；也留了一小块地方，记记代码之外的胡思乱想。