YUME

搭建个人静态导航页

Mon, 16 Mar 2026 17:00:00 GMT

项目介绍

YuNest 是一个现代、美观且高度可定制的个人静态导航与书签管理工具。作为一个纯前端应用，它可以轻松部署在任何静态托管服务上，为你提供一个个性化的网络入口。

项目地址

::github{repo="YUME-0721/YuNest"} 有用的话，点个start就非常感谢了！

核心功能

🎨 美观的设计风格

采用毛玻璃（Glassmorphism）与弥散光风格设计
丝滑流畅的入场及悬浮微动效
极简而不失质感的界面

🖼️ 强大的壁纸管理

支持纯色背景（可自由调色）
支持固定静态图片
支持随机图片 API
支持本地图片上传
可开启/关闭"玻璃拟态模糊"与"深色遮罩"

🔍 多引擎搜索集成

搜索栏自带引擎切换功能（Google、Bing、百度等）
支持在个性化设置中调整默认搜索引擎

🔖 便捷的书签管理

强大的内置分类和书签管理器
书签图标支持自动获取站点 Favicon
支持直接输入图片链接或使用 Lucide 主题图标

🔐 安全的后台认证

系统自带密码认证的管理后台
可通过环境变量定制访问密码

💾 数据管理

所有书签、偏好设置完全基于浏览器的 localStorage 实现
内置 JSON 数据的备份与还原功能
支持 GitHub 仓库同步，实现跨设备数据迁移

🚀 零依赖部署

采用 HashRouter 设计完美适配静态托管平台
可一键部署至 Cloudflare Pages、Vercel 及 GitHub Pages

技术实现

技术栈

框架: React 18
语言: TypeScript
构建工具: Vite
样式: Tailwind CSS v4
路由: React Router (HashRouter)
图标集: Lucide React

核心架构

数据管理

YuNest 使用 React Context API 实现全局状态管理，所有数据通过 localStorage 持久化：

// 核心数据结构
export interface AppState {
  settings: Settings;
  categories: Category[];
}

// 数据持久化
try {
  const parsed = JSON.parse(saved);
  return {
    ...defaultState,
    ...parsed,
    settings: { ...defaultState.settings, ...parsed.settings },
  };
} catch (e) {
  console.error('Failed to parse saved data', e);
}

GitHub 同步功能

通过 GitHub API 实现数据的云端备份与恢复：

const syncToRepo = useCallback(async (tokenOverride?: string, repoOverride?: string) => {
  const token = tokenOverride || state.settings.githubToken;
  const repo = repoOverride || state.settings.githubRepo;
  if (!token || !repo) throw new Error('缺少 GitHub Token 或 仓库名');

  // 剔除敏感信息
  const stateToSave = { 
    ...state, 
    settings: { ...state.settings, githubToken: '', githubRepo: '' } 
  };

  // 执行 GitHub API 请求
  // ...
}, [state]);

响应式设计

采用 Tailwind CSS 实现响应式布局，适配不同设备尺寸：

<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
  {category.bookmarks.map((bookmark) => (
    <a
      key={bookmark.id}
      href={bookmark.url}
      target="_blank"
      rel="noopener noreferrer"
      className="flex items-center p-4 rounded-2xl glass hover:bg-white/10 hover:-translate-y-0.5 hover:border-white/15 transition-all duration-300 group"
    >
      {/* 书签内容 */}
    </a>
  ))}
</div>

部署指南

1. 本地运行

# 克隆代码仓库
git clone <your-repo-url>
cd YuNest

# 安装依赖
npm install

# 配置认证密码（可选）
cp .env.example .env
# 编辑 .env 文件，修改 VITE_ADMIN_PASSWORD 值

# 构建生产版本
npm run build

# 启动开发服务
npm run dev

2. 云平台部署

可一键部署到以下平台：

**Cloudflare Pages / Vercel / Netlify/EdgeOne等:
- Build Command: npm run build
- Output Directory: dist
- 需在平台设置中添加 VITE_ADMIN_PASSWORD 环境变量

使用指南

访问首页: 部署完成后访问站点，即可看到美观的导航界面
进入后台: 点击右上角的"齿轮"图标，输入管理员密码（默认为 123456）
个性化配置:
- 修改站点名称
- 更改默认搜索引擎
- 管理壁纸和视觉效果
管理书签:
- 添加/编辑/删除书签分类
- 添加/编辑/删除书签
- 调整书签顺序
开启云端同步:
- 前往"备份与还原"页面
- 配置 GitHub Token 和仓库信息
- 点击"同步到云端"即可
跨设备同步:
- 在其他设备上打开 YuNest
- 进入"备份与还原"页面
- 填写相同的 GitHub Token 和仓库信息
- 点击"从云端拉取"即可

结语

如果有问题和建议，欢迎评论区留言或者提issue，非常感谢！

软件测试基础

Wed, 04 Mar 2026 17:00:00 GMT

测试分类：

按照软件产生的阶段划分：

单元测试

针对程序源代码进行测试

集成测试

针对模块之间功能交互进行测试，又称组装测试

系统测试

对整个系统（功能、非功能）进行全面测试

验收测试

以用户身份验证系统是否符合预期需求

按照代码可见度划分：

黑盒测试

不关注源代码，针对有UI界面软件系统输入输出类测试

灰盒测试

针对无UI界面软件系统输入输出和内部逻辑结构的测试（能看到部分源代码）

白盒测试

针对源代码及内部逻辑本身进行测试

其他测试：

冒烟测试

概念：冒烟测试是对核心功能的验证。
作用：保障提测内容具备可测性

回归测试

概念：回归测试是对已修复Bug/更新后对已测内容进行再次测试
作用：保证Bug修复、确保新功能对旧功能没有影响

黑白正冲液体配方

Mon, 09 Feb 2026 20:30:00 GMT

以下溶液都按500ml目标配置，温度都在20度

显影液

先准备300ml左右纯净水
米吐尔（对甲氨基苯酚硫酸盐） 1g

显影作用，能在较短时间内使影像初步形成，尤其是对高光部分的还原作用较为明显，能快速呈现出高光区域的细节。

对苯二酚 2.5g

对影像的反差有显著影响，在显影过程中的主要作用是，增强影像的中灰和暗部区域的密度，提高影像的反差，让照片的黑白对比更明显，层次更加分明。

无水亚硫酸钠 50g

防止显影剂被氧化，延长显影液有效期

抑制未感光的卤化银被还原，减少产生灰雾，提高影像的清晰度和反差。

使显影过程中产生的银盐溶解，促进显影均匀进行，使得影像密度更加均匀。

硼砂 1g

充当缓冲剂和调节溶液PH值

水加至500ml

显影液配置好后密封避光保存最多一周，最多2-3卷，第二卷开始每卷适当延长1分钟左右，建议现配现用。

漂白液

先准备300ml左右纯净水
高锰酸钾 1g
浓硫酸 5ml（使用1.28比重的电解液 18.6ml）

硫酸缓慢导入溶液中，持续搅拌，注意安全，防止爆沸！

焦亚硫酸钠溶液

焦亚硫酸钠 3g 融进500ml的纯净水中

定影液

派森牌的BW-62酸性定影液

黑白胶卷冲洗

Tue, 03 Feb 2026 18:00:00 GMT

准备阶段

取片头

使用取片器取出片头，并剪成平的

暗袋上卷

水洗阶段

20度的水清洗一分钟即可（去除胶片上的防光晕涂层）

首显阶段

加入20度的D76显影液，震荡消除气泡（防止胶片边缘起白边）。
第一分钟持续搅拌或者摇晃，后面每一分钟搅拌20秒左右。
乐凯旧款SHD400，首显时间为13分钟。
倒出显影液，清水冲洗。

漂白阶段（从此开始可以见光）

使用高锰酸钾漂白液，漂白至几乎胶片看不到图像

时间千万不能过长！1分钟左右就行，太长会脱膜成透明报废卷！

倒出漂白液，清水冲洗。
倒入焦亚硫酸钠溶液，彻底中和高锰酸钾，2分钟后00（底片呈现黄黄的状态）倒出，清水冲洗。

二次曝光阶段

从片轴上取下胶卷，曝光在灯光下（家里浴霸灯就行）
整卷照射3分钟左右，直至图像完全出来，宁过勿欠。

二次显影阶段

导入显影液（首显阶段用的就行，不用重新配）
显影3-5分钟，期间间隔摇晃
看到图像清晰，取出清水冲洗。
倒入定影液，1分钟后倒出，清水冲洗，挂起晾干。

静态图片画廊 - 绮想絵廊

Sat, 24 Jan 2026 16:00:00 GMT

项目功能

提供随机图片重定向服务。
支持根据 User-Agent 自动返回适配设备的图片（横屏/竖屏）。

项目地址

::github{repo="YUME-0721/PicAPI-Gallery"}

免费使用

静态图片画廊 - 绮想絵廊 https://pic.yumekai.top (个人自用，不保证稳定，点个star谢谢！)

📚 API 使用指南

项目包含一个 EdgeOne Functions (functions/pic.js)，提供以下 HTTP GET 接口：

参数	描述	示例
`?img=h`	获取一张随机的横屏图片 (PC壁纸)	`http://xxx/pic` 或 `http://xxx/pic?img=h`
`?img=v`	获取一张随机的竖屏图片 (手机壁纸)	`http://xxx/pic?img=v`
`?img=ua`	根据访问设备自动返回适配图片 (手机返回竖屏，PC返回横屏)	`http://xxx/pic?img=ua`

✨ 页面特性 (Features)

沉浸式画廊体验:

* 瀑布流布局: 使用 CSS Multi-column 技术，完美兼容各种比例的横屏与竖屏图片。

* 无限滚动: 自动感知滚动到底部并加载更多图片，提供流畅的浏览体验。

* 高级暗色主题: 采用 Glassmorphism（毛玻璃）设计风格，提供电影级的视觉享受。

* 智能导航: 导航栏随滚动自动隐藏/显示，最大化内容展示区域。

* 即时筛选: 支持在无刷新情况下切换“全部”、“横屏”、“竖屏”视图。

* 灯箱模式: 点击图片即可全屏查看高清大图。

📂 项目结构


EdgeOne_PicAPI/

├── index.html            # 画廊主页 (入口文件)
├── assets/
│   ├── css/
│   │   └── style.css     # 全局样式 & 响应式布局
│   └── js/
│       └── app.js        # 前端逻辑 (无限加载、混洗、筛选)
├── functions/
│   └── pic.js            # EdgeOne 边缘函数 (API逻辑)
└── ri/                   # 图片资源目录
    ├── h/                # 横屏图片 (.webp)
    └── v/                # 竖屏图片 (.webp)

🚀 部署 (Deployment)

本项目专为 Tencent EdgeOne Pages 设计。

将代码推送到 Git 仓库。
在 EdgeOne Pages 控制台新建项目。
关联 Git 仓库。
构建配置:

* 构建目录 (Build Directory): 保持默认或设置为 / (项目根目录)。

* 无需特殊的构建命令 (这是一个静态站点)。

点击部署。

🛠 开发 (Development)

本地预览

如果你安装了 Node.js，可以使用 serve 或 http-server 快速启动本地预览：


npx serve .

访问 http://localhost:3000 即可查看画廊效果。

注意：

图片范围配置:

目前代码硬编码了图片数量 (在 assets/js/app.js 和 functions/pic.js 中):

横屏 (Horizontal): 1 - 882
竖屏 (Vertical): 1 - 3289

若添加新图片，请确保更新这两个文件中的 maxHorizontalImageNumber 和 maxVerticalImageNumber 常量。

Markdown 扩展语法

Thu, 22 Jan 2026 23:00:00 GMT

大多数使用Markdown的人会发现，基础语法和扩展语法已能满足需求。但如果您长期使用Markdown，可能会发现某些必要功能确实缺失。本文提供了一些绕过Markdown限制的技巧。针对Markdown官方不支持的某些功能的替代解决方案。

💡 重要提示：这些变通方法不能保证在所有Markdown应用中生效。如需频繁使用这些技巧，建议考虑改用其他标记语言。

下划线：

一些应用（如 Bear 和 Simplenote）支持文本下划线，但如果你的 Markdown 处理器支持 HTML，可以使用 <ins> 标签：

一些文字 <ins>将被加下划线</ins>。

渲染效果：一些文字 <ins>将被加下划线</ins>。

缩进：

Markdown 里的空格和制表符有特殊用途，比如创建换行或代码块。如果你想用 Tab 缩进段落，可以尝试以下方法：

&nbsp;&nbsp;&nbsp;&nbsp;这是一个缩进的段落。

渲染效果：这是一个缩进的段落。

文字居中：

Markdown 没有文本对齐的语法，但可以使用 HTML 标签 <center>（已废弃）或 CSS 解决：

<p style="text-align:center">这段文字居中显示。</p>

渲染效果： 这段文字居中显示。

文字颜色：

Markdown 不支持更改文字颜色，但 HTML 可以：

<font color="red">这段文字是红色的！</font>
<p style="color:blue">这段文字是蓝色的。</p>

渲染效果： 这段文字是红色的！ 这段文字是蓝色的。

注释：

Markdown 没有内置的注释功能，但可以使用一种非官方的 Hack 方法：

这是可见的段落。

[这是一个隐藏的注释]: # 

这是另一个可见的段落

渲染效果：

这是可见的段落。

这是另一个可见的段落

警告:

Markdown 没有警告框功能，但可以使用引用块（>）+ Emoji + 加粗模拟：

> :warning: **警告：** 不要按下大红色按钮！

> :memo: **注意：** 日出很美。

> :bulb: **提示：** 记得珍惜生活中的小事

渲染效果：

⚠️ 警告： 不要按下大红色按钮！

📝 注意： 日出很美。

💡 提示： 记得珍惜生活中的小事。

调整图片大小:

Markdown 不能指定图片尺寸，但可以用 HTML 设定宽高：

<img src="/images/rocks.jpg" width="200" height="100">

图片标题:

Markdown 没有图片标题（Caption），可以使用 HTML 的 <figure> 和 <figcaption>：

<figure>
    <img src="/images/rocks.jpg" alt="描述文本">
    <figcaption>这是一张描述图片。</figcaption>
</figure>

或者使用 Markdown 变通方法：

![描述文本](/images/rocks.jpg)  
*这是一张描述图片。*

渲染效果： 这是一张描述图片

新标签打开链接：

Markdown 不能指定 target="_blank"，但 HTML 可以：

<a href="https://markdown.com.cn" target="_blank">学习 Markdown！</a>

渲染效果： <a href="https://markdown.com.cn" target="_blank">学习 Markdown！</a>

符号（特殊字符）:

Markdown 不能直接插入特殊符号，但可以复制粘贴，或者使用 HTML 实体：

版权 (©) — &copy;
注册商标 (®) — &reg;
商标 (™) — &trade;
欧元 (€) — &euro;
左箭头 (←) — &larr;
上箭头 (↑) — &uarr;
右箭头 (→) — &rarr;
下箭头 (↓) — &darr;
度数 (°) — &#176;
圆周率 (π) — &#960;

渲染效果：

版权 (©) — © 注册商标 (®) — ® 商标 (™) — ™ 欧元 (€) — € 左箭头 (←) — ← 上箭头 (↑) — ↑ 右箭头 (→) — → 下箭头 (↓) — ↓ 度数 (°) — ° 圆周率 (π) — π

表格格式:

Markdown 不能直接在表格中换行或插入列表，但可以用 HTML 解决：

表格内换行:

| 语法      | 描述         |
| --------- | ----------- |
| 换行      | 第一段。<br><br>第二段。 |

表格内列表

| 语法      | 描述         |
| --------- | ----------- |
| 列表      | <ul><li>项目一</li><li>项目二</li></ul> |

渲染效果：

语法	描述
换行	第一段。<br><br>第二段。

语法	描述
列表	<ul><li>项目一</li><li>项目二</li></ul>

插入视频:

Markdown 不能直接嵌入视频，但可以使用 HTML，或变通方式（图片+链接）
点击B站的分享图标，然后选择嵌入链接，会获得如下代码：

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" &autoplay=0> </iframe>

参数说明:

width="100%": 视频宽度设置为100%，适应文章布局
height="468": 视频高度（可根据需要调整）
src: 视频嵌入链接
bvid=BV1fK4y1s7Qf: B站视频BV号
p=1: 视频分P（如果是多P视频）
autoplay=0: 是否自动播放（0为不自动，1为自动）
allowfullscreen: 允许全屏播放
scrolling="no": 禁用滚动条
frameborder="no": 无边框

自定义视频尺寸:

你可以根据需要调整视频的尺寸：

<!-- 响应式宽度，固定高度 -->
<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

<!-- 固定尺寸 -->
<iframe width="560" height="315" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

<!-- 大尺寸 -->
<iframe width="100%" height="600" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

高级选项:

自动播放:

要使视频自动播放，可以修改参数：

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&autoplay=1" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

注意：大多数浏览器会阻止带声音的自动播放。

指定分P播放

对于多P视频，可以指定播放第几集：

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&p=2" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

这会让视频直接播放第2集。

设置开始时间

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&t=30" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

这会让视频从30秒处开始播放。

高画质模式

<iframe width="100%" height="468" src="//player.bilibili.com/player.html?bvid=BV1fK4y1s7Qf&high_quality=1" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>

这会让视频默认以高画质播放（需要用户登录B站）。

注意事项

HTTPS兼容性：使用协议相对URL（//player.bilibili.com）可以同时兼容HTTP和HTTPS
响应式设计：使用百分比宽度可以适应不同屏幕尺寸
移动设备：B站视频会自动适应移动设备屏幕
加载速度：嵌入多个视频可能会影响页面加载速度
地区限制：某些视频可能有地区限制，无法在所有地区播放

故障排除

如果视频无法正常显示，请检查：

BV号是否正确
URL是否完整且格式正确
是否有防火墙阻止访问B站
浏览器是否支持HTML5视频标签
视频是否已被删除或设为私密

其他视频平台

除了B站，你也可以使用类似方法嵌入其他平台的视频：

YouTube: 使用https://www.youtube.com/embed/VIDEO_ID
腾讯视频: 使用https://v.qq.com/txp/iframe/player.html?vid=VIDEO_ID
优酷: 使用https://player.youku.com/embed/VIDEO_ID

只需获取各平台的嵌入代码，然后按照相同的方式插入到Markdown文件中即可。

Markdown 进阶语法

Wed, 21 Jan 2026 18:00:00 GMT

基本语法主要是为了应付大多数情况下的日常所需元素，但对于某些人来说还不够，这就是扩展语法的用武之地。

一些个人和组织开始通过添加其他元素（例如表，代码块，语法突出显示，URL自动链接和脚注）来扩展基本语法。可以通过使用基于基本Markdown语法的轻量级标记语言，或通过向兼容的Markdown处理器添加扩展来启用这些元素。

一. 表格

1. 表

要添加表，使用三个或多个连字符（---）创建每列的标题，并使用管道（|）分隔每列。您可以选择在表的任一端添加管道。

| Syntax | Description |
| --- | ----------- |
| Header | Title |
| Paragraph | Text |

单元格宽度可以变化，如上示例呈现的输出将看起来相同。
使用连字符和管道创建表可能很麻烦。为了加快该过程，可以尝试使用图形界面构建表（例如Markdown Tables Generator），然后将生成的Markdown格式的文本复制到文件中。

2. 对齐

可以通过在标题行中的连字符的左侧，右侧或两侧添加冒号（:），将列中的文本对齐到左侧，右侧或中心。

| Syntax      | Description | Test Text     |
| :---        |    :----:   |          ---: |
| Header      | Title       | Here's this   |
| Paragraph   | Text        | And more      |

输出如下所示:

Syntax	Description	Test Text
Header	Title	Here's this
Paragraph	Text	And more

3. 格式化表格中的文字

可以在表格中设置文本格式。例如，您可以添加链接，代码（仅反引号（`）中的单词或短语，而不是代码块）和强调。
您不能添加标题，块引用，列表，水平规则，图像或HTML标签。

4. 在表中转义管道字符

可以使用表格的HTML字符代码（|）在表中显示竖线（|）字符。

二. 脚注

脚注使您可以添加注释和参考，而不会使文档正文混乱。当您创建脚注时，带有脚注的上标数字会出现在您添加脚注参考的位置。读者可以单击链接以跳至页面底部的脚注内容。

要创建脚注参考，请在方括号（[^1]）内添加插入符号和标识符。标识符可以是数字或单词，但不能包含空格或制表符。标识符仅将脚注参考与脚注本身相关联-在输出中，脚注按顺序编号。

在括号内使用另一个插入符号和数字添加脚注，并用冒号和文本（[^1]: My footnote.）。您不必在文档末尾添加脚注。您可以将它们放在除列表，块引号和表之类的其他元素之外的任何位置。

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    `{ my code }`

    Add as many paragraphs as you like.

呈现的输出如下所示：

Here's a simple footnote,[^1] and here's a longer one.[^bignote]

[^1]: This is the first footnote.

[^bignote]: Here's one with multiple paragraphs and code.

Indent paragraphs to include them in the footnote.

`{ my code }`

Add as many paragraphs as you like.

三. 标题编号

许多Markdown处理器支持标题的自定义ID

一些Markdown处理器会自动添加它们。
添加自定义ID允许您直接链接到标题并使用CSS对其进行修改。
要添加自定义标题ID，请在与标题相同的行上用大括号括起该自定义ID。

### My Great Heading {#custom-id}

对应的HTML是这样：

<h3 id="custom-id">My Great Heading</h3>

链接到标题ID（#headid）

通过创建带有数字符号（#）和自定义标题ID的[标准链接]((/basic-syntax/links.html)，可以链接到文件中具有自定义ID的标题。

Markdown	HTML	预览效果
`[Heading IDs](#heading-ids)`	`<a href="#heading-ids">Heading IDs</a>`	Heading IDs

其他网站可以通过将自定义标题ID添加到网页的完整URL（例如[Heading IDs](https://markdown.com.cn/extended-syntax/heading-ids.html#headid)）来链接到标题。

四. 定义列表

一些Markdown处理器允许您创建术语及其对应定义的_定义列表_。要创建定义列表，请在第一行上键入术语。在下一行，键入一个冒号，后跟一个空格和定义。

First Term
: This is the definition of the first term.

Second Term
: This is one definition of the second term.
: This is another definition of the second term.

对应HTML为：

<dl>
  <dt>First Term</dt>
  <dd>This is the definition of the first term.</dd>
  <dt>Second Term</dt>
  <dd>This is one definition of the second term. </dd>
  <dd>This is another definition of the second term.</dd>
</dl>

五. 删除线

可以通过在单词中心放置一条水平线来删除单词。结果看起来~~像这样~~。
此功能使您可以指示某些单词是一个错误，要从文档中删除。
若要删除单词，请在单词前后使用两个波浪号~~。

~~世界是平坦的。~~ 我们现在知道世界是圆的。

示例输出为： ~~世界是平坦的。~~ 我们现在知道世界是圆的。

六. 任务列表

任务列表使您可以创建带有复选框的项目列表。
在支持任务列表的Markdown应用程序中，复选框将显示在内容旁边。要创建任务列表，请在任务列表项之前添加破折号-和方括号[ ]，并在[ ]前面加上空格。要选择一个复选框，请在方括号[x]之间添加 x 。

- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media

示例输出为：

[x] Write the press release
[ ] Update the website
[ ] Contact the media

七. 使用Emoji表情

1. 复制和粘贴表情符号

在大多数情况下，可以简单地从Emojipedia (opens new window)等来源复制表情符号并将其粘贴到文档中。许多Markdown应用程序会自动以Markdown格式的文本显示表情符号。从Markdown应用程序导出的HTML和PDF文件应显示表情符号。

Tip: 如果您使用的是静态网站生成器，请确保将HTML页面编码为UTF-8。

2. 使用表情符号简码

一些Markdown应用程序允许您通过键入表情符号短代码来插入表情符号。这些以冒号开头和结尾，并包含表情符号的名称。

去露营了！ :tent: 很快回来。

真好笑！ :joy:

示例输出为：

去露营了！⛺很快回来。真好笑！😂

Note: 注意：可以使用此表情符号简码列表，但请记住，表情符号简码因应用程序而异。有关更多信息，请参阅Markdown应用程序的文档。

八. 自动网址链接

1. 自动网址链接

许多Markdown处理器会自动将URL转换为链接。这意味着如果您输入http://www.example.com，即使您未使用方括号，您的Markdown处理器也会自动将其转换为链接。

http://www.example.com

示例输出为： http://www.example.com

2. 禁用自动URL链接

如果不希望自动链接URL，则可以通过将URL表示为带反引号的代码来删除该链接。

`http://www.example.com`

示例输出为 http://www.example.com

Markdown 基础语法

Fri, 16 Jan 2026 18:00:00 GMT

一. 标题：

支持两种语法，推荐使用 Atx 形式（更灵活）

Atx 形式（推荐）

Markdown语法	HTML	预览效果
`# Heading level 1`	`<h1>Heading level 1</h1>`	# Heading level 1
`## Heading level 2`	`<h2>Heading level 2</h2>`	## Heading level 2
`### Heading level 3`	`<h3>Heading level 3</h3>`	### Heading level 3
`#### Heading level 4`	`<h4>Heading level 4</h4>`	#### Heading level 4
`##### Heading level 5`	`<h5>Heading level 5</h5>`	##### Heading level 5
`###### Heading level 6`	`<h6>Heading level 6</h6>`	###### Heading level 6

Setext 形式（可选，仅支持H1-H2）

Markdown语法	HTML	预览效果
`Heading level 1 ===============`	`<h1>Heading level 1</h1>`	Heading level 1
`Heading level 2 ---------------`	`<h2>Heading level 2</h2>`	Heading level 2

二.段落与换行：

1. 段落：

由连续行组成，空行（含仅空格/tab的行）分隔不同段落，无需缩进。
要创建段落，请使用空白行将一行或多行文本进行分隔。
不要用空格（spaces）或制表符（ tabs）缩进段落。

Markdown语法	HTML	预览效果
`I really like using Markdown. I think I'll use it to format all of my documents from now on.`	`<p>I really like using Markdown.</p> <p>I think I'll use it to format all of my documents from now on.</p>`	I really like using Markdown.<br><br>I think I'll use it to format all of my documents from now on.

2. 强制换行：

行尾加 2 个以上”空格“ + ”回车“ ，或者用反斜线"\“ +”回车“（只有少数软件支持，不推荐）。

Markdown语法	HTML	预览效果
`This is the first line. And this is the second line.`	`<p>This is the first line.<br> And this is the second line.</p>`	This is the first line. <br>And this is the second line.

三. 强调：

单 * 或 _：斜体（）
双 * 或 _：粗体（）
符号需成对使用，不可混合

*斜体文本*（推荐）
_斜体文本_
**粗体文本**（推荐）
__粗体文本__
***粗斜体文本***

四. 引用/引言：

行首加”>“，支持嵌套（多层”>“）和内部嵌套其他语法。
可仅在段落第一行加”>“，后续行自动继承

	> 一级引言段落1
	> 一级引言段落2
	>
	>> 嵌套二级引言
	>
	> 回到一级引言，支持嵌套列表:
	> 1. 引言内有序列表
	> 2. 列表项2
	> 
	>> ## 引言内标题
	>> '引言内代码'

五.列表：

1. 无序列表

支持破折号 (-)、星号 (*) 或加号 (+)。

	- 无序列表项1（推荐）
	- 无序列表项2
		- 嵌套子项1 （缩进1个tab或3个空格）
		- 嵌套子项2
			
	* 星号标记项（不推荐混合使用）
	+ 加号标记项（不推荐混合使用）

2. 有序列表

数字 + 英文句点 + 空格，数字不必按数学顺序排列，但是列表应当以数字 1 起始。

	1. 有序列表项1
	2. 有序列表项2
		1. 嵌套子项1（缩进）
		2. 嵌套子项2
	3. 有序列表项3

3. 列表高级用法

列表项含多段落：子段落需缩进 3 空格
列表项间空行：自动为内容添加 p标签

避免误触发：行首数字+句点前加反斜杠" \ "（如 1986 \ . 年份说明）

	 列表项1（含多段落）
	   字段落内容（缩进 3 个空格）
	   子段落2
	   
	 列表项2（空行分割，自动加<p>标签）

六. 代码：

1. 单词

单词或者短语，包裹在反引号 (`) 中。

Markdown语法	HTML	预览效果
At the command prompt, type `nano`.	`At the command prompt, type <code>nano</code>.`	At the command prompt, type `nano`.

转义反引号

Markdown语法	HTML	预览效果
``Use `code` in your Markdown file.``	<code>Use `code` in your Markdown file.</code>	Use `code` in your Markdown file.

2. 代码块

2.1 缩进式

行首缩进 1 个tab或者 4 个空格，适用于短代码块

	普通段落：
		const a = 1; // 缩进 1 个tab的代码块
		console.log(a);

2.2 进阶用法（围栏式）

用三个反引号（(```）或三个波浪号（~~~）

```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```

2.3 语法高亮

请在受防护的代码块之前的反引号旁边指定一种语言。

```json
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

七. 分割线：

一行上使用三个或多个星号 (***)、破折号 (---) 或下划线 (___) ，并且不能包含其他内容。
为了兼容性，最好在分隔线的前后均添加空白行。

内容1
 
---

内容2

***

内容3

___

八. 链接

1. 行内链接（推荐，直观）

链接文本放在中括号内，链接地址放在后面的括号中，链接title可选。

[链接文本](http://example.com "可选标题，hover显示")

2. 网站和Email地址

使用尖括号可以很方便地把URL或者email地址变成可点击的链接。
```
<https://markdown.com.cn>
<fake@example.com>
```

3. 带格式化的链接

强调链接, 在链接语法前后增加星号。要将链接表示为代码，请在方括号中添加反引号。

I love supporting the **[EFF](https://eff.org)**.
This is the *[Markdown Guide](https://www.markdownguide.org)*.
See the section on [`code`](#code).

4. 参考式链接（适合多次引用同一链接）

第一部分格式:
- 使用两组括号进行格式设置，第一组方括号为显示链接的文本；第二组括号显示了一个用于指向您存储在文档其他位置的链接。
- 可以在第一组和第二组括号之间包含一个空格。第二组括号中的标签不区分大小写，可以包含字母，数字，空格或标点符号。

[hobbit-hole][1]
[hobbit-hole] [1]

第二部分格式（习惯放到文档末尾）:
- 放在括号中的标签，其后紧跟一个冒号和至少一个空格（例如[label]:）。
- 链接的URL，可以选择将其括在尖括号中。
- 链接的可选标题，可以将其括在双引号，单引号或括号中。

[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle "Hobbit lifestyles"
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle 'Hobbit lifestyles'
[1]: https://en.wikipedia.org/wiki/Hobbit#Lifestyle (Hobbit lifestyles)
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> "Hobbit lifestyles"
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> 'Hobbit lifestyles'
[1]: <https://en.wikipedia.org/wiki/Hobbit#Lifestyle> (Hobbit lifestyles)

九. 图片

1. 行内图片

// 使用感叹号 (`!`), 然后在方括号增加替代文本，图片链接放在圆括号里，括号里的链接后可以增加一个可选的图片标题文本。
插入图片Markdown语法代码：
![图片alt](图片链接 "图片title")

对应的HTML代码：
<img src="图片链接" alt="图片alt" title="图片title">

2. 参考式图片

// 给图片增加链接，将图像的Markdown 括在方括号中，然后将链接添加在圆括号中。
[![沙漠中的岩石图片](/assets/img/shiprock.jpg "Shiprock")](https://markdown.com.cn)

![替代文本][imgId]
[imgId]: /path/to/img.webp "可选标题"

十. 转义字符

1. 可做转义的字符

以下列出的字符都可以通过使用反斜杠字符从而达到转义目的。

\   反斜线
`   反引号
*   星号
_   底线
{}  大括号
[]  方括号
()  括号
#   井字号
+   加号
-   减号
.   英文句点
!   惊叹号
|   竖线

2. 特殊字符自动转义

在 HTML 文件中， < 和 & 不会转换，在其它情况下，它则会被转换成 < 和 &。

十一. 内嵌 HTML 标签

如需使用 HTML，不需要额外标注这是 HTML 或是 Markdown，只需 HTML 标签添加到 Markdown 文本中即可。

1. 行级內联标签

HTML 的行级內联标签如 、<cite>、<del> 不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用 Markdown 格式，而采用 HTML 标签来格式化。

This **word** is bold. This <em>word</em> is italic.

渲染效果：This word is bold. This word is italic.

2. 区块标签

区块元素──比如 <div>、<table>、<pre>、 等标签，必须在前后加上空行，以便于内容区分。而且这些元素的开始与结尾标签，不可以用 tab 或是空白来缩进。Markdown 会自动识别这区块元素，避免在区块标签前后加上没有必要的  标签。

This is a regular paragraph.

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

This is another regular paragraph.

//Markdown 语法在 HTML 区块标签中将不会被进行处理

Markdown 编辑器

Wed, 07 Jan 2026 22:15:00 GMT

Markdown 编辑器

Markdown 是一种轻量级的标记语言，通过简单的标记语法使文本具备一定的格式，它的目标就是实现易读、易写。要使用 Markdown 编写文档，你需要一个合适的 Markdown 编辑器。

如何选择编辑器

根据你的需求选择合适的编辑器：

初学者：推荐 Typora，界面简洁，所见即所得，学习成本低
开发者：推荐 VS Code，功能强大，可扩展性强
在线使用：推荐 Editor.md，功能丰富，无需安装
免费需求：推荐 VS Code 或 Editor.md
付费意愿：Typora 是最佳选择

Markdown 文件后缀

Markdown 编写的文档后缀通常为：

.md
.markdown

在线编辑器

除了本地安装的编辑器，你还可以使用在线 Markdown 编辑器：

菜鸟工具 Markdown 在线编辑器：https://c.runoob.com/front-end/712/
StackEdit：https://stackedit.io/
Dillinger：https://dillinger.io/

在线编辑器的优点是无需安装，随时随地使用，但需要网络连接。

总结

选择合适的 Markdown 编辑器可以大大提高写作效率。建议初学者从 Typora 开始，熟悉 Markdown 语法后，可以根据自己的需求切换到 VS Code 或其他编辑器。无论选择哪款编辑器，掌握 Markdown 语法都是最重要的。

Markdown 教程

Fri, 02 Jan 2026 00:00:00 GMT

Markdown 教程

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。

什么是 Markdown

Markdown 语言在 2004 年由约翰·格鲁伯（John Gruber）创建。它的设计理念是"易读易写"，让人们能够使用简单的纯文本格式来编写结构化文档。Markdown 编写的文档可以导出为 HTML、Word、图像、PDF、Epub 等多种格式的文档。

Markdown 编写的文档后缀为 .md 或 .markdown。

Markdown 的核心特点

简洁性

使用直观的符号来表示格式，比如用 # 表示标题，用 * 表示列表项。这些符号在视觉上就能传达其含义，即使不进行渲染也具有良好的可读性。

可读性

即使是纯文本形式的 Markdown 文档，也能清晰地展现文档的结构和层次。读者无需专门的软件就能理解内容的组织方式。

便携性

Markdown 文件是纯文本格式，可以在任何文本编辑器中打开和编辑，不依赖特定的软件或操作系统。

转换性

可以轻松转换为 HTML、PDF、Word 文档等多种格式，满足不同的发布需求。

轻量级标记语言的概念

标记语言是一种用特定符号来描述文档结构和格式的语言。传统的标记语言如 HTML 功能强大但语法复杂，而轻量级标记语言则简化了这一过程。

与 HTML 相比，Markdown 的优势在于：

学习成本低：几分钟就能掌握基本语法
编写效率高：无需输入复杂的标签
专注内容：而非格式细节
版本控制友好：便于协作和变更追踪

Markdown 与 HTML 的关系

Markdown 并不是 HTML 的替代品，而是 HTML 的简化版本。实际上，Markdown 的最终目标就是转换为 HTML。两者的关系可以这样理解：

Markdown 源码 → 解析器 → HTML 输出 → 浏览器渲染

例如，当你写下：

# 这是一个标题

它会被转换为：

<h1>这是一个标题</h1>

重要的是，在 Markdown 中你可以直接使用 HTML 标签，这为复杂格式提供了灵活性。当 Markdown 的基础语法无法满足需求时，可以嵌入 HTML 代码来实现特定效果。

为什么选择 Markdown

提高写作效率

无需频繁使用鼠标进行格式设置，可以保持思路的连贯性。写作者可以专注于内容创作，而不被格式问题分散注意力。

降低学习门槛

相比于 LaTeX、HTML 等标记语言，Markdown 的语法极其简单，大多数人可以在一小时内掌握基本用法。

广泛兼容性

几乎所有的现代文本编辑器、代码编辑器、笔记应用都支持 Markdown。从简单的记事本到专业的 IDE，你都能找到 Markdown 的身影。

版本控制友好

由于是纯文本格式，Markdown 文件可以很好地与 Git 等版本控制系统配合，便于追踪文档的修改历史和团队协作。

未来适应性

即使特定的软件或平台消失，Markdown 文件作为纯文本仍然可以被访问和编辑，确保了内容的长期可用性。

Markdown 的应用场景

技术文档编写

在软件开发领域，Markdown 已成为技术文档的标准格式。它特别适合：

API 文档：清晰的标题层次和代码块展示，让 API 说明既专业又易读。许多 API 文档生成工具（如 Swagger）都支持 Markdown 格式的描述。
项目说明：从安装指南到使用手册，Markdown 能够有效组织技术信息。代码示例、配置文件、命令行操作都能得到恰当的展示。
开发规范：团队的编码规范、设计准则、工作流程等都可以用 Markdown 编写，方便团队成员查阅和更新。

博客文章创作

现代的博客平台和静态网站生成器大多支持 Markdown：

内容管理：博主可以专注于内容创作，而不必担心复杂的 HTML 编码。文章的格式化通过简单的标记即可完成。
平台迁移：使用 Markdown 编写的文章可以轻松在不同平台间迁移，不会因为平台特有的格式而被锁定。
离线编写：可以在任何文本编辑器中离线编写文章，然后批量发布，提高了写作的灵活性。

GitHub README 文件

GitHub 平台广泛使用 Markdown，特别是项目的 README 文件：

项目介绍：清晰展示项目的目的、特性、使用方法等关键信息。
安装指南：通过代码块和列表，提供详细的安装和配置步骤。
贡献指南：说明如何参与项目开发，包括代码规范、提交流程等。
问题跟踪：在 Issues 和 Pull Requests 中，开发者使用 Markdown 来描述问题、提供解决方案。

笔记记录和知识管理

Markdown 正成为数字笔记的首选格式：

学习笔记：支持数学公式、代码高亮、图表等多种内容类型，适合技术学习和知识整理。
会议记录：清晰的标题结构和列表格式，让会议要点一目了然。
知识库建设：企业和个人都在使用 Markdown 构建知识库，通过链接和标签组织信息。

在线写作平台

越来越多的写作平台开始支持 Markdown，如 GitHub、简书、知乎等，让作者可以专注于内容创作。

教程目录

本教程将带你系统地学习 Markdown 的各个方面：

Markdown 编辑器 - 介绍常用的 Markdown 编辑器工具
Markdown 基础语法 - 标题、段落、列表等基本语法
Markdown 进阶语法 - 表格、代码块、链接、图片等
Markdown 扩展语法 - 任务列表、删除线、数学公式等