Skip to content

Latest commit

 

History

History
314 lines (211 loc) · 9.04 KB

开发日志.md

File metadata and controls

314 lines (211 loc) · 9.04 KB
Raw

开发日志

​ 以前做项目陷入了一个误区，就是想方设法实现这个功能，而对于如何实现这个功能其实不太关心，这样在学习阶段是错误的，东拼西凑即使做出来也没有什么借鉴提升的意义，这里就详细记录开发过程中出现的问题和初始化方法，后面项目复盘可以参考

UI 设计

抄一些别人的 UI 设计

image-20240413213823564

第一天

新建 Git 仓库

遇到 Github 新建仓库默认的分支是 main，但是 git init 的是 master，如何更改成 main

本地新建分支

git branch main

切换分支

git checkout main

从远程仓库合并内容到本地 后面的参数是为了解决fatal: refusing to merge unrelated histories这个问题

git pull origin main --allow-unrelated-histories

推送到远程

git push origin main

初始化项目

本项目采用的是 React+Ant design pro，首先肯定是集成这些框架

  1. 启动 Ant Design Pro 在自己要创建的项目目录初始化项目
npm i @ant-design/pro-cli -g
pro create myapp
  1. 安装依赖(不开代理使用 yarn 默认的 registy 花了 8 分钟)
yarn install

这一步时候报错了，看网上的解释是因为淘宝镜像到期了，需要更换代理

yarn config get registry
yarn config set registry https://registry.npmmirror.com

发现仍然解决不了问题，去C://Users//用户名// .yarnrc 文件删除了即可，因为这个文件记录了我之前的代理信息

  1. 启动项目
yarn run dev	# 启动mock数据
yarn run start	# 不启动mock数据

提交规范

💥 feat(模块): 添加了个很棒的功能
🐛 fix(模块): 修复了一些 bug
📝 docs(模块): 更新了一下文档
🌷 UI(模块): 修改了一下样式
🏰 chore(模块): 对脚手架做了些更改
🌐 locale(模块): 为国际化做了微小的贡献
refactor, perf, workflow, build, CI, typos, tests, types, wip, release, dep
  1. 精简项目

项目目录有很多是不需要的，比如单元测试、国际化和一些其他的无用代码，这个时候根据自己需要删除一部分

移除国际化

yarn run i18n-remove

移除之后会报错，解决方法是全局搜索 SelectLang 这个组件，只有两部分，把有关 SelectLang 的组件删除了就可以了

替换 public 目录下的 logo 和 ico、删除public/pro_icon、

删除src/locales

删除jest.config.ts、tests文件夹

关于 mock 数据，暂时不删除，因为本项目暂时没有后端，就是简单的 mock 一下，登录注册后续延伸

自定义登录注册页面

  1. 自定义登录注册页面

在src/pages/User/index.tsx定制登录页面，修改页面样式即可。具体的修改是修改一些文字，mock 数据的密码改成 github-readme-stats++

ant design pro 没有 Register 组件，因此注册页面常常也使用 LoginForm 组件，具体更改登录这个文字的方式是加上这行配置

submitter={{ searchConfig: { submitText: '注册', }}}

自定义导航栏

image-20240414155855920

将导航栏放到上面（使用 ant design pro 自带的设置），需要自定义修改 logo 在 defaultSettings 里面修改 title 和 logo 的路径即可。

由于本项目不一定需要用户去登录，因此我去 app.tsx 里面修改了拦截器的逻辑，如果没有登录仍然允许访问，把右侧的 RightContent 里面的 loading 效果改成了一个去登录的按钮。

?号改成了本项目的 Github 地址

底部 copyright 的修改，新版本放到 components 下面的 Footer 了，需要添加一个与 links 统计的

copyright = '@AlbertZhang 2024';

页面渲染 html

如何继承显示 markdown 的插件，使用 react-markdown，想要在 markdown 中同时渲染 html，使用 rehype-raw 插件，具体使用方式

remarkjs/react-markdown：React 的 Markdown 组件 (github.com)

非常的鸡肋，我套一个 p 标签就识别不出来，html 应该是和 md 分开渲染的

<p align="center">
  [![AlbertZhang's WakaTime
  stats](https://github-readme-stats.vercel.app/api/wakatime?username=AlbertZhang)](https://github.com/anuraghazra/github-readme-stats)
</p>

第二天

html 格式问题

渲染的时候更新 html 标签出现了一些问题，主要这个渲染的太严格了，我为了可读性对每个参数换行都渲染不出来，咱也没有深究原理，具体在于，对于 html 标签，一定不要前后留空格，比如这样可以

<div class="note">

Some *emphasis* and <strong>strong</strong>!

</div>
// 这样就不行
<div class="note">

Some *emphasis* and <strong>strong</strong>!

	</div>

但是这样可以，编辑器自动格式化的

setMarkdown(
  `<img   align="${value?.align}" src="https://github-readme-stats.vercel.app/api?username=${
    value?.username
  }&locale=${value?.language}&line_height=33&show_icons=${value?.icon}&hide=${checkedValues.join(
    ',',
  )}&theme=${value?.theme}"/>`,
);

ant design 取色器

获取取色器中的 16 进制（如#ffffff）使用下面代码（下面对#号进行了转义）

value.logoColor =
  typeof value?.logoColor === 'string'
    ? value?.logoColor?.replace('#', '%23')
    : value?.logoColor.toHexString()?.replace('#', '%23');

关于集成 message 提示

import { message } from 'antd';
const [messageApi, contextHolder] = message.useMessage();
{
  contextHolder;
} // 模版使用占位
messageApi.success('删除成功'); // 编程式调用

第三天

GithubActions 发布

由于本项目没有服务端，因此使用 Github Actions 方便还节约成本。在打包时候，使用 ant design pro 预设的命令

yarn run deploy

在部署和打包时，需要配置，不然路径会找不到

  1. package.json 里面添加配置项，仓库名
"homepage": "https://azcodingaccount.github.io/github-readme-stats-plus",
  1. config.ts 更改为 hash 模式
  history: {
    type: 'hash',
  },

或者开启 exportStatic（亲测没用，配置项太复杂，使用 hash 模式吧）

 exportStatic: {
    // 忽略预渲染失败的错误
    ignorePreRenderError: true,
  },
  1. config.ts 更改 publicPath 为相对路径（如果不使用 hash，直接使用./会报错）
  publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
  1. config.ts 配置 favicon.ico 文件
  favicons: ['https://azcodingaccount.github.io/github-readme-stats-plus/favicon.ico','./favicon.ico'],

用到 logo 的地方引用全部改成相对引用

更新自定义域名

与之前部署 vitepress 类似，在域名提供商配置一个 CNAME 记录，需要注意的是，CNAME 记录的记录值可以一样，比如我的都是azcodingaccount.github.io.，只需要在 Github 仓库 setting 自定义域名输入子域名即可，Github 服务器会自动处理转发。这次不需要配置路径

第四天

​ 按道理就应该告一段落了，但是虽然说没有后端，但是前端那个生成记录的功能还是做一下，练习一下 zustand，至于为什么选择 zustand 不使用 Redux 或者 umi 的 useModel、Dva，主要是这个比较简便，Top2，并且 ant design pro 系的我是不咋敢用了，更新太快,每次用都有学习成本

18 Best React State Management Libraries in 2024 (fe-tool.com)

zustand 使用

安装 zustand

yarn add zustand

配置持久化

import create from 'zustand';
import { persist } from 'zustand/middleware';

// 存储卡片生成的信息
const createCardStore = create(
  persist(
    (set) => ({
      infoStatus: [],
      addInfoStatus: (info) =>
        set((state) => {
          state.infoStatus.unshift(info);
          return { infoStatus: [...state.infoStatus] };
        }), // 新增Github信息统计卡
      delInfoStatus: (id) =>
        set((state) => ({ infoStatus: state.infoStatus.filter((item) => item.id !== id) })), // 删除信息统计卡
    {
      name: 'card',		// localStorage中
      getStorage: () => localStorage,
    },
  ),
);

export default createCardStore;

生成记录这部分需要记录生成的内容，格式是这样的

{
  "id": "timestamp",
  "code": "生成代码",
  "type": "生成的卡片或徽章类型",
  "genTime": "生成时间"
}

优化用户体验

有时候默认的预设用户可能不喜欢，每次生成都需要修改预设有些麻烦，因此顺便把每次用户生成的预设也给存储到了 localStorage，页面打开时候从 zustand 中读取

卡片生成没有配置，因为我认为一次性的概率比较大，很少会有人生成多个卡片，徽章的制作倒是会进行重复制作