usage page

src/components/Header.astro

@@ -13,6 +13,9 @@ import { Icon } from 'astro-icon/components'
     <li class="menu-item">
       <a href="/blog/">Blog</a>
     </li>
+    <li class="menu-item">
+      <a href="/usage/">Usage</a>
+    </li>
     <li class="menu-item">
       <a href="/Privacy/">Privacy</a>
     </li>

src/pages/usage/index.mdx

@@ -0,0 +1,72 @@
+---
+layout: ../../layouts/MarkdownLayout.astro
+title: Usage
+---
+import { Image } from 'astro:assets'
+import login1 from './login1.png'
+import login2 from './login2.png'
+import selectedWorkbook from './select-workbook.png'
+import collectWord from './collect-word.gif'
+import searchWord from './search-word.gif'
+import manageWordBook from './manage-wordbook.gif'
+
+# 使用手册
+
+## 登录
+
+1. 选中导航栏「请登录」列，下拉点击「登录」按钮
+
+   <img src={login1.src} alt="登录步骤1" />
+
+2. 填写手机号码，点击获取验证码并填写，点击「登录」。成功后页面显示账户昵称。
+
+   <img src={login2.src} alt="登录步骤2" />
+
+## 选择单词本
+
+1. 登录成功后，设置页「单词本」会显示登录账户的单词本列表，选择其中一个单词本用于后续收藏单词本。点击下方「保存」按钮进行保存。
+
+   <img src={selectedWorkbook.src} alt="选择单词本" />
+
+## 其他配置
+
+### 弹窗样式
+
+- 精简样式：选词翻译弹窗只显示单词以及对应的中文释义
+- 图文模式：选词翻译弹窗不仅显示单词、中文释义，还显示图片、例句内容
+
+### 翻译时机
+
+- 显示图标，点击翻译：选中单词后显示翻译图标，点击图标后显示翻译内容
+- 直接翻译：选中单词后不显示翻译图标，直接显示翻译内容
+- 永不翻译：选中单词后不显示翻译图标，也不进行翻译
+
+### 单词详情内容：显示单词详情时展示的内容项，勾选后显示（如果单词无该项则也不展示）。具体项如下：
+
+- 单词变形
+- 图文例句
+- 短语
+- 近义词
+- 反义词
+- 形近词
+- 英文释义
+
+4. 代理服务器，不用修改
+
+## 选择单词翻译并收藏
+
+浏览相关页面时，使用鼠标划词后会显示一个图标（使用默认配置时），点击该图标后会弹出一个翻译内容的弹窗，点击星形图标可收藏（取消收藏）单词。
+
+<img src={collectWord.src} alt="选择单词翻译并收藏" />
+
+## 搜索单词并收藏
+
+点击浏览器右上角「扩展程序」图标，点击「百词斩助手」扩展，进入搜索页面。输入搜索的单词，点击搜索按钮或者输入回车键，显示搜索结果，点击单词进入详情（详情内容与上述「单词详情内容」设置有关）。点击星形图标可收藏（取消收藏）单词。
+
+<img src={searchWord.src} alt="搜索单词并收藏" />
+
+## 管理单词本内容
+
+进入选项页面，选择要查看的单词本，点击右侧刷新按钮获取单词本最新内容。下方四个按钮可以改变单词本中单词的排序规则，具体排序如文字描述。点击单词可以展示单词详情内容（详情内容与上述「单词详情内容」设置有关）。点击每行单词前星形图标可取消收藏单词。勾中「隐藏释义」、「隐藏英文」选项，可以隐藏单词释义和原文。
+
+<img src={manageWordBook.src} alt="管理单词本内容" />