前端

React

Android

sitemap简单来说就是网站地图,通过可视化的形式,展示网站的主要结构,目的是方便搜索引擎以及用户更快的找到你的页面。不同框架有不同的生成方法,下面介绍nextjs框架的:
### 安装next-sitemap
```bash
yarn add next-sitemap -D
```
### 创建配置文件next-sitemap.js
```javascript
/** @type {import('next-sitemap').IConfig} */

module.exports = {
  siteUrl: process.env.SITE_URL || 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}
```
### 添加指令
```json
{
  "build": "next build",
  "postbuild": "next-sitemap"
}
```
这样构建的时候就会自动生成sitemap。但是可能其中有一些路由不需要生产sitemap，这时候在`next-sitemap.js`里配置`exclude`,配置那些页面文件路径,生成的时候就不会存在那些页面地址了。
sitemap适合于任何的搜索引擎,但是如果等待搜索引擎的蜘蛛去爬取,可能需要很长时间,所以我们需要手动提交到那些搜索引擎网站,让他们主动收录。下面列举几个常用的搜索引擎:
## 增加百度收录
百度收录的网站是[https://ziyuan.baidu.com](https://ziyuan.baidu.com) 。点击右上角搜索服务，然后点击普通收录，进入后会出现新增网站的链接，添加相关信息以后，即可以正常操作。

![Snipaste_2022-03-14_15-14-48.png](https://image.lookenghua.cn/article/2022-03-14/15/1647242117353-93ae.png)
在普通收录下面有三种提交方式，API提交、sitemap、还有手动提交。百度的sitemap和一般网站的sitemap要求不一样，详情可见 [https://ziyuan.baidu.com/college/courseinfo?id=267&page=3#h2_article_title0](https://ziyuan.baidu.com/college/courseinfo?id=267&page=3#h2_article_title0)。

## Google收录
google的收录配置网站是 [https://search.google.com/search-console/about](https://search.google.com/search-console/about)。

![微信截图_20220314152825.png](https://image.lookenghua.cn/article/2022-03-14/15/1647242925644-5779.png)
选择任意一种方式验证,验证完成进入控制台,点击左侧网址检查,打开页面后选择请求编入索引。


![微信图片_20220314162106.png](https://image.lookenghua.cn/article/2022-03-14/16/1647246086383-9e81.png)
接着点击左侧站点地图,在页面里添加站点地图

![微信截图_20220314162235.png](https://image.lookenghua.cn/article/2022-03-14/16/1647246305949-dffe.png)
此时google就会根据地址一级一级的缓存网站地图。

## 检验是否收录
在搜索引擎的搜索框里使用`site:域名`,来确认搜索引擎是否收录。
## 常用搜索引擎收录平台
1. Bing - [https://www.bing.com/webmasters/about?cc=www](https://www.bing.com/webmasters/about?cc=www) (支持从google收录平台导入数据)
2. 360站长平台 - [https://zhanzhang.so.com/](https://zhanzhang.so.com/)



SEO优化-Sitemap

`Modifier.clickable()`进行点击的时候会有水波纹效果,如何去除这个效果呢?有以下两个方法:
## 1.将indication设为nul
```kotlin

modifier = Modifier
            .clickable(onClick = {}, indication = null, interactionSource = remember {
                MutableInteractionSource()
            })
```

## 2.使用pointerInput设置点击事件
```kotlin
modifier = Modifier
                .pointerInput(Unit) {
                    detectTapGestures(
                    // 长按事件
                    onLongPress = {}, 
                    // 点击事件
                    onTap = { })
                }
```

Jetpack Compose如何禁用涟漪（水波纹）效果

## 1. Penpot(原型、UI设计工具)
**官网:**[https://help.penpot.app/](https://help.penpot.app/)

![68747470733a2f2f70656e706f742e6170702f696d616765732f726561646d652f686f6d652d75692e6a7067.jpg](https://image.lookenghua.cn/article/2022-03-21/22/1647874571369-be10d.jpg)

## 2. Supabase(开源firebase)
**官网:**[https://supabase.com/](https://supabase.com/)

![68747470733a2f2f73757061626173652e636f6d2f646f63732f6173736574732f696d616765732f73757061626173652d6172636869746563747572652d39303530613733313765396563376566623738303766353139343132326534382e706e67.png](https://image.lookenghua.cn/article/2022-03-23/23/1648050322737-4f1d.png)

## 3.OpenSumi(开源IDE)
**官网:**[https://opensumi.com/zh](https://opensumi.com/zh)

![O1CN01uIRRRl1wmLkN9geV3_!!6000000006350-2-tps-2844-1830.png](https://image.lookenghua.cn/article/2022-03-27/11/1648350933381-1c67.png)

## Nettu Meet(视频会议系统)
**官网:**[https://github.com/fmeringdal/nettu-meet](https://github.com/fmeringdal/nettu-meet)

![app.png](https://image.lookenghua.cn/article/2022-04-25/18/1650881949051-6e65.png)

开源产品推荐

## 1.[mavonEditor](https://github.com/hinesboy/mavonEditor) ![GitHub Repo stars](https://img.shields.io/github/stars/h//mavonEditor?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/hinesboy/mavonEditor)

![cn-image.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650428593607-55d2.gif)
## 2.[Vditor](https://github.com/Vanessa219/vditor) ![GitHub Repo stars](https://img.shields.io/github/stars/Vanessa219/vditor.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/Vanessa219/vditor)

- 支持所见即所得模式
- 即时渲染类似于typeora

![wysiwyg-4f216b9b.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650429593393-132a.gif)


![ir-67cd956c.gif](https://image.lookenghua.cn/article/2022-04-20/12/1650430013906-1082c.gif)


## 3.[TOAST UI Editor](https://github.com/nhn/tui.editor) ![GitHub Repo stars](https://img.shields.io/github/stars/nhn/tui.editor.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/nhn/tui.editor)

![121808231-767b0f80-cc92-11eb-82a0-433123746982.png](https://image.lookenghua.cn/article/2022-04-20/13/1650430863641-f445.png)

![121808381-251f5000-cc93-11eb-8c47-4f5a809de2b3.png](https://image.lookenghua.cn/article/2022-04-20/13/1650430865057-4718.png)

## 4.[Editor.md](https://github.com/pandao/editor.md) ![GitHub Repo stars](https://img.shields.io/github/stars/pandao/editor.md.svg?style=social) ![GitHub last commit](https://img.shields.io/github/last-commit/pandao/editor.md)

- 支持 ToC（Table of Contents）、Emoji表情、Task lists、@链接等 Markdown 扩展语法；
- 支持 TeX 科学公式（基于 KaTeX）、流程图 Flowchart 和 时序图 Sequence Diagram;
![68747470733a2f2f70616e64616f2e6769746875622e696f2f656469746f722e6d642f6578616d706c65732f696d616765732f656469746f726d642d73637265656e73686f742e706e67.png](https://image.lookenghua.cn/article/2022-04-20/13/1650431509931-5672.png)


开源Markdown库推荐

## 1. 部署平台
**1. [Vercel](https://vercel.com/)**
支持Nextjs、Svelte、Nuxt.js、Gatsby.js、Angular等常见前端框架部署,支持自动配置https,支持部署Serverless接口

## 2. 数据库
**1. [MongoDB Atlas](https://cloud.mongodb.com/)**
- 类型: MongoDB
- 大小: 512MB
- 支持香港节点等数十个节点

**2. [CloudAMQP](https://www.cloudamqp.com/)**
- 类型: rabbitmq

**3. [CloudKarafka](https://www.cloudkarafka.com/)**
- 类型: kafka

**4. [RedisLabs](https://app.redislabs.com/)**
- 类型: redis
- 大小: 30MB
**5. [upstash](https://upstash.com/)**
- 类型:redis,kafka
- 大小:10k访问次数

## 3.客服聊天系统
**1. [Chatra](https://chatra.com/cn/)**
- 介绍:支持一个客服,在线和离线聊天Widget

免费开发资源平台

## 1. word-count
**简介:** 计算CJK字符数

## 2. select-files
**简介:** 动态创建input框,以API形式选择文件

## 3. concurrently
**简介:** 同时并行运行多个指令,相互之间不影响

![demo.gif](https://image.lookenghua.cn/article/2022-03-29/11/1648523547076-41b4.gif)

## 4.chalk
**简介:** 美化控制台字符串输出,显示彩色文字和背景色

## 5.wait-on
**简介:** 等待网路请求,页面,文件,端口,socket启动

每周了解10个NPM包 第一周

1.Radix
**官网:** [https://www.radix-ui.com/](https://www.radix-ui.com/)

![微信截图_20220319125738.png](https://image.lookenghua.cn/article/2022-03-19/12/1647665897410-8f4c.png)

![微信截图_20220319125805.png](https://image.lookenghua.cn/article/2022-03-19/12/1647665897788-ad70.png)

React组件库

## 日期
### 1. Day.js
**首页地址:** [https://github.com/iamkun/dayjs](https://github.com/goldfire/howler.js)
**特点:**体积小,仅2kb大小

## 音频播放器
### 1.howler.js
**首页地址:**[https://github.com/goldfire/howler.js](https://github.com/goldfire/howler.js)
**特点:** 
1. 兼容性强默认支持Web Audio,IE上自动转换成HTML Audio
2. 自动捕捉用户操作激活（解禁）声音播放,不受必须监听用户操作限制
3. 支持的格式多,常用类型文件都支持

## 富文本编辑器
### 1.wangEditor

![demo-pic.png](https://image.lookenghua.cn/article/2022-03-16/14/1647412632060-1670.png)
**首页地址:**[https://www.wangeditor.com/](https://www.wangeditor.com/)
**使用平台:**兼容主流 PC 浏览器，IE11+,不支持ipad和移动端
**demo:**[https://codepen.io/xiaokyo-the-bold/pen/ZEpWByR](https://codepen.io/xiaokyo-the-bold/pen/ZEpWByR)



常用JS开发库-原生篇

## 1.GitToolBox
可以在每一行查看上次提交的信息,提交人,可以根据左侧的颜色,了解本次操作是修改,删除还是新增

![Snipaste_2022-03-16_09-56-24.png](https://image.lookenghua.cn/article/2022-03-16/10/1647396906878-ef61.png)

![Snipaste_2022-03-16_09-56-42.png](https://image.lookenghua.cn/article/2022-03-16/10/1647396940279-49a2.png)

## 2.Rainbow Brackets(彩虹括号)
让一对的括号显示成一种颜色,不同对的快显示成不同的颜色,方便用户区分。
![1825757-20191202154819892-2080431276.png](https://image.lookenghua.cn/article/2022-03-16/10/1647397230017-9c107.png)

## 3.CodeGlance2(代码缩略图)
原本有一个叫CodeGlance的插件,貌似作者不维护了,新版本无法使用。右侧缩略图可以快速滑动到对应位置。

![Snipaste_2022-03-16_10-34-47.png](https://image.lookenghua.cn/article/2022-03-16/10/1647398121929-1e20.png)

## 4.Grep console
自定义日志颜色，idea控制台可以彩色显示各种级别的log，安装完成后，在console中右键就能打开。

![screenshot_17407.png](https://image.lookenghua.cn/article/2022-03-16/10/1647398665528-ca4d.png)

![screenshot_16117.gif](http://image.lookenghua.cn/article/2022-03-16/10/1647399238428-3c5b.gif)


IDEA系列常用插件:适用于IDEA、Webstorm、Goland、Pycharm、Phpstorm

上一张我们利用husky进行提交之前的一些脚本操作,但是我们对于commit message并没有做限制,如果提交的commit message不规范的话,很容易无法清晰明了的指导某次提交的目的。所以我们需要利用一些工具来校验和自动化填写大部分消息规范。
首先我们先来了解一下commit message的规范:
## 1.commit message format(信息域)
commit message一般分为三个部分Header，Body 和 Footer
```bash
<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>
其中，Header 是必需的，Body 和 Footer 可以省略

Example:
PS D:\git\pythonPractice> git log
commit 58a7a966acb9aa2fffc0e02c9ce3be64b8949991 (HEAD -> master)
Author: Zhiwei Tian <hebeitianzhiwei@outlook.com>
Date:   Fri Aug 17 17:38:36 2018 +0800

    feat(serve): add grpc server
```
### 1.1 HEAD
#### 1.1.1 type
`type`用于说明`commit`的类别,正常我们使用下面这几种
```bash
feat：新功能（feature）
fix：修补bug
docs：文档（documentation）
style： 格式（不影响代码运行的变动）
refactor：重构（即不是新增功能，也不是修改bug的代码变动）
test：增加测试
chore：构建过程或辅助工具的变动
```
#### 1.1.2 scope
`scope`用于说明 commit 影响的范围，比如数据层、控制层、视图层等等，视项目不同而不同。
#### 1.1.3 subject
`subject`是 commit 目的的简短描述，不超过50个字符。
### 1.2 Body
`Body`部分是对本次 commit 的详细描述，可以分成多行。下面是一个范例。
```
More detailed explanatory text, if necessary.  Wrap it to 
about 72 characters or so. 

Further paragraphs come after blank lines.

- Bullet points are okay, too
- Use a hanging indent
```
### 1.3 Footer
Footer 部分只用于两种情况。

（1）不兼容变动

如果当前代码与上一个版本不兼容，则 Footer 部分以BREAKING CHANGE开头，后面是对变动的描述、以及变动理由和迁移方法
```
BREAKING CHANGE: isolate scope bindings definition has changed.

    To migrate the code follow the example below:

    Before:

    scope: {
      myAttr: 'attribute',
    }

    After:

    scope: {
      myAttr: '@',
    }

    The removed `inject` wasn't generaly useful for directives so there should be no code using it.
```
（2）关闭 Issue

如果当前 commit 针对某个issue，那么可以在 Footer 部分关闭这个 issue 。
```
Closes #234
```
也可以一次关闭多个 issue 。
```
Closes #123, #245, #992
```

## 2.commitlint
首先安装一下两个依赖:
```bash
npm install --save-dev @commitlint/config-conventional @commitlint/cli
```
然后在项目根目录新建一个`commitlint.config.js`,内容如下
```javascript
module.exports = {
  extends: ["@commitlint/config-conventional"],
};
```
此时提交的话,并不会校验commit message,我们需要利用`husky`在git钩子下进行验证:
```bash
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'
```
git会在commit-msg这个钩子下进行校验我们的commit message。
### 3.commitizen
这个工具可以让我们自动提示在提交时所有必需的提交字段,不需要等到commitlint校验然后拒绝此次提交。
我们使用局部安装相关依赖:
```bash
npm install --save-dev commitizen
```
这时候我们可以使用`git cz`来提交代码,这时候就回出现以下的界面:

![add-commit.png](https://image.lookenghua.cn/article/2022-03-02/19/1646222372051-7482.png)
我们可以用键盘操作,选择相关信息。但是这些功能必需执行`git cz`才行,如果我们使用`git commit`就可以跳过这些步骤,所以我们需要强制使用`git cz`指令去提交,我们利用`husky`在`prepare-commit-msg`,添加以下内容:
```bash
exec < /dev/tty && npx cz --hook || true
```
## 4.自定义commitizen
[cz-customizable](https://github.com/leoforfree/cz-customizable)可以让我们自定义自己的代码提交规范。
至此我们就完成了自己的commit message规范了。