docs: Update README.md & add a README-zh.md (#144)

magic-akari · Sep 21, 2024 · 46e0335 · 46e0335
1 parent c3d9200
commit 46e0335
Show file tree

Hide file tree

Showing 2 changed files with 131 additions and 115 deletions.
diff --git a/README-zh.md b/README-zh.md
@@ -0,0 +1,111 @@
+<p align="center">
+    <a href="https://lrc-maker.github.io">
+        <img src="./public/favicons/apple-touch-icon.png" alt="logo" />
+    </a>
+</p>
+
+<div align="center">
+
+[English](./README.md) · [中文](./README-zh.md)
+
+</div>
+
+# [LRC Maker][lrc maker] &middot; [![Build](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml/badge.svg)](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml)
+
+## 这个项目是什么
+
+这是一个滚动歌词制作工具，滚动歌词是指带有时间标签的文本。
+
+## 为什么会有这个项目
+
+作者对于目前已有的工具不满意，无法跨平台使用，所以自己制作了一个。
+
+## 如何使用
+
+打开[歌词滚动姬][lrc maker]，即可开始，你可以把这个链接收藏到浏览器书签。
+
+开发分支版本链接:
+
+- https://magic-akari.github.io/lrc-maker/
+- https://lrc-maker.vercel.app/
+
+## 热键
+
+|                            按键                             |        功能        |
+| :---------------------------------------------------------: | :----------------: |
+|                      <kbd>space</kbd>                       |    插入时间标签    |
+|   <kbd>backspace</kbd> / <kbd>delete</kbd> / <kbd>⌫</kbd>   |    移除时间标签    |
+| <kbd>ctrl</kbd><kbd>enter↵</kbd> / <kbd>⌘</kbd><kbd>↩</kbd> |    播放 / 暂停     |
+|                 <kbd>←</kbd> / <kbd>A</kbd>                 |     回退 5 秒      |
+|                 <kbd>→</kbd> / <kbd>D</kbd>                 |     前进 5 秒      |
+|         <kbd>↑</kbd> / <kbd>W</kbd> / <kbd>J</kbd>          |     选择上一行     |
+|         <kbd>↓</kbd> / <kbd>S</kbd> / <kbd>K</kbd>          |     选择下一行     |
+|                 <kbd>-</kbd> / <kbd>+</kbd>                 | 当前行时间标签微调 |
+|   <kbd>ctrl</kbd><kbd>↑</kbd> / <kbd>⌘</kbd><kbd>↑</kbd>    |    提高播放速度    |
+|   <kbd>ctrl</kbd><kbd>↓</kbd> / <kbd>⌘</kbd><kbd>↓</kbd>    |    降低播放速度    |
+|                        <kbd>R</kbd>                         |    重置播放速度    |
+
+## 兼容性
+
+本项目的目标是兼容大部分现代浏览器，当前版本使用了很多的现代浏览器 API 来提升效能，改善用户体验。
+本项目使用了 ES Module 来加载代码，这意味着浏览器的版本应该满足下列要求。
+
+| 浏览器  | 版本  |
+| :------ | :---- |
+| EDGE    | >= 16 |
+| Firefox | >= 60 |
+| Chrome  | >= 61 |
+| Safari  | >= 11 |
+| ios_saf | >= 11 |
+
+<del>
+当前版本的 Edge 理论上应该支持，但是目前有不明原因导致代码加载后没有运行，这个问题留到 V8 内核的 Edge 发布后再做观察。
+</del>
+
+对 EDGE 浏览器低限度支持。
+
+对于没有 ES Module 支持的浏览器，仍然做了回退处理以便正常使用。注意：此部分没有进行测试，旧浏览器仍然可能遇到 css 的布局错乱问题。
+
+IE 等旧浏览器不再支持。对于这类浏览器使用者，可以使用本项目的[旧版本][version 3.x]。
+
+## 本地开发
+
+如果你想在本地计算机上运行这个项目，可以遵循下面操作。
+
+```bash
+# 克隆这个仓库
+git clone https://github.com/magic-akari/lrc-maker.git
+
+cd lrc-maker
+
+# 安装依赖
+npm i
+
+# 构建
+npm run build
+
+# 开发模式构建
+npm start
+```
+
+## 生产部署
+
+构建（`npm run build`）后，`build` 文件夹是静态网站文件。
+您可以将其部署到任何 CDN 或静态文件服务器。
+
+您还可以使用此存储库根目录下的 `Dockerfile` 构建一个 docker 镜像。
+它运行构建并创建最小化的 nginx 镜像。
+
+```bash
+# 构建
+docker build -t lrc-maker .
+# 创建一个容器并在 8080 端口提供服务
+docker run -d -p 8080:80 lrc-maker
+```
+
+## 给这个项目点一个星星 :star:
+
+如果你喜欢这个项目，请点一个星星吧 :star:，分享这个项目来帮助更多的人。
+
+[lrc maker]: https://lrc-maker.github.io
+[version 3.x]: https://lrc-maker.github.io/3.x
diff --git a/README.md b/README.md
@@ -4,15 +4,19 @@
     </a>
 </p>
 
-# [LRC Maker][lrc maker] &middot; [![Build](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml/badge.svg)](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml)
+<div align="center">
+
+[English](./README.md) · [中文](./README-zh.md)
+
+</div>
 
-[中文](#这个项目是什么)
+# [LRC Maker][lrc maker] &middot; [![Build](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml/badge.svg)](https://github.com/magic-akari/lrc-maker/actions/workflows/build.yml)
 
 ## What is this
 
 This repository is a tool which helps you create your lrc file.
 
-## why lrc-maker
+## Why lrc-maker
 
 It's hard to find a user-friendly and cross-platform tool to create lrc. So I made one myself.
 
@@ -29,19 +33,19 @@ Development branch links:
 
 ## Hotkeys
 
-|                                key                                |         function         |
-| :---------------------------------------------------------------: | :----------------------: |
-|                         <kbd>space</kbd>                          |  insert time stamp tag   |
-|        <kbd>delete</kbd> / <kbd>⌘</kbd>+<kbd>delete</kbd>         |  remove time stamp tag   |
-| <kbd>ctrl</kbd>+<kbd>enter</kbd> / <kbd>⌘</kbd>+<kbd>return</kbd> |       play / pause       |
-|                    <kbd>←</kbd> / <kbd>a</kbd>                    | step backward 5 seconds  |
-|                    <kbd>→</kbd> / <kbd>d</kbd>                    |  step forward 5 seconds  |
-|            <kbd>↑</kbd> / <kbd>w</kbd> / <kbd>j</kbd>             |   select previous line   |
-|            <kbd>↓</kbd> / <kbd>s</kbd> / <kbd>k</kbd>             |     select next line     |
-|                    <kbd>-</kbd> / <kbd>+</kbd>                    | adjust selected time tag |
-|     <kbd>ctrl</kbd>+<kbd>↑</kbd> / <kbd>⌘</kbd>+<kbd>↑</kbd>      |  speed up playback rate  |
-|     <kbd>ctrl</kbd>+<kbd>↓</kbd> / <kbd>⌘</kbd>+<kbd>↓</kbd>      | speed down playback rate |
-|                           <kbd>r</kbd>                            |   reset playback rate    |
+|                             key                             |         function         |
+| :---------------------------------------------------------: | :----------------------: |
+|                      <kbd>space</kbd>                       |  insert time stamp tag   |
+|   <kbd>backspace</kbd> / <kbd>delete</kbd> / <kbd>⌫</kbd>   |  remove time stamp tag   |
+| <kbd>ctrl</kbd><kbd>enter↵</kbd> / <kbd>⌘</kbd><kbd>↩</kbd> |       play / pause       |
+|                 <kbd>←</kbd> / <kbd>A</kbd>                 | step backward 5 seconds  |
+|                 <kbd>→</kbd> / <kbd>D</kbd>                 |  step forward 5 seconds  |
+|         <kbd>↑</kbd> / <kbd>W</kbd> / <kbd>J</kbd>          |   select previous line   |
+|         <kbd>↓</kbd> / <kbd>S</kbd> / <kbd>K</kbd>          |     select next line     |
+|                 <kbd>-</kbd> / <kbd>+</kbd>                 | adjust selected time tag |
+|   <kbd>ctrl</kbd><kbd>↑</kbd> / <kbd>⌘</kbd><kbd>↑</kbd>    |  speed up playback rate  |
+|   <kbd>ctrl</kbd><kbd>↓</kbd> / <kbd>⌘</kbd><kbd>↓</kbd>    | speed down playback rate |
+|                        <kbd>R</kbd>                         |   reset playback rate    |
 
 ## Compatibility
 
@@ -83,8 +87,6 @@ npm run build
 
 # or build with watch mode
 npm start
-# and run dev server
-npm run dev-server
 ```
 
 ## Deployment in Production
@@ -108,102 +110,5 @@ If you like give us a star :star: Share this project to help more people.
 
 ---
 
-## 这个项目是什么
-
-这是一个滚动歌词制作工具，滚动歌词是指带有时间标签的文本。
-
-## 为什么会有这个项目
-
-作者对于目前已有的工具不满意，无法跨平台使用，所以自己制作了一个。
-
-## 如何使用
-
-打开[歌词滚动姬][lrc maker]，即可开始，你可以把这个链接收藏到浏览器书签。
-
-开发分支版本链接:
-
-- https://magic-akari.github.io/lrc-maker/
-- https://lrc-maker.vercel.app/
-
-## 热键
-
-|                               按键                                |        功能        |
-| :---------------------------------------------------------------: | :----------------: |
-|                         <kbd>space</kbd>                          |    插入时间标签    |
-|        <kbd>delete</kbd> / <kbd>⌘</kbd>+<kbd>delete</kbd>         |    移除时间标签    |
-| <kbd>ctrl</kbd>+<kbd>enter</kbd> / <kbd>⌘</kbd>+<kbd>return</kbd> |    播放 / 暂停     |
-|                    <kbd>←</kbd> / <kbd>a</kbd>                    |     回退 5 秒      |
-|                    <kbd>→</kbd> / <kbd>d</kbd>                    |     前进 5 秒      |
-|            <kbd>↑</kbd> / <kbd>w</kbd> / <kbd>j</kbd>             |     选择上一行     |
-|            <kbd>↓</kbd> / <kbd>s</kbd> / <kbd>k</kbd>             |     选择下一行     |
-|                    <kbd>-</kbd> / <kbd>+</kbd>                    | 当前行时间标签微调 |
-|     <kbd>ctrl</kbd>+<kbd>↑</kbd> / <kbd>⌘</kbd>+<kbd>↑</kbd>      |    提高播放速度    |
-|     <kbd>ctrl</kbd>+<kbd>↓</kbd> / <kbd>⌘</kbd>+<kbd>↓</kbd>      |    降低播放速度    |
-|                           <kbd>r</kbd>                            |    重置播放速度    |
-
-## 兼容性
-
-本项目的目标是兼容大部分现代浏览器，当前版本使用了很多的现代浏览器 API 来提升效能，改善用户体验。
-本项目使用了 ES Module 来加载代码，这意味着浏览器的版本应该满足下列要求。
-
-| 浏览器  | 版本  |
-| :------ | :---- |
-| EDGE    | >= 16 |
-| Firefox | >= 60 |
-| Chrome  | >= 61 |
-| Safari  | >= 11 |
-| ios_saf | >= 11 |
-
-<del>
-当前版本的 Edge 理论上应该支持，但是目前有不明原因导致代码加载后没有运行，这个问题留到 V8 内核的 Edge 发布后再做观察。
-</del>
-
-对 EDGE 浏览器低限度支持。
-
-对于没有 ES Module 支持的浏览器，仍然做了回退处理以便正常使用。注意：此部分没有进行测试，旧浏览器仍然可能遇到 css 的布局错乱问题。
-
-IE 等旧浏览器不再支持。对于这类浏览器使用者，可以使用本项目的[旧版本][version 3.x]。
-
-## 本地开发
-
-如果你想在本地计算机上运行这个项目，可以遵循下面操作。
-
-```bash
-# 克隆这个仓库
-git clone https://github.com/magic-akari/lrc-maker.git
-
-cd lrc-maker
-
-# 安装依赖
-npm i
-
-# 构建
-npm run build
-
-# 开发模式构建
-npm start
-# 运行 dev-server
-npm run dev-server
-```
-
-## 生产部署
-
-构建（`npm run build`）后，`build` 文件夹是静态网站文件。
-您可以将其部署到任何 CDN 或静态文件服务器。
-
-您还可以使用此存储库根目录下的 `Dockerfile` 构建一个 docker 镜像。
-它运行构建并创建最小化的 nginx 镜像。
-
-```bash
-# 构建
-docker build -t lrc-maker .
-# 创建一个容器并在 8080 端口提供服务
-docker run -d -p 8080:80 lrc-maker
-```
-
-## 给这个项目点一个星星 :star:
-
-如果你喜欢这个项目，请点一个星星吧:star:，分享这个项目来帮助更多的人。
-
 [lrc maker]: https://lrc-maker.github.io
 [version 3.x]: https://lrc-maker.github.io/3.x