# posts

title: MD测试文档
slug: md-test
excerpt: 一份测试文档
tags_json: []
visibility: unlisted
share_token: 47VcHoSn_7emIWBlbL9yD_KMsmyaa234SBXxzdaUA5Q
body_markdown:
  ~sww~

  # Welcome to Sleepless! 欢迎来到 失眠先生!

  `code`sdasdas![image.png](/public/upload/1777047996547-912573909-image.webp)

  ## 标签

  <small>PS: asda</small>

  ![](http://localhost:3000/public/upload/1776958886366-760788592-192611-17661435712a86.webp)

  ## 1. 排版

  **粗体** _斜体_

  ~~这是一段错误的文本。~~

  引用:

  > 引用 Sleepless 官方的话, 为什么要做 Sleepless, 原因是...

  有充列表:

  1. 支持 Vim
  2. 支持 Emacs

  无序列表:

  - 项目 1
  - 项目 2

  ## 2. 图片与链接

  链接:

  [这是去往 Sleepless 官方博客的链接](/)

  ## 3. 标题

  以下是各级标题, 最多支持 5 级标题

  ```md
  # h1
  ## h2
  ### h3
  #### h4
  ##### h4
  ###### h5
  ```

  ## 4. 代码

  示例:

  ```js
      function get(key) {
          return m[key];
      }
  ```

  代码高亮示例:

  ```javascript
  /**
   * nth element in the fibonacci series.
   * @param n >= 0
   * @return the nth element, >= 0.
   */
  function fib(n) {
      var a = 1,
          b = 1
      var tmp
      while (--n >= 0) {
          tmp = a
          a += b
          b = tmp
      }
      return a
  }

  document.write(fib(10))
  ```

  ```python
  class Employee:
     empCount = 0

     def __init__(self, name, salary):
          self.name = name
          self.salary = salary
          Employee.empCount += 1
  ```

  # 5. Markdown 扩展

  Markdown 扩展支持:

  - 表格
  - 定义型列表
  - Html 标签
  - 脚注
  - 目录
  - 时序图与流程图
  - MathJax 公式

  ## 5.1 表格


  | Item     | Value  |
  | -------- | ------ |
  | Computer | \$1600 |
  | Phone    | \$12   |
  | Pipe     | \$1    |

  可以指定对齐方式, 如 Item 列左对齐, Value 列右对齐, Qty 列居中对齐


  | Item     |  Value | Qty |
  | :------- | -----: | :-: |
  | Computer | \$1600 |  5  |
  | Phone    |   \$12 | 12 |
  | Pipe     |    \$1 | 234 |

  ## 5.2 定义型列表

  名词 1
  : 定义 1（左侧有一个可见的冒号和四个不可见的空格）

  代码块 2
  : 这是代码块的定义（左侧有一个可见的冒号和四个不可见的空格）

  ```
      代码块（左侧有八个不可见的空格）
  ```

  ## 5.3 Html 标签

  支持在 Markdown 语法中嵌套 Html 标签，譬如，你可以用 Html 写一个纵跨两行的表格：

  ```html
  <table>
      <tr>
          <th rowspan="2">值班人员</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
      </tr>
      <tr>
          <td>李强</td>
          <td>张明</td>
          <td>王平</td>
      </tr>
  </table>
  ```

  <table>
      <tr>
          <th rowspan="2">值班人员</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
      </tr>
      <tr>
          <td>李强</td>
          <td>张明</td>
          <td>王平</td>
      </tr>
  </table>

  **提示**, 如果想对图片的宽度和高度进行控制, 你也可以通过img标签, 如:

  <img src="/bg.png" width="120px" />

  ## 5.4 脚注

  Sleepless[^footnote]来创建一个脚注

  ## 5.5 目录

  通过 `[TOC]` 在文档中插入目录, 如:

  [TOC]

  # 特殊元素

  键盘：<kbd>cmd+K</kbd>

  [^footnote]: ]: Sleepless是一款强大的开源云笔记产品.


title: 啊飒飒
slug: asaasdsadfsa
excerpt: 方式的发射点发射点发生
tags_json: []
visibility: private
body_markdown:
  撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的撒犯得上发射点发生大师傅似的


# rss_items

guid: https://www.zhangxinxu.com/wordpress/?p=12166
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/mediabunny-video-water-clip-merge/
title: 借助mediabunny纯JS实现视频水印、剪裁、合成等功能
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-17_152137.webp" width="160" height="103" alt="视频合成封面图" class="alignright size-medium" loading="lazy" />

  mediabunny是一个非常成熟的音视频处理工具库，目前是众多基于WebCodecs API的项目中出类拔萃的那一个，本文就将通过多个案例，展示如何使用mediabunny实现视频的水印、剪裁以及合成等。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-17_152137.webp" width="160" height="103" alt="视频合成封面图" class="alignright size-medium" loading="lazy" />

  mediabunny是一个非常成熟的音视频处理工具库，目前是众多基于WebCodecs API的项目中出类拔萃的那一个，本文就将通过多个案例，展示如何使用mediabunny实现视频的水印、剪裁以及合成等。


guid: https://www.zhangxinxu.com/wordpress/?p=12155
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/js-weakref/
title: 务必谨慎使用JS WeakRef弱引用
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-13_155748.webp" width="160" height="102" alt="WeakRef封面图" class="alignright size-medium" loading="lazy" />

  先前有WeakMap和WeakSet，现在又出了JS WeakRef弱引用，可以优化内存开销，看案例很有价值，不过无论是官方还是我个人都建议大家谨慎使用，这又是为何呢？

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-13_155748.webp" width="160" height="102" alt="WeakRef封面图" class="alignright size-medium" loading="lazy" />

  先前有WeakMap和WeakSet，现在又出了JS WeakRef弱引用，可以优化内存开销，看案例很有价值，不过无论是官方还是我个人都建议大家谨慎使用，这又是为何呢？


guid: https://www.zhangxinxu.com/wordpress/?p=12118
canonical_url: https://www.zhangxinxu.com/wordpress/2026/04/css-pyramidal-grid/
title: CSS六边形头像的实现与蜂巢布局
visibility: public
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-7_162049.jpeg" width="160" height="100" alt="蜂巢布局头像" class="alignright size-medium" loading="lazy" />

  如题，介绍六边形头像的CSS实现技巧，以及如何基于这个六边形实现高大上的蜂巢布局效果，又是展现CSS潜力的一天。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202604/2026-4-7_162049.jpeg" width="160" height="100" alt="蜂巢布局头像" class="alignright size-medium" loading="lazy" />

  如题，介绍六边形头像的CSS实现技巧，以及如何基于这个六边形实现高大上的蜂巢布局效果，又是展现CSS潜力的一天。


guid: https://www.zhangxinxu.com/wordpress/?p=12115
canonical_url: https://www.zhangxinxu.com/wordpress/2026/03/css-corner-shape-background-pattern/
title: CSS corner-shape与背景底纹技术
visibility: private
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-30_140506.jpeg" width="160" height="96" alt="背景底纹技术" class="alignright size-medium" loading="lazy" />

  corner-shape可以生成多种复杂的图形，那么，有没有什么办法把这些图形变成底纹背景呢？

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-30_140506.jpeg" width="160" height="96" alt="背景底纹技术" class="alignright size-medium" loading="lazy" />

  corner-shape可以生成多种复杂的图形，那么，有没有什么办法把这些图形变成底纹背景呢？


guid: https://www.zhangxinxu.com/wordpress/?p=12112
canonical_url: https://www.zhangxinxu.com/wordpress/2026/03/webtransport-api/
title: 浅学WebTransport API：下一代Web双向通信技术
visibility: private
summary:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-17_161657.png" width="160" height="97" alt="WebTransport封面图" class="alignright size-medium" loading="lazy" />

  WebSocket还没用明白，现在又出了个WebTransport API，也是用来实现实时通信的，更强大，更完美，所有现代浏览器都已支持，无论是高并发、低延时还是可以丢数据的场景都支持。

content_snippet:
  <img src="https://image.zhangxinxu.com/image/blog/202603/2026-3-17_161657.png" width="160" height="97" alt="WebTransport封面图" class="alignright size-medium" loading="lazy" />

  WebSocket还没用明白，现在又出了个WebTransport API，也是用来实现实时通信的，更强大，更完美，所有现代浏览器都已支持，无论是高并发、低延时还是可以丢数据的场景都支持。


# users

username: admin
email: 1549469775@qq.com
nickname: 神偷奶哥
password: $2b$10$myM4RbkRi0aJTDtnWe5tkOMlAxgikUiKyGKSDWnQCrJdyW4xEcAbS
role: admin
status: active
public_slug: xyx
bio_markdown:
  ---
  desc: 一切都仿若大梦一场
  ---
  萨达

  ![image.png](/public/upload/1777046217229-649127508-image.webp)

bio_visibility: public
avatar_visibility: public
discover_location: 南昌
social_links_json:
  [{"label":"GitHub","url":"https://github.com/npmrun","visibility":"public","icon":"i-simple-icons-github"},{"label":"个人站","url":"https://xieyaxin.top","visibility":"public","icon":"i-lucide-globe"}]


