feed.xml

  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
      <title>wxm&#39;s Blog</title>
      <link>https://wxmvv.github.io/blog</link>
      <description>Developer</description>
      <language>zh-cn</language>
      <managingEditor>wxmvv@outlook.com (wxm)</managingEditor>
      <webMaster>wxmvv@outlook.com (wxm)</webMaster>
      <lastBuildDate>Fri, 20 Mar 2026 00:00:00 GMT</lastBuildDate>
      <atom:link href="https://wxmvv.github.io/feed.xml" rel="self" type="application/rss+xml"/>
      
  <item>
    <guid>https://wxmvv.github.io/blog/code/ai/2026年的codex强的可怕</guid>
    <title>2026年的codex强的可怕</title>
    <link>https://wxmvv.github.io/blog/code/ai/2026年的codex强的可怕</link>
    <description>&lt;p&gt;codex真香，订阅了Plus会员一百多，用它把我的旧项目修了一个遍...就一个感受：额度太多了！用不完！根本用不完！&lt;/p&gt;
&lt;p&gt;gpt5.4 ! gpt5.4 ! gpt5.4 ! 香！&lt;/p&gt;
&lt;h2&gt;0405 补充&lt;/h2&gt;
&lt;p&gt;已经用了快一个月了，codex 给我的最大感受就是修 bug 真的很准！尤其是在公司有大型屎山项目的情况下，改 bug 甚至比 claude 还要准，并且用的 token 还少，这谁受的了。&lt;/p&gt;
&lt;p&gt;不过也不是没有缺点，比如 codex 的审美真的很拉，相比之下 Claude 设计的 UI 就要好看很多。还有就是如果启动一个新项目，尤其在架构设计方面，codex 给出的方案会非常抽象工程化，而且起名真的苦手，很多名字结构感觉都是直接从书上扒下来的，相比之下 Claude 给出的架构方案会更贴近实际情况，并且起名明显也是参考了不少实际项目。&lt;/p&gt;
&lt;p&gt;所以目前我也在更多使用 Claude 来制定开发计划，设计 UI，而让 codex 去执行，或者修 bug。&lt;/p&gt;
</description>
    <pubDate>Fri, 20 Mar 2026 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>codex</category><category>AI</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/homepage/实现一下液态玻璃效果</guid>
    <title>用html和css实现一下液态玻璃(liquid glass)效果</title>
    <link>https://wxmvv.github.io/blog/homepage/实现一下液态玻璃效果</link>
    <description>&lt;p&gt;&lt;a href=&quot;https://juejin.cn/post/7514618352829448244&quot;&gt;参考1 juejin&lt;/a&gt;
&lt;a href=&quot;https://kube.io/blog/liquid-glass-css-svg/&quot;&gt;参考2 kube.io&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;参考了大神的实现，自己又调整了参数，并且适配了黑暗模式，仅供参考。&lt;/p&gt;
&lt;p&gt;效果就在主页的菜单Hover就可以看到，在Safari中svg反射效果不生效，用Chrome就能正常显示。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;&amp;lt;div className=&amp;quot;liquid_glass-wrapper h-full w-full&amp;quot;&amp;gt;
  &amp;lt;svg style={{ display: &amp;quot;none&amp;quot; }}&amp;gt;
    &amp;lt;defs&amp;gt;
      &amp;lt;filter
        id=&amp;quot;liquid_glass_filter&amp;quot;
        x=&amp;quot;0%&amp;quot;
        y=&amp;quot;0%&amp;quot;
        width=&amp;quot;100%&amp;quot;
        height=&amp;quot;100%&amp;quot;
        filterUnits=&amp;quot;objectBoundingBox&amp;quot;
      &amp;gt;
        &amp;lt;feDisplacementMap scale=&amp;quot;200&amp;quot; /&amp;gt;
      &amp;lt;/filter&amp;gt;
    &amp;lt;/defs&amp;gt;
  &amp;lt;/svg&amp;gt;
  &amp;lt;div className=&amp;quot;liquid_glass-outer&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div className=&amp;quot;liquid_glass-cover&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div className=&amp;quot;liquid_glass-sharp&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;div className=&amp;quot;liquid_glass-reflect&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;适配了黑暗模式的css&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-css&quot;&gt;.liquid_glass-wrapper {
  --liquid_glass-border-radius: 1rem;
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid #00000020;
  background: linear-gradient(180deg, #ffffff10, #fafafa00);
  box-shadow:
    inset 0 2px 4px 0 #fff,
    inset 0 -4px 4px 0 hsla(0, 0%, 100%, 0.1),
    inset 0 -4px 16px 0 #fff,
    inset 0 4px 10px 0 hsla(240, 3%, 45%, 0.07),
    0 4px 14px -10px rgba(53, 53, 79, 0.4),
    0 11px 28px -10px rgba(53, 53, 79, 0.1);
  border-radius: var(--liquid_glass-border-radius);
}

.liquid_glass-border-radius {
  border-radius: var(--liquid_glass-border-radius);
}

.liquid_glass-outer {
  backdrop-filter: url(#liquid_glass_filter);
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--liquid_glass-border-radius);
  mask-image:
    url(&amp;#39;data:image/svg+xml;utf8,&amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;rect x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot; rx=&amp;quot;0&amp;quot; ry=&amp;quot;0&amp;quot; fill=&amp;quot;white&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;),
    url(&amp;#39;data:image/svg+xml;utf8,&amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;rect x=&amp;quot;5&amp;quot; y=&amp;quot;5&amp;quot; width=&amp;quot;calc(100% - 10px)&amp;quot; height=&amp;quot;calc(100% - 10px)&amp;quot; rx=&amp;quot;21&amp;quot; ry=&amp;quot;21&amp;quot; fill=&amp;quot;white&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;);
  mask-composite: exclude;
}

.liquid_glass-cover {
  backdrop-filter: blur(2px);
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--liquid_glass-border-radius);
  background: rgba(0, 0, 0, 0.02);
}

.liquid_glass-sharp {
  position: absolute;
  inset: 0;
  z-index: 3;
  box-shadow:
    inset 1px 1px 0px 0px rgba(255, 255, 255, 0.5),
    inset -1px -1px 0px 0px rgba(255, 255, 255, 0.6);
  border-radius: var(--liquid_glass-border-radius);
}

.liquid_glass-reflect {
  position: absolute;
  inset: 1px;
  z-index: 2;
  border-radius: var(--liquid_glass-border-radius);
}

.dark {
  /* https://juejin.cn/post/7514618352829448244 */
  .liquid_glass-wrapper {
    --liquid_glass-border-radius: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;

    border: 1px solid #ffffff20;
    background: linear-gradient(180deg, #ffffff10, #fafafa00);
    box-shadow:
      inset 0 2px 4px 0 #00000040,
      inset 0 -4px 4px 0 hsla(0, 0%, 0%, 0.1),
      inset 0 -4px 16px 0 #00000060,
      inset 0 4px 10px 0 hsla(0, 0%, 13%, 0.07),
      0 4px 14px -10px rgba(112, 112, 167, 0.4),
      0 11px 28px -10px rgba(53, 53, 79, 0.1);
    border-radius: var(--liquid_glass-border-radius);
  }

  .liquid_glass-border-radius {
    border-radius: var(--liquid_glass-border-radius);
  }

  .liquid_glass-outer {
    backdrop-filter: url(#liquid_glass_filter);
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--liquid_glass-border-radius);

    mask-image:
      url(&amp;#39;data:image/svg+xml;utf8,&amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;rect x=&amp;quot;0&amp;quot; y=&amp;quot;0&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot; rx=&amp;quot;0&amp;quot; ry=&amp;quot;0&amp;quot; fill=&amp;quot;white&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;),
      url(&amp;#39;data:image/svg+xml;utf8,&amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;100%&amp;quot; height=&amp;quot;100%&amp;quot;&amp;gt;&amp;lt;rect x=&amp;quot;5&amp;quot; y=&amp;quot;5&amp;quot; width=&amp;quot;calc(100% - 10px)&amp;quot; height=&amp;quot;calc(100% - 10px)&amp;quot; rx=&amp;quot;21&amp;quot; ry=&amp;quot;21&amp;quot; fill=&amp;quot;white&amp;quot;/&amp;gt;&amp;lt;/svg&amp;gt;&amp;#39;);
    mask-composite: exclude;
  }

  .liquid_glass-cover {
    backdrop-filter: blur(2px);
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--liquid_glass-border-radius);
    background: rgba(0, 0, 0, 0.02);
  }

  .liquid_glass-sharp {
    position: absolute;
    inset: 0;
    z-index: 3;
    box-shadow:
      inset 1px 1px 0px 0px rgba(255, 255, 255, 0.2),
      inset -1px -1px 0px 0px rgba(255, 255, 255, 0.3);
    border-radius: var(--liquid_glass-border-radius);
  }

  .liquid_glass-reflect {
    position: absolute;
    inset: 1px;
    z-index: 2;
    border-radius: var(--liquid_glass-border-radius);
  }
}
&lt;/code&gt;&lt;/pre&gt;
</description>
    <pubDate>Fri, 06 Feb 2026 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>animation</category><category>css</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/music/work-music</guid>
    <title>20251013 work music sharing</title>
    <link>https://wxmvv.github.io/blog/music/work-music</link>
    <description>&lt;h2&gt;youtube take your time&lt;/h2&gt;
&lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=&quot;330&quot; height=&quot;450&quot; src=&quot;//music.163.com/outchain/player?type=4&amp;id=1228137686&amp;auto=0&amp;height=430&quot;&gt;&lt;/iframe&gt;

&lt;h2&gt;youtube utopic_dreamer&lt;/h2&gt;
&lt;iframe frameborder=&quot;no&quot; border=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot; width=&quot;330&quot; height=&quot;450&quot; src=&quot;//music.163.com/outchain/player?type=4&amp;id=1230910500&amp;auto=0&amp;height=430&quot;&gt;&lt;/iframe&gt;
</description>
    <pubDate>Mon, 13 Oct 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>music</category><category>music share</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/js/完全解决nvm启动速度慢的问题2</guid>
    <title>完全解决nvm启动速度慢的问题2</title>
    <link>https://wxmvv.github.io/blog/code/js/完全解决nvm启动速度慢的问题2</link>
    <description>&lt;p&gt;时隔 3 年，我终于找到了彻底解决 nvm 启动速度慢的方法，并且这个方法对 macOS 和 Windows 系统都有效！&lt;/p&gt;
&lt;p&gt;那就是：删掉 nvm 使用 fnm！&lt;/p&gt;
&lt;p&gt;几乎一样的使用方式，完全没有迁移成本！速度贼快！&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/Schniz/fnm?tab=readme-ov-file#shell-setup&quot;&gt;fnm&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Thu, 03 Jul 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>shell</category><category>macos</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/homepage/aria2Helper最新版本1_4</guid>
    <title>Aria2Helper新版本1.4来啦!!</title>
    <link>https://wxmvv.github.io/blog/homepage/aria2Helper最新版本1_4</link>
    <description>&lt;p&gt;距离上一次更新已经很久了，这次更新带来了新的 setting 界面，使用 tailwind+daisyUI 重新构建，整体设计参考苹果系统的设置，以及&lt;a href=&quot;https://github.com/zerebos/ghostty-config&quot;&gt;ghostty-config&lt;/a&gt;项目，并且添加了更多的色彩主题。&lt;/p&gt;
&lt;p&gt;项目地址: &lt;a href=&quot;https://github.com/wxmvv/Aria2Helper-for-Safari&quot;&gt;Aria2Helper for Safari&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://wxmvv.github.io/static/images/Aria2HelperForSafari/Aria2HelperForSafariNewSettings1.png&quot; alt=&quot;setting1&quot;&gt;
&lt;img src=&quot;https://wxmvv.github.io/static/images/Aria2HelperForSafari/Aria2HelperForSafariNewSettings2.png&quot; alt=&quot;setting2&quot;&gt;&lt;/p&gt;
</description>
    <pubDate>Sat, 28 Jun 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>safari</category><category>Aria2Helper</category><category>my app</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/homepage/MyTuner也上线啦</guid>
    <title>MyTuner也上线啦，简约设计的调音器，支持多种乐器~</title>
    <link>https://wxmvv.github.io/blog/homepage/MyTuner也上线啦</link>
    <description>&lt;img src=&quot;https://github.com/wxmvv/MyTuner/raw/main/Images/icon.png&quot; width=&quot;60&quot; height=&quot;60&quot; align=&quot;center&quot; /&gt;

&lt;h2&gt;链接&lt;/h2&gt;
&lt;p&gt;项目地址: &lt;a href=&quot;https://github.com/wxmvv/MyTuner&quot;&gt;My Tuner&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;商店链接：&lt;a href=&quot;https://apps.apple.com/app/id6746087511&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/wxmvv/MyTuner/refs/heads/main/Images/appstore.svg&quot; alt=&quot;Download on the App Store&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;预览&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Dark&lt;/th&gt;
&lt;th&gt;Light&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
&lt;td&gt;&lt;img src=&quot;https://raw.githubusercontent.com/wxmvv/MyTuner/refs/heads/main/Images/ios-dark-shortcut.png&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
&lt;td&gt;&lt;img src=&quot;https://raw.githubusercontent.com/wxmvv/MyTuner/refs/heads/main/Images/ios-light-shortcut.png&quot; alt=&quot;&quot;&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;h2&gt;介绍&lt;/h2&gt;
&lt;p&gt;大概花了半个月时间，断断续续把这个 My Tuner 完成了。&lt;/p&gt;
&lt;p&gt;一开始在 AI 的建议下从 0 开始码了一个版本，自己实现了一个 FFT 音高识别，无奈的是准确度有点低，最后只能先放弃，最后参考了 AudioKit 这个库实现的音高识别，准确度大大提高。&lt;/p&gt;
&lt;p&gt;其他的功能包括设置的实现都相对简单，也算是从编程的角度对音调又有了一些更全面的尝试。&lt;/p&gt;
&lt;p&gt;欢迎大家下载下来尝试～&lt;/p&gt;
</description>
    <pubDate>Tue, 27 May 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>music</category><category>iOS</category><category>my app</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/note/aria2Helper更新1.1</guid>
    <title>Aria2Helper更新1.1 !</title>
    <link>https://wxmvv.github.io/blog/note/aria2Helper更新1.1</link>
    <description>&lt;p&gt;最近在使用过程中遇到一些小 bug，于是修复了一下更新了 1.1 版本，顺便添加了新功能：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;添加了监听白名单于黑名单&lt;/li&gt;
&lt;li&gt;popup 页面添加了监听快捷按钮&lt;/li&gt;
&lt;li&gt;添加了多语言支持&lt;/li&gt;
&lt;li&gt;更新了 icon&lt;/li&gt;
&lt;li&gt;更新了 UI 界面&lt;/li&gt;
&lt;li&gt;修复了一些 content 脚本 bug&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;项目地址: &lt;a href=&quot;https://github.com/wxmvv/Aria2Helper-for-Safari&quot;&gt;Aria2Helper for Safari&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;App 文件: &lt;a href=&quot;https://wxmvv.github.io/static/file/aria2Helper.zip&quot;&gt;Aria2Helper.zip&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Sat, 15 Mar 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>safari</category><category>Aria2Helper</category><category>my app</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/vpn/VPS下载测速文件100M1GB10GB</guid>
    <title>VPS下载测速文件100M/1GB/10GB</title>
    <link>https://wxmvv.github.io/blog/vpn/VPS下载测速文件100M1GB10GB</link>
    <description>&lt;blockquote&gt;
&lt;p&gt;转载自 &lt;a href=&quot;https://lot.pm/vps-download-speedtest-files.html&quot;&gt;lot.pm&lt;/a&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2&gt;推荐：全球通用（Cloudflare Anycast）&lt;/h2&gt;
&lt;p&gt;速度极快，推荐国外使用。&lt;/p&gt;
&lt;h3&gt;100MB&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://speed.cloudflare.com/__down?during=download&amp;amp;bytes=104857600
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;1GB&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://speed.cloudflare.com/__down?during=download&amp;amp;bytes=1073741824
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;10GB&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://speed.cloudflare.com/__down?during=download&amp;amp;bytes=10737418240
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;中国大陆推荐&lt;/h2&gt;
&lt;h3&gt;200MB（QQ）&lt;/h3&gt;
&lt;p&gt;腾讯 CDN 加速。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://dldir1.qq.com/qqfile/qq/PCQQ9.7.17/QQ9.7.17.29225.exe
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;300MB（阿里 CDN)&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://wirelesscdn-download.xuexi.cn/publish/xuexi_android/latest/xuexi_android_10002068.apk
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;1000MB (教育网)&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://speedtest.zju.edu.cn/1000M
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;1GB/10GB（电信）&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://vipspeedtest8.wuhan.net.cn:8080/download?size=1073741824

http://vipspeedtest8.wuhan.net.cn:8080/download?size=10737418240
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;2GB（推荐）&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;自适应 https://dlied4.myapp.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
联通 https://ml-dlied4.bytes.tcdnos.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
移动 https://875e1151af8aa9e3b793f51f6049996d.dlied1.cdntips.net/dlied4.myapp.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
电信 https://dlied4.csy.tcdnos.com/myapp/1104466820/cos.release-40109/10040714_com.tencent.tmgp.sgame_a2480356_8.2.1.9_F0BvnI.apk
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;3GB（Apple）&lt;/h3&gt;
&lt;p&gt;国内似乎用的是金山 CDN，国际是 Akamai 和苹果自家 CDN。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://updates-http.cdn-apple.com/2019WinterFCS/fullrestores/041-39257/32129B6C-292C-11E9-9E72-4511412B0A59/iPhone_4.7_12.1.4_16D57_Restore.ipsw
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;亚洲&lt;/h2&gt;
&lt;h3&gt;中国香港&lt;/h3&gt;
&lt;p&gt;100MB （Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://hkg.download.datapacket.com/100mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1000MB（Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://hkg.download.datapacket.com/1000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10000MB（Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://hkg.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;新加坡&lt;/h3&gt;
&lt;p&gt;100/1000/10000MB （Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://sgp.download.datapacket.com/100mb.bin
http://sgp.download.datapacket.com/1000mb.bin
http://sgp.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://sgp.proof.ovh.net/files/100Mb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://sgp-ping.vultr.com/vultr.com.100MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://sgp.proof.ovh.net/files/1Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://sgp-ping.vultr.com/vultr.com.1000MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://sgp.proof.ovh.net/files/10Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;日本东京&lt;/h3&gt;
&lt;p&gt;100/1000/10000MB （Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://tyo.download.datapacket.com/100mb.bin
http://tyo.download.datapacket.com/1000mb.bin
http://tyo.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB/1GB（Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://hnd-jp-ping.vultr.com/vultr.com.100MB.bin
https://hnd-jp-ping.vultr.com/vultr.com.1000MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;欧洲&lt;/h2&gt;
&lt;h3&gt;德国&lt;/h3&gt;
&lt;p&gt;推荐使用 Hetzner 的测速文件。&lt;br&gt;100MB（Nuremberg-Hetzner）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://nbg1-speed.hetzner.com/100MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（Frankfurt-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://fra-de-ping.vultr.com/vultr.com.100MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（Nuremberg-Hetzner）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://nbg1-speed.hetzner.com/1GB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（Frankfurt-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://fra-de-ping.vultr.com/vultr.com.1000MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（Nuremberg-Hetzner）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://nbg1-speed.hetzner.com/10GB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（Frankfurt-Hivelocity）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://speedtest.fra1.hivelocity.net/10GiB.file
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;法国&lt;/h3&gt;
&lt;p&gt;100/1000/10000MB （Datapacket/CDN77）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://par.download.datapacket.com/100mb.bin
http://par.download.datapacket.com/1000mb.bin
http://par.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://gra.proof.ovh.net/files/100Mb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://gra.proof.ovh.net/files/1Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://gra.proof.ovh.net/files/10Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;北美&lt;/h2&gt;
&lt;h3&gt;美西&lt;/h3&gt;
&lt;p&gt;100/1000/10000MB （Datapacket/CDN77 洛杉矶）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://lax.download.datapacket.com/100mb.bin
http://lax.download.datapacket.com/1000mb.bin
http://lax.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（Oregon-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://hil.proof.ovh.us/files/100Mb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（LA-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://lax-ca-us-ping.vultr.com/vultr.com.100MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（Oregon-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://hil.proof.ovh.us/files/1Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（LA-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://lax-ca-us-ping.vultr.com/vultr.com.1000MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（Oregon-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://hil.proof.ovh.us/files/10Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB （Oregon-Hetzner）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://hil-speed.hetzner.com/10GB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;美东&lt;/h3&gt;
&lt;p&gt;100/1000/10000MB （Datapacket/CDN77 阿什本）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;http://ash.download.datapacket.com/100mb.bin
http://ash.download.datapacket.com/1000mb.bin
http://ash.download.datapacket.com/10000mb.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（Virginia-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://vin.proof.ovh.us/files/100Mb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;100MB（New Jersey-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://nj-us-ping.vultr.com/vultr.com.100MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（Virginia-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://vin.proof.ovh.us/files/1Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;1GB（New Jersey-Vultr）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://nj-us-ping.vultr.com/vultr.com.1000MB.bin
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（Virginia-OVH）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://vin.proof.ovh.us/files/10Gb.dat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;10GB（Virginia-Hetzner）&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;https://ash-speed.hetzner.com/10GB.bin
&lt;/code&gt;&lt;/pre&gt;
</description>
    <pubDate>Sat, 15 Mar 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>code</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/note/safari插件Aria2Helper开发</guid>
    <title>Safari插件Aria2Helper开发踩坑集</title>
    <link>https://wxmvv.github.io/blog/note/safari插件Aria2Helper开发</link>
    <description>&lt;p&gt;花了大概 1 周多时间，断断续续终于把这个 Aria2Helper 插件完成了。如果使用有什么问题也可以邮寄联系我，或者在 github 上提 issue。&lt;/p&gt;
&lt;p&gt;项目地址: &lt;a href=&quot;https://github.com/wxmvv/Aria2Helper-for-Safari&quot;&gt;Aria2Helper for Safari&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;App 文件: &lt;a href=&quot;https://wxmvv.github.io/static/file/aria2Helper.zip&quot;&gt;Aria2Helper for Safari.zip&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;商店链接&lt;/h2&gt;
&lt;p&gt;也欢迎去 App Store 下载，支持一下我的开发。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://apps.apple.com/us/app/aria2helper/id6742623503#?platform=mac&quot;&gt;&lt;img src=&quot;https://raw.githubusercontent.com/wxmvv/Aria2Helper-for-Safari/refs/heads/main/Shared%20(Extension)/Download_on_the_Mac_App_Store_Badge_US-UK_RGB_blk_092917.svg&quot; alt=&quot;Download on the Mac App Store&quot;&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;为何而做&lt;/h2&gt;
&lt;p&gt;Safari 本身的下载器无法断点续传，下载大文件到一半断网后重新下载需要重新下载，实在是让人崩溃。如果想使用其他下载方式则需要复制粘贴下载链接，如果需要下载的链接一多真的是鼠标点爆炸。在 chrome 有很多好用的插件可以通过设置 rpc 来想配合 Motrix 下载文件，而且都包含下载拦截功能，在我搜索了 app store 之后也没有看到相关功能的插件。于是决定自己开发一个。&lt;/p&gt;
&lt;h2&gt;主要功能&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;通过多种方式在 Safari 中快速添加下载链接到 Aria2&lt;/li&gt;
&lt;li&gt;实时显示 Aria2 的任务下载进度&lt;/li&gt;
&lt;li&gt;支持 Aria2 的多种功能，如暂停、删除、强制开始、强制暂停、强制移除等&lt;/li&gt;
&lt;li&gt;支持对点击下载链接拦截，使用 aria2 代替 Safari 下载&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;遇到的一些问题与解决&lt;/h2&gt;
&lt;ol&gt;
&lt;li&gt;safari 不支持 notification&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;在&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API/notifications&quot;&gt;mdn notification 文档&lt;/a&gt;最下面可以看到 safari 并不支持，但是我确实有在其他 safari 中看到调用 notifications 的案例。其实他们是使用的 app 端口的 notifications API，需要将信息从 web 项目发送到 app 端，然后通过 app 展示。&lt;/p&gt;
&lt;ol start=&quot;2&quot;&gt;
&lt;li&gt;safari 不支持 browser.download API&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;本来想用 browser.download 这个来实现获取默认下载然后发送 aria2 的，但是&lt;a href=&quot;https://developer.apple.com/forums/thread/660046&quot;&gt;safari 不支持 browser.download API&lt;/a&gt;，于是考虑其他方案，经过尝试，选择了拦截用户点击请求的方式，拦截后获取点击链接中的文件链接，然后发送到 aria2。&lt;/p&gt;
&lt;ol start=&quot;3&quot;&gt;
&lt;li&gt;web 插件开发中 popup 页面的背景问题&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;我在插件中的 popup 页面，的很多地方使用了透明背景，如果是第一次运行，它会像 chrome 插件一样显示白色或黑色的背景(根据电脑是否黑暗模式)，但是当你的 safari 运行一段时间后，它的背景色会消失，变成苹果的磨砂玻璃背景，虽然很好看，但是完全随机发生,目前没有好的解决办法。&lt;/p&gt;
&lt;ol start=&quot;4&quot;&gt;
&lt;li&gt;动态获取并设置 body 宽度造成的问题&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;因为我是希望开发一个外观类似 safari 本身下载器外形的插件，所以想动态设置 body 宽度。
具体实现是先将 body 的宽设置为 auto，在打开 popup 页面是根据下载项中的最宽一项设置 body 宽度，但这样会在打开的一瞬间 body 还没有设置 width，导致页面大小闪烁，无法接受，最后还是选择了使用固定宽度。&lt;/p&gt;
&lt;ol start=&quot;5&quot;&gt;
&lt;li&gt;app 开发模式中的调试问题&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;其中有一个 &lt;code&gt;os_log()&lt;/code&gt; 函数用于调试，但是输出不知道在哪，后来才发现是系统自带 console.app，在这里面搜索就能看到，记得打开流式传输。&lt;/p&gt;
&lt;p&gt;还有，如果使用 &lt;code&gt;%@&lt;/code&gt; 来作为占位符，则在控制台中会显示 &amp;quot;pravite&amp;quot; 标签 ,如果像明文显示信息，可以使用 &lt;code&gt;%{public}s&lt;/code&gt; 来作为占位符。&lt;/p&gt;
&lt;ol start=&quot;6&quot;&gt;
&lt;li&gt;xcode 打包之后，再 run 有概率会让 safari 的 app 出现错误&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;解决办法就是 product -&amp;gt; clean build folder,如果还是有问题就打开 build 文件夹 Show Build Folder in Finder，然后将里面的文件夹都删了，在重启 safari 就好了。&lt;/p&gt;
&lt;ol start=&quot;7&quot;&gt;
&lt;li&gt;&lt;p&gt;关于在 css 中使用系统色
&lt;code&gt;background: -apple-system-control-accent;&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://stackoverflow.com/questions/62797493/how-can-i-use-the-macos-system-accent-color-in-css&quot;&gt;stackoverflow 参考&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;h2&gt;最后&lt;/h2&gt;
&lt;p&gt;比预计多花了不少时间，但是总算是完成了，后续再慢慢优化吧。&lt;/p&gt;
&lt;p&gt;也想总结下 safari 插件开发的一些经验，方便以后开发。&lt;/p&gt;
</description>
    <pubDate>Fri, 31 Jan 2025 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>safari</category><category>Aria2Helper</category><category>my app</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/note/终于通关八方旅人2</guid>
    <title>终于通关八方旅人2</title>
    <link>https://wxmvv.github.io/blog/note/终于通关八方旅人2</link>
    <description>&lt;p&gt;断断续续终于通关了八方旅人 2，这么久才通过一方面是最近时间少，另一方面是我的心里总是会有一些复杂的情绪，让我不想通关，希望故事能一直持续下去。&lt;/p&gt;
&lt;p&gt;音乐部分很棒，在编曲方面可以说全面性的丰富了，不过再回去听 1 代的音乐，虽然没有 2 代乐器更多，编织更丰富，但是依然有很多亮点。仅仅听着音乐久可以让我在城镇树林间穿梭时沉浸其中。&lt;/p&gt;
&lt;p&gt;剧情部分相比 1 代丰富了不少，每个人多了一个剧情场景，而且还多了双人剧情，用一条暗线将每个角色联系在一起。不过也有一些莫名其妙的狗血剧情，比如我使用的盗贼小姐开局，前三章玩完觉得有点意思，一个很正的复仇舞台剧，从杀“蛇父”那里就开始不对劲了，本来觉得“复仇爽”的故事，一下变成了狗血伦理剧？当时看完剧情的我满头问号。虽然有狗血的，但是也有我觉得很亮眼的剧情设计，比如商人部分，尤其是最后富豪开着船来支援的时候，还有最后的大战火车，这的让我有一种中二的热血感，很赞。 其他的，如猎人，神官，舞娘的剧情也都很有意思，让我印象深刻。&lt;/p&gt;
&lt;p&gt;不过，无论是怎样精彩的旅途，也难免有结束的时候，希望下一作尽快来吧～&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/OctopathTraveller2/%E6%88%AA%E5%B1%8F2024-12-05%2008.51.49.jpg&quot; alt=&quot;决战！&quot;&gt;
&lt;img src=&quot;/static/images/OctopathTraveller2/%E6%88%AA%E5%B1%8F2024-12-05%2009.02.23.jpg&quot; alt=&quot;商人&quot;&gt;
&lt;img src=&quot;/static/images/OctopathTraveller2/%E6%88%AA%E5%B1%8F2025-02-24%2016.34.55.jpg&quot; alt=&quot;大侦探题米诺斯&quot;&gt;
&lt;img src=&quot;/static/images/OctopathTraveller2/%E6%88%AA%E5%B1%8F2025-02-28%2015.15.20.jpg&quot; alt=&quot;舞王&quot;&gt;&lt;/p&gt;
</description>
    <pubDate>Tue, 03 Dec 2024 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>note</category><category>吐槽</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/macos/parallels_desktop20</guid>
    <title>Parallels Desktop 20.1.1 55740</title>
    <link>https://wxmvv.github.io/blog/code/macos/parallels_desktop20</link>
    <description>&lt;p&gt;不得不说 PD 真的很流氓，之前买过两年，大版本一更新，旧的版本会出现各种问题，而且所谓的更新才能用新系统大部分时候也只是加了个版本号检测，纯纯逼你花钱买新版。&lt;/p&gt;
&lt;h2&gt;pd 本体&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://download.parallels.com/desktop/v20/20.1.1-55740/ParallelsDesktop-20.1.1-55740.dmg&quot;&gt;Parallels Desktop 20.1.1 55740&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;crack 补丁&lt;/h2&gt;
&lt;p&gt;注意：需要先关闭 SIP&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://1drv.ms/u/s!AujtcnlMx9Vsg-4eYTiqBwDZsR3XjQ?e=EXanJD&quot;&gt;Parallels Desktop Activation Tool SIPOFF 6.3.0 MacKed&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Thu, 21 Nov 2024 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>macos</category><category>app</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/js/blog新的动画效果</guid>
    <title>blog 新的动画效果</title>
    <link>https://wxmvv.github.io/blog/code/js/blog新的动画效果</link>
    <description>&lt;p&gt;页面出现的线性的动画，之前在刚开始重构 blog 时就想实现，不过因为当时比较忙，就暂时搁置了，最近有空，就还是使用 motion 库来实现一下。&lt;/p&gt;
&lt;h2&gt;需要实现的效果&lt;/h2&gt;
&lt;p&gt;页面元素依次出现，首先是过渡动画包括 opacity blur X 这三部分的变化，并且需要有一个 delay 的效果，让元素一个一个的出现。&lt;/p&gt;
&lt;h2&gt;实现思路&lt;/h2&gt;
&lt;p&gt;opacity blur X 这种变化，使用 motion 实现十分简单，甚至用原生 js 也很简单，问题在于 delay 的效果。页面有很多元素 甚至包括需要渲染的列表，如果一个一个添加恐怕是十分浪费时间。&lt;/p&gt;
&lt;p&gt;花了一点时间仔细查了 motion 的文档，发现一个好东西 &lt;code&gt;staggerChildren&lt;/code&gt; (&lt;a href=&quot;https://motion.dev/docs/react-transitions&quot;&gt;文档&lt;/a&gt;) ,使用这个配合 &lt;code&gt;variants&lt;/code&gt; 属性，可以轻松实现元素和子元素的依次出现。&lt;/p&gt;
&lt;h2&gt;代码&lt;/h2&gt;
&lt;p&gt;先新建一个 &lt;code&gt;motionVariants.tsx&lt;/code&gt; 组件重复调用。在其中定义 &lt;code&gt;containerVariants&lt;/code&gt; 和 &lt;code&gt;itemVariants&lt;/code&gt;。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;export const containerVariants = {
  hidden: {
    opacity: 0,
    filter: &amp;quot;blur(8px)&amp;quot;,
    transform: &amp;quot;translateY(16px) translateZ(0)&amp;quot;,
  },
  visible: {
    opacity: 1,
    filter: &amp;quot;blur(0)&amp;quot;,
    transform: &amp;quot;none&amp;quot;,
    transition: {
      transform: { duration: 0.4, timeConstant: 750 },
      opacity: { duration: 0.7, timeConstant: 350 },
      filter: { duration: 0.8, timeConstant: 350 },
      type: &amp;quot;tween&amp;quot;,
      duration: 0.6,
      ease: [0.25, 0.3, 0.5, 1],
      delayChildren: 0,
      //   staggerChildren: 0.12, // 每个子项之间的延迟时间
      staggerChildren: 0.08, // 每个子项之间的延迟时间
    },
  },
};
export const itemVariants = {
  hidden: {
    opacity: 0,
    filter: &amp;quot;blur(8px)&amp;quot;,
    transform: &amp;quot;translateY(16px) translateZ(0)&amp;quot;,
    transition: {},
  },
  visible: {
    opacity: 1,
    filter: &amp;quot;blur(0)&amp;quot;,
    transform: &amp;quot;none&amp;quot;,
    transition: {
      transform: { duration: 0.2, timeConstant: 350 },
      opacity: { duration: 0.4, timeConstant: 350 },
      filter: { duration: 0.4, timeConstant: 350 },
      duration: 0.4,
      ease: [0.25, 0.3, 0.5, 1],
    },
  },
};
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;在你的组件中添加效果&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;import { motion } from &amp;#39;framer-motion&amp;#39;
import { containerVariants, itemVariants } from &amp;#39;@/components/MyMotion&amp;#39;
  return (
    &amp;lt;&amp;gt;
      &amp;lt;motion.div variants={containerVariants} initial=&amp;quot;hidden&amp;quot; animate=&amp;quot;visible&amp;quot;&amp;gt;
          &amp;lt;motion.div variants={itemVariants}&amp;gt;
            &amp;lt;h2&amp;gt;title&amp;lt;/h2&amp;gt;
          &amp;lt;/motion.div&amp;gt;
          &amp;lt;motion.div variants={itemVariants}&amp;gt;
            &amp;lt;p&amp;gt;body&amp;lt;/p&amp;gt;
          &amp;lt;/motion.div&amp;gt;
          &amp;lt;motion.div variants={itemVariants}&amp;gt;
            &amp;lt;p&amp;gt;link&amp;lt;/p&amp;gt;
          &amp;lt;/motion.div&amp;gt;
      &amp;lt;/div&amp;gt;
    &amp;lt;/&amp;gt;
  )
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;最终效果&lt;/h2&gt;
&lt;div className=&quot;flex flex-row justify-center bg-zinc-100 rounded-sm &quot;&gt;
  &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded&quot;&gt;
    &lt;source src=&quot;/static/video/blog新的动画.mp4&quot; type=&quot;video/mp4&quot; /&gt;
  &lt;/video&gt;
&lt;/div&gt;
</description>
    <pubDate>Sat, 16 Nov 2024 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>css</category><category>js</category><category>animation</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/macos/AppleScript实现鼠标连点</guid>
    <title>AppleScript 实现鼠标连点</title>
    <link>https://wxmvv.github.io/blog/code/macos/AppleScript实现鼠标连点</link>
    <description>&lt;p&gt;因为最近在玩一个老游戏，开了作弊但是还需要手动点击才能升级，于是使用 applescript 来实现一下自动点击。&lt;/p&gt;
&lt;h2&gt;事前准备&lt;/h2&gt;
&lt;p&gt;鼠标点击使用 cliclick 包,可以使用 brew 安装 &lt;code&gt;brew install cliclick&lt;/code&gt; 键盘则直接使用 applescript 即可&lt;/p&gt;
&lt;h2&gt;脚本实现&lt;/h2&gt;
&lt;h3&gt;鼠标点击&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;-- 定义点击位置,点击次数,点击间隔
set x to 615
set y to 461
set clickNum to 1000
set clickNum to 0.4
-- 执行点击
repeat clickNum times
do shell script &amp;quot;/usr/local/bin/cliclick c:&amp;quot; &amp;amp; x &amp;amp; &amp;quot;,&amp;quot; &amp;amp; y
delay delayNum -- 调整延迟以控制点击速度
end repeat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;使用步骤如下&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;然后通过命令行&lt;code&gt;cliclick p&lt;/code&gt;获取你想点击的位置&lt;/li&gt;
&lt;li&gt;填入 x,y,clickNum,clickNum 四个变量,运行即可&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;也可以配合电脑中的 shortcut 来实现快捷键启动&lt;/p&gt;
&lt;h3&gt;键盘输入&lt;/h3&gt;
&lt;ol&gt;
&lt;li&gt;输入文字&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;-- 定义输入内容
set inputText to &amp;quot;hello world&amp;quot;
-- 执行输入
tell application &amp;quot;System Events&amp;quot;
    keystroke inputText
end tell
&lt;/code&gt;&lt;/pre&gt;
&lt;ol&gt;
&lt;li&gt;模拟键盘按键&lt;/li&gt;
&lt;/ol&gt;
&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;-- 激活目标应用，比如 Safari
tell application &amp;quot;Safari&amp;quot;
    activate
end tell

-- 设置按键组合的次数和延迟
set pressCount to 10 -- 重复次数
set delayTime to 0.1 -- 每次按键后的延迟（秒）

-- 模拟键盘连按
repeat pressCount times
    tell application &amp;quot;System Events&amp;quot;
        key code 49 -- 这里的 49 是空格键的 keycode
        delay delayTime
    end tell
end repeat
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;其中的 keycode 是对应键盘的键码,可以通过&lt;code&gt;System Events&lt;/code&gt;中的&lt;code&gt;key code&lt;/code&gt;来使用, &lt;a href=&quot;https://web.archive.org/web/20100501161453/http://www.classicteck.com/rbarticles/mackeyboard.php&quot;&gt;keycode&lt;/a&gt; 在这里可以查看 keycode 列表,顺便我也在下面也列出一些常用按键的键码&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;键&lt;/th&gt;
&lt;th&gt;键码&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
&lt;td&gt;Enter&lt;/td&gt;
&lt;td&gt;36&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Backspace&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Tab&lt;/td&gt;
&lt;td&gt;48&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;空格&lt;/td&gt;
&lt;td&gt;49&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Delete&lt;/td&gt;
&lt;td&gt;51&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Escape&lt;/td&gt;
&lt;td&gt;53&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Command&lt;/td&gt;
&lt;td&gt;55&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Shift&lt;/td&gt;
&lt;td&gt;56&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Caps Lock&lt;/td&gt;
&lt;td&gt;57&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Option&lt;/td&gt;
&lt;td&gt;58&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Control&lt;/td&gt;
&lt;td&gt;59&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;方向左&lt;/td&gt;
&lt;td&gt;123&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;方向右&lt;/td&gt;
&lt;td&gt;124&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;方向下&lt;/td&gt;
&lt;td&gt;125&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;方向上&lt;/td&gt;
&lt;td&gt;126&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;h2&gt;参考&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://web.archive.org/web/20100501161453/http://www.classicteck.com/rbarticles/mackeyboard.php&quot;&gt;keycode&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;a href=&quot;https://developer.apple.com/library/archive/documentation/AppleScript/Conceptual/AppleScriptLangGuide/reference/ASLR_classes.html#//apple_ref/doc/uid/TP40000983-CH1g-SW15&quot;&gt;AppleScript Language Guide&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
</description>
    <pubDate>Sun, 13 Oct 2024 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>applescript</category><category>macos</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/ios/使用Capacitor来构建你的app吧！</guid>
    <title>使用 Capacitor 来构建你的 app 吧！</title>
    <link>https://wxmvv.github.io/blog/code/ios/使用Capacitor来构建你的app吧！</link>
    <description>&lt;p&gt;capacitor[^doc] 作为一个跨平台 ios 和安卓的框架，本身和 flutter、RN 并不是同一赛道，capacitor 在官网也清晰的写着，基于两个平台 webview 来展示你的 html 静态网站，我们可以先用各种框架如 vue、react 来写一个静态网站，然后使用 capacitor 来把它变成 app，或者仅仅把它当成一个 app 的扩展工具，用 js 库来实现一些原生不太好实现的功能。相比直接用 capacitor 来构建 app，把它作为一个 js 扩展应该是一个更好的选择。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://capacitorjs.com/&quot;&gt;doc&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;简单尝试&lt;/h2&gt;
&lt;h3&gt;随便新建一个项目&lt;/h3&gt;
&lt;p&gt;我这里新建了一个 nextjs 项目。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;npx create-next-app@latest
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;记得在 next.config 中设定 output。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;output: &amp;quot;export&amp;quot;,
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;安装 Capacitor&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;# 安装cap命令
npm install @capacitor/cli @capacitor/core
# 新建cap项目
npx cap init
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;你可以看到目录中出现了 capacitor.config.json
下面有一个简单的设置。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-json&quot;&gt;{
  &amp;quot;appId&amp;quot;: &amp;quot;com.example.captest&amp;quot;, //唯一id
  &amp;quot;appName&amp;quot;: &amp;quot;captest&amp;quot;,
  &amp;quot;webDir&amp;quot;: &amp;quot;out&amp;quot;, //这个是静态网站的位置，nextjs导出的静态页面在out文件夹
  &amp;quot;server&amp;quot;: {
    &amp;quot;url&amp;quot;: &amp;quot;http://127.0.0.1:3000&amp;quot;, //这里设定是对应nextjs dev模式的端口，设定后可以热更新
    &amp;quot;cleartext&amp;quot;: true
  }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;安装 cap 对应 sdk&lt;/h3&gt;
&lt;p&gt;这里以 ios 项目为例，&lt;/p&gt;
&lt;p&gt;这里特别说一下在 ios 开发中需要安装 cocoapods，如果正常安装出错可以使用 brew 安装，我有个专门的日志写了如何解决这个问题。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;# 先把nextjs的预览打开
npm run dev
# 安装cap包
npm install @capacitor/ios @capacitor/android
# 添加ios支持
npx cap add ios
# 使用原生app xcode打开app,可以查看原生代码，然后编译在模拟器执行
npx cap open ios
# 或者不打开xocde 通过命令行直接编译
npx cap run ios
# 可以打开同步，这样就可以热更新了
npx cap sync
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/capacitor/capacitor%E9%A2%84%E8%A7%881.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;这样一个可预览的 nextjs 的 app 就出来啦～&lt;/p&gt;
&lt;p&gt;是不是很简单～&lt;/p&gt;
&lt;p&gt;不过对比 flutter 和 RN 速度上明显还是有差距，还是要根据具体情况使用。&lt;/p&gt;
</description>
    <pubDate>Sun, 11 Aug 2024 20:47:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>capacitor</category><category>iOS</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/ios/解决安装cocoapods失败的问题</guid>
    <title>解决安装 cocoapods 失败的问题</title>
    <link>https://wxmvv.github.io/blog/code/ios/解决安装cocoapods失败的问题</link>
    <description>&lt;p&gt;最近在尝试使用 capacitor 制作 ios app，涉及到使用 cocoapods 来安装插件，但是 macos 安装会出现各种问题，经过查看各种方法，最后还是使用 brew 成功的。&lt;/p&gt;
&lt;p&gt;其实主要问题在于 macos 自带的 ruby 版本比较低，&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;ruby --version
# 查看ruby版本 如果是2.6那说明你需要这个教程
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;首先使用 brew 安装 ruby&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-sh&quot;&gt;# 安装ruby
brew install ruby
# 配置PATH 这里请仔细看brew的log信息，地址可能会不同
echo &amp;#39;export PATH=&amp;quot;/opt/homebrew/opt/ruby/bin:$PATH&amp;quot;&amp;#39; &amp;gt;&amp;gt; ~/.zshrc
echo &amp;#39;export LDFLAGS=&amp;quot;-L/opt/homebrew/opt/ruby/lib&amp;quot;&amp;#39; &amp;gt;&amp;gt; ~/.zshrc
echo &amp;#39;export CPPFLAGS=&amp;quot;-I/opt/homebrew/opt/ruby/include&amp;quot;&amp;#39; &amp;gt;&amp;gt; ~/.zshrc
# 重新加载配置
source ~/.zshrc
# 再次查看ruby版本 这时候应该变成3.x了
ruby --version
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;安装 pod&lt;/h3&gt;
&lt;p&gt;这里仍然使用 brew 来安装。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-sh&quot;&gt;brew install cocoapods
# 按照提示link
brew link cocoapods
# 这里如果提示已经存在，需要按照brew给出的方法删除原文件，并再次链接
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;使用&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-sh&quot;&gt;# 正常显示没有报错就ok了
pod env
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;参考&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/CocoaPods/CocoaPods/issues/12122&quot;&gt;cocoapods issues&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Sun, 11 Aug 2024 13:15:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>cocoapods</category><category>capacitor</category><category>iOS</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/homepage/SmileInTheMorning</guid>
    <title>名渡山辽 - Smile in the morning 指弹谱</title>
    <link>https://wxmvv.github.io/blog/homepage/SmileInTheMorning</link>
    <description>&lt;p&gt;虽然很久没弹琴，也没制作谱子了，赶上这次名渡山来天津的机会，再次拿起来练一下。&lt;/p&gt;
&lt;p&gt;就挑了一首他的新曲来练一下。刚好骑鹅尤克里里的伊老师也在扒这首曲子，我们就一起合作完成谱子的整理，放在这里。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://wxmvv.github.io/static/pdf/ukulele/smileinthemorning.pdf&quot; alt=&quot;smileinthemorning.pdf&quot;&gt;&lt;/p&gt;
&lt;iframe src=&quot;//player.bilibili.com/player.html?isOutside=true&amp;aid=1355658592&amp;bvid=BV1Xz421b7FU&amp;cid=1574676110&amp;p=1&amp;autoplay=0&amp;muted=0&quot; className=&#39;w-full h-[366px]&#39; scrolling=&quot;no&quot; border=&quot;0&quot; frameBorder=&quot;no&quot; autoPlay=&quot;0&quot; muted=&quot;0&quot; framespacing=&quot;0&quot; allowFullScreen={true}&gt;&lt;/iframe&gt;
</description>
    <pubDate>Tue, 16 Jul 2024 10:17:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>music</category><category>ukulele</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/homepage/Nextjs重构主页</guid>
    <title>2024 使用 Nextjs 重构主页</title>
    <link>https://wxmvv.github.io/blog/homepage/Nextjs重构主页</link>
    <description>&lt;p&gt;最近在使用 Nextjs 完成工作，用的很舒服，遂决定用来重新开发下之前 hexo 弄的主页。&lt;/p&gt;
&lt;p&gt;项目在这里 &lt;a href=&quot;https://github.com/wxmvv/minimal-tailwind-nextjs-blog&quot;&gt;minimal-tailwind-nextjs-blog&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;技术选择&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://tailwindcss.com/&quot;&gt;tailwindcss&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://nextjs.org/&quot;&gt;Nextjs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;首先是框架，除了 Nextjs 之外，我平时也很常用的 tailwindcss，可以快速构建网站页面。
经过查找最后决定使用&amp;quot;开箱即用&amp;quot;的 &lt;a href=&quot;https://github.com/timlrx/tailwind-nextjs-starter-blog&quot;&gt;tailwind-nextjs-starter-blog&lt;/a&gt;作为基础来重构主页。&lt;/p&gt;
&lt;h2&gt;设计参考&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://nelson.co/&quot;&gt;nelson&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;很喜欢这种干净的页面，但是同时又有不少小设计，作为参考来制作。&lt;/p&gt;
&lt;h2&gt;开发列表&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; layout 修改&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 色彩模式&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; i18n 国际化&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 评论系统&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; rss 生成&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 音乐播放器&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 主页的线性动画效果&lt;/li&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; PDF 预览&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;问题与一些解决方案&lt;/h2&gt;
&lt;h3&gt;favicons 以及 manifest&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://developer.mozilla.org/zh-CN/docs/Web/Manifest&quot;&gt;MDN 官方文档&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/elegantapp/pwa-asset-generator&quot;&gt;pwa-asset-generator 工具&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;动效框架&lt;/h3&gt;
&lt;p&gt;页面的动画效果使用的&lt;a href=&quot;https://www.framer.com/motion/&quot;&gt;framer-motion&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;能打打节省开发动画的时间,并且让动画的过渡更加丝滑。&lt;/p&gt;
&lt;p&gt;不得不说和 vue 相比，react 的动画库真的多太多了。&lt;/p&gt;
&lt;h3&gt;github page 静态部署&lt;/h3&gt;
&lt;p&gt;首先是项目中关于静态部署的设置，在文档中写的很清楚&lt;a href=&quot;https://github.com/timlrx/tailwind-nextjs-starter-blog&quot;&gt;tailwind-nextjs-starter-blog&lt;/a&gt;，设置过就可以 build 了。&lt;/p&gt;
&lt;p&gt;已经 build 过后，就会生成网页静态文件，然后在 github 新建一个 YourGitName.github.io 的仓库，将文件上传到仓库中即可。不过手动上传毕竟十分麻烦，可以使用 &lt;a href=&quot;https://github.com/features/actions&quot;&gt;github action&lt;/a&gt; 来自动部署。可以自行参考文档部署。&lt;/p&gt;
&lt;p&gt;需要注意的是，github page 使用 jekyll 部署，会自动忽略下划线开头的文件，导致_next 文件夹中的 js css 无法加载，在其中新建一个.nojekyll 即可&lt;/p&gt;
&lt;h3&gt;meta 信息&lt;/h3&gt;
&lt;p&gt;tailwind-nextjs-starter-blog 项目本身的 meta 信息就是参考 &lt;a href=&quot;https://gohugo.io/content-management/front-matter/&quot;&gt;Hugo&lt;/a&gt; 的设置, 可以自行查看文档。&lt;/p&gt;
&lt;h3&gt;过滤 Post 的修改&lt;/h3&gt;
&lt;p&gt;在修改 Post 过滤过程中，其实就是 daaft 设置为 true，在 dev 模式还能正常显示，在 build 模式就会消失，如果想要做一些修改 可以搜索一个外部方法 allCoreContent ，这个方法会在 NODE_ENV 为 production 的时候过滤掉 draft 修改。然后做自己的修改即可。&lt;/p&gt;
&lt;h2&gt;评论系统&lt;/h2&gt;
&lt;p&gt;tailwind-nextjs-starter-blog 所提供的 comments 组件似乎有一些加载问题，所以最后还是自己解决。&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://giscus.app/&quot;&gt;giscus&lt;/a&gt;
&lt;a href=&quot;https://github.com/giscus/giscus-component&quot;&gt;giscus-react&lt;/a&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-sh&quot;&gt;npm i @giscus/react
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;//作为组件中使用  现在giscus官网获取id 然后将下面替换即可
import Giscus from &amp;quot;@giscus/react&amp;quot;;
export default function MyApp() {
  return (
    &amp;lt;Giscus
      id=&amp;quot;comments&amp;quot;
      repo=&amp;quot;giscus/giscus-component&amp;quot;
      repoId=&amp;quot;MDEwOlJlcG9zaXRvcnkzOTEzMTMwMjA=&amp;quot;
      category=&amp;quot;Announcements&amp;quot;
      categoryId=&amp;quot;DIC_kwDOF1L2fM4B-hVS&amp;quot;
      mapping=&amp;quot;specific&amp;quot;
      term=&amp;quot;Welcome to @giscus/react component!&amp;quot;
      reactionsEnabled=&amp;quot;1&amp;quot;
      emitMetadata=&amp;quot;0&amp;quot;
      inputPosition=&amp;quot;top&amp;quot;
      theme=&amp;quot;light&amp;quot;
      lang=&amp;quot;en&amp;quot;
      loading=&amp;quot;lazy&amp;quot;
    /&amp;gt;
  );
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;build 后的中文路径问题&lt;/h3&gt;
&lt;p&gt;我在 dev 模式中没有问题，但是当我打包 build 后出现路径问题。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;// app/blog/[...slug]/page.tsx
const isDev = process.env.NODE_ENV === &amp;quot;development&amp;quot;;
const isBuild = process.env.NEXT_PUBLIC_IS_BUILD === &amp;quot;true&amp;quot;;
export const generateStaticParams = async () =&amp;gt; {
  if (isDev) {
    return allBlogs.map((p) =&amp;gt; ({
      slug: p.slug.split(&amp;quot;/&amp;quot;).map((name) =&amp;gt; encodeURIComponent(name))
    }));
  } else {
    return allBlogs.map((p) =&amp;gt; ({
      slug: p.slug.split(&amp;quot;/&amp;quot;).map((name) =&amp;gt; decodeURI(name))
    }));
  }
};
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;// next.config.js
const isDev = process.env.NODE_ENV === &amp;#39;development&amp;#39;
const isBuild =process.env.NODE_ENV === &amp;#39;production&amp;#39; &amp;amp;&amp;amp; process.env.NEXT_PUBLIC_IS_BUILD === &amp;#39;true&amp;#39;
env: {
 NEXT_PUBLIC_IS_BUILD: isBuild.toString(),
},
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-json&quot;&gt;// package.json
&amp;quot;scripts&amp;quot;:{
 &amp;quot;build&amp;quot;: &amp;quot;cross-env NEXT_PUBLIC_IS_BUILD=true &amp;amp;&amp;amp; cross-env INIT_CWD=$PWD next build &amp;amp;&amp;amp; cross-env NODE_OPTIONS=&amp;#39;--experimental-json-modules&amp;#39; node ./scripts/postbuild.mjs&amp;quot;,
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;最后&lt;/h2&gt;
&lt;p&gt;断断续续花了快 1 周时间才大概整好，其中比较花时间的是音乐播放器的动画效果，我使用 rive，从一开始画图到制作动画，还是很有趣的过程，最后效果也还可以，未来有时间我还会继续优化的。&lt;/p&gt;
</description>
    <pubDate>Fri, 05 Jul 2024 18:26:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>Nextjs</category><category>react</category><category>js</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/mdx常用元素</guid>
    <title>mdx 常用元素</title>
    <link>https://wxmvv.github.io/blog/code/markdown/mdx常用元素</link>
    <description>&lt;p&gt;这里是这个模版的一些常用 mdx 元素,写在这里方便复制使用。&lt;/p&gt;
&lt;h2&gt;目录&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;TOCInline toc={props.toc} exclude=&amp;quot;Introduction&amp;quot; /&amp;gt;&lt;/code&gt;
&lt;TOCInline toc={props.toc} exclude=&quot;Introduction&quot; /&gt;&lt;/p&gt;
&lt;h2&gt;B 站视频&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;iframe
  src=&amp;quot;//player.bilibili.com/player.html?isOutside=true&amp;amp;aid=1355658592&amp;amp;bvid=BV1Xz421b7FU&amp;amp;cid=1574676110&amp;amp;p=1&amp;amp;muted=false&amp;quot;
  className=&amp;quot;w-full h-[342px]&amp;quot;
  autoPlay
  scrolling=&amp;quot;no&amp;quot;
  border=&amp;quot;0&amp;quot;
  frameBorder=&amp;quot;no&amp;quot;
  framespacing=&amp;quot;0&amp;quot;
  allowFullScreen={true}
&amp;gt;&amp;lt;/iframe&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;iframe src=&quot;//player.bilibili.com/player.html?isOutside=true&amp;aid=1355658592&amp;bvid=BV1Xz421b7FU&amp;cid=1574676110&amp;p=1&amp;muted=false&quot; className=&#39;w-full h-[342px]&#39; autoPlay scrolling=&quot;no&quot; border=&quot;0&quot; frameBorder=&quot;no&quot; framespacing=&quot;0&quot; allowFullScreen={true}&gt;&lt;/iframe&gt;

&lt;h2&gt;markdown 图片&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;![测试图片](/static/test.webp))&lt;/code&gt;
&lt;img src=&quot;/static/test.webp&quot; alt=&quot;测试图片&quot;&gt;&lt;/p&gt;
&lt;h2&gt;mdx 图片(宽)&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;div className=&amp;quot;flex flex-row justify-center bg-zinc-100  rounded md:-mx-28&amp;quot;&amp;gt;
  &amp;lt;img alt=&amp;quot;GitHub test&amp;quot; loading=&amp;quot;lazy&amp;quot; width=&amp;quot;2000&amp;quot; height=&amp;quot;1000&amp;quot; decoding=&amp;quot;async&amp;quot; data-nimg=&amp;quot;1&amp;quot; className=&amp;quot;my-0 rounded&amp;quot; srcSet=&amp;quot;&amp;quot; src=&amp;quot;/static/test2.webp&amp;quot; /&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div className=&quot;flex flex-row justify-center bg-zinc-100  rounded md:-mx-28&quot;&gt;
  &lt;Image alt=&quot;GitHub test&quot; loading=&quot;lazy&quot; width=&quot;2000&quot; height=&quot;1000&quot; decoding=&quot;async&quot; data-nimg=&quot;1&quot; className=&quot;my-0 rounded&quot; srcSet=&quot;&quot; src=&quot;/static/test2.webp&quot; /&gt;
&lt;/div&gt;

&lt;h2&gt;mdx 视频(普通)&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;div className=&amp;quot;flex flex-row justify-center bg-zinc-100 rounded-sm &amp;quot;&amp;gt;
    &amp;lt;video autoPlay loop preload=&amp;quot;auto&amp;quot; playsInline className=&amp;quot;my-0 rounded&amp;quot;&amp;gt;
        &amp;lt;source src=&amp;quot;/static/test.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot;&amp;gt;
    &amp;lt;/video&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div className=&quot;flex flex-row justify-center bg-zinc-100 rounded-sm &quot;&gt;
  &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded&quot;&gt;
    &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
  &lt;/video&gt;
&lt;/div&gt;

&lt;h2&gt;mdx 视频(宽)&lt;/h2&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;div className=&amp;quot;flex flex-row justify-center bg-zinc-100 rounded-sm md:-mx-28&amp;quot;&amp;gt;
  &amp;lt;video autoPlay loop preload=&amp;quot;auto&amp;quot; playsInline className=&amp;quot;my-0 rounded&amp;quot;&amp;gt;
    &amp;lt;source src=&amp;quot;/static/test.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
  &amp;lt;/video&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div className=&quot;flex flex-row justify-center bg-zinc-100 rounded-sm md:-mx-28&quot;&gt;
  &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;rounded my-0&quot;&gt;
    &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
  &lt;/video&gt;
&lt;/div&gt;

&lt;h2&gt;链接&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;a href=&amp;quot;https://google.com&amp;quot; target=&amp;quot;blank&amp;quot;&amp;gt;&amp;lt;/a&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;div&gt;
  &lt;a href=&quot;https://google.com&quot; target=&quot;blank&quot;&gt;前往谷歌&lt;/a&gt;
&lt;/div&gt;

&lt;h2&gt;布局&lt;/h2&gt;
&lt;h3&gt;两列布局(宽)&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;div className=&amp;quot;grid gap-6 md:grid-cols-2 md:-mx-24&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;div className=&quot;grid gap-6 md:grid-cols-2 md:-mx-24&quot;&gt;
  &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
      &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded-md md:max-h-[540px]&quot;&gt;
          &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;/video&gt;
      &lt;div className=&quot;flex flex-col px-2 pt-2&quot;&gt;
          &lt;div&gt;Github Test&lt;/div&gt;
          &lt;div className=&quot;imgDesc parent flex flex-col my-0 space-y-0 text-zinc-400&quot;&gt;
           Github Test Github Test Github Test Github Test Github Test Github Test
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div className =&quot;col-span-2&quot;&gt;
    &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
      &lt;a href=&quot;https://google.com&quot; target=&quot;blank&quot;&gt;
        &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded-md md:max-h-[540px]&quot;&gt;
          &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
        &lt;/video&gt;
      &lt;/a&gt;
      &lt;div className=&quot;flex flex-col px-2 pt-2&quot;&gt;
      &lt;div className=&quot;my-0&quot;&gt;Github Test&lt;/div&gt;
      &lt;div className=&quot;imgDesc my-0 text-zinc-400&quot;&gt;
        Github Test Github Test Github Test Github Test Github Test Github Test
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;两列布局(窄)&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;&amp;lt;div className=&amp;quot;flex flex-col gap-6 md:grid md:grid-cols-2&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;&lt;/p&gt;
&lt;div className=&quot;flex flex-col gap-6 md:grid md:grid-cols-2&quot;&gt;
  &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
      &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded-md md:max-h-[540px]&quot;&gt;
          &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
      &lt;/video&gt;
      &lt;div className=&quot;flex flex-col px-2 pt-2&quot;&gt;
          &lt;div&gt;Github Test&lt;/div&gt;
          &lt;div className=&quot;imgDesc text-zinc-400&quot;&gt;
            Github Test Github Test Github Test Github Test Github Test Github Test Github Test
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div className =&quot;col-span-2&quot;&gt;
    &lt;div className=&quot;flex flex-col gap-2&quot;&gt;
      &lt;a href=&quot;https://google.com&quot; target=&quot;blank&quot;&gt;
        &lt;video autoPlay loop preload=&quot;auto&quot; playsInline className=&quot;my-0 rounded-md md:max-h-[540px]&quot;&gt;
          &lt;source src=&quot;/static/test.mp4&quot; type=&quot;video/mp4&quot; /&gt;
        &lt;/video&gt;
      &lt;/a&gt;
      &lt;div className=&quot;flex flex-col px-2 pt-2&quot;&gt;
      &lt;div className=&quot;my-0&quot;&gt;Github Test&lt;/div&gt;
      &lt;div className=&quot;imgDesc my-0 text-zinc-400&quot;&gt;
       Github Test Github Test Github Test Github Test Github Test Github Test Github Test
      &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;h3&gt;item 单列&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;div className=&amp;quot;flex flex-col gap-2&amp;quot;&amp;gt;
  &amp;lt;video autoPlay loop preload=&amp;quot;auto&amp;quot; playsInline className=&amp;quot;my-0 rounded-md md:max-h-[540px]&amp;quot;&amp;gt;
    &amp;lt;source src=&amp;quot;/static/test.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
  &amp;lt;/video&amp;gt;
  &amp;lt;div className=&amp;quot;flex flex-col px-2 pt-2&amp;quot;&amp;gt;
    &amp;lt;div&amp;gt;Github Test&amp;lt;/div&amp;gt;
    &amp;lt;div className=&amp;quot;imgDesc text-zinc-400&amp;quot;&amp;gt;Github Test Github Test Github Test Github Test Github Test Github Test Github Test&amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;item 双列&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-jsx&quot;&gt;&amp;lt;div className=&amp;quot;col-span-2&amp;quot;&amp;gt;
  &amp;lt;div className=&amp;quot;flex flex-col gap-2&amp;quot;&amp;gt;
    &amp;lt;a href=&amp;quot;https://google.com&amp;quot; target=&amp;quot;blank&amp;quot;&amp;gt;
      &amp;lt;video autoPlay loop preload=&amp;quot;auto&amp;quot; playsInline className=&amp;quot;my-0 rounded-md md:max-h-[540px]&amp;quot;&amp;gt;
        &amp;lt;source src=&amp;quot;/static/test.mp4&amp;quot; type=&amp;quot;video/mp4&amp;quot; /&amp;gt;
      &amp;lt;/video&amp;gt;
    &amp;lt;/a&amp;gt;
    &amp;lt;div className=&amp;quot;flex flex-col px-2 pt-2&amp;quot;&amp;gt;
      &amp;lt;div&amp;gt;Github Test&amp;lt;/div&amp;gt;
      &amp;lt;div className=&amp;quot;imgDesc text-zinc-400&amp;quot;&amp;gt;Github Test Github Test Github Test Github Test Github Test Github Test&amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
  &amp;lt;/div&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
</description>
    <pubDate>Fri, 05 Jul 2024 18:26:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>markdown</category><category>mdx</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/开始使用Markdown之前你也许需要看一下排版规范</guid>
    <title>开始使用 Markdown 之前你也许需要看一下排版规范</title>
    <link>https://wxmvv.github.io/blog/code/markdown/开始使用Markdown之前你也许需要看一下排版规范</link>
    <description>&lt;p&gt;最近我在写文档，但是对比自己写的文档和 github 上其他大佬写的文档，总觉得差了很多意思，也许是时候学习下如何去写文档了，于是找到了 github 的文档规范 &lt;a href=&quot;https://github.github.com/gfm/&quot;&gt;GitHub Flavored Markdown Spec&lt;/a&gt; 。&lt;/p&gt;
&lt;p&gt;花了一些时间看过之后，觉得确实很有学习的必要，本来挑选了一些更容易碰到用到的规范，想翻一下写出来供大家参考，但是发现网上已经有人整理好了，其中也有一些关于中文的排版建议，我个人觉得很有帮助，所以也一并分享出来，「物联网学前班」这篇文章 &lt;a href=&quot;https://zhuanlan.zhihu.com/p/144446995&quot;&gt;基于 Markdown 的中文文档排版规范&lt;/a&gt; 。&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/work.jpg&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
</description>
    <pubDate>Sat, 15 Jun 2024 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>markdown</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/ios/SwiftUI获取屏幕宽高</guid>
    <title>获取屏幕宽高</title>
    <link>https://wxmvv.github.io/blog/code/ios/SwiftUI获取屏幕宽高</link>
    <description>&lt;p&gt;在 ios 中如果需要做一些页面，如抽屉侧边栏，就需要获得屏幕宽度，那么如何获取呢？&lt;/p&gt;
&lt;p&gt;以下是两种方式：&lt;/p&gt;
&lt;h2&gt;通过 GeometryReader 获取&lt;/h2&gt;
&lt;p&gt;&lt;code&gt;GeometryReader&lt;/code&gt;包装器提供了对父视图几何信息的访问，从而使你能够根据视图的实际大小来设置内容，当设备横置或者纵置，也会跟随动态调整。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-swift&quot;&gt;struct ContentView: View {
 var body: some View {
  GeometryReader { geo in
   Text(&amp;quot;Screen Width: \(geo.size.width)&amp;quot;)
  }
 }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;通过 UIScreen 获取&lt;/h2&gt;
&lt;p&gt;UIScreen.main.bounds 将返回设备的逻辑宽度，不考虑横置或纵置的情况,包含 width 和 height 等信息，如果需要获取实际物理宽高 也可以使用 UIScreen.main.nativeBounds.width&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-swift&quot;&gt;// 通过 UIScreen.main.bounds.width 来获得宽度
struct ContentView: View {
 var body: some View {
  Text(&amp;quot;Screen Width: \(UIScreen.main.bounds.width)&amp;quot;)
 }
}
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;总结&lt;/h2&gt;
&lt;p&gt;如果需要考虑横纵就必须使用 GeometryReader
其他情况就随意喽。&lt;/p&gt;
</description>
    <pubDate>Sun, 19 Nov 2023 21:04:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>swift</category><category>swiftUI</category><category>iOS</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/macos/Macos隐藏与显示文件</guid>
    <title>Macos 隐藏文件&amp;显示隐藏文件</title>
    <link>https://wxmvv.github.io/blog/code/macos/Macos隐藏与显示文件</link>
    <description>&lt;h2&gt;macos 命令使用 chflags&lt;/h2&gt;
&lt;p&gt;最近在使用 obsidian 的时候，出现了文件会变成隐藏，目前原因不明，最后使用 chflags nohidden 命令将它们取消隐藏。&lt;/p&gt;
&lt;p&gt;使用 man chflags 可以了解大致使用方式&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;#常用指令
chflags hidden  # 隐藏单一文件或文件夹
chflags nohidden # 取消隐藏单一文件或文件夹
chflags -R hidden # 隐藏或取消隐藏目录所有文件
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;还有官方论坛相关的回答&lt;a href=&quot;https://discussionschinese.apple.com/thread/250178608&quot;&gt;url&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Thu, 16 Nov 2023 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>macos</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/github profile美化</guid>
    <title>GitHub Profile 美化</title>
    <link>https://wxmvv.github.io/blog/code/markdown/github profile美化</link>
    <description>&lt;p&gt;好像是去年更新的功能，今天整理 github 文件顺便尝试一下。&lt;/p&gt;
&lt;p&gt;原理就是新建一个和你的 github 账号名一样的仓库，然后这个仓库中的 read me 就会显示在 profile 页面。&lt;/p&gt;
&lt;p&gt;这是一个 md 文件，可以使用 markdown，也可以使用 html+css 来制作样式。&lt;/p&gt;
&lt;p&gt;也有一些相关美化的项目可以用来搭配使用&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://skillicons.dev&quot;&gt;skillicons&lt;/a&gt; 添加小图标&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/anuraghazra/github-readme-stats&quot;&gt;github-readme-stats&lt;/a&gt; 你的 github 状态&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;好啦！快去试一下吧～(^_−)−☆&lt;/p&gt;
</description>
    <pubDate>Sun, 24 Sep 2023 14:45:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>github</category><category>githubprofile</category><category>markdown</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/music/音乐分享-second-wind</guid>
    <title>音乐分享 second wind</title>
    <link>https://wxmvv.github.io/blog/music/音乐分享-second-wind</link>
    <description>&lt;iframe src=&quot;https://open.spotify.com/embed/album/3yx7NLldcqxw39HoKLPaRG?utm_source=generator&quot; width=&quot;100%&quot; height=&quot;352&quot; frameBorder=&quot;0&quot; allowfullscreen=&quot;&quot; allow=&quot;autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture&quot; loading=&quot;lazy&quot;&gt;&lt;/iframe&gt;

&lt;p&gt;最近听到的非常棒的一张专辑，非常喜欢其中的曲子的 solo 部分，非常有趣，整体音色会让人很舒适放松，然后 solo 又会像小精灵一样不多不少制造一点紧张，并且完美解决，确实很棒。&lt;/p&gt;
</description>
    <pubDate>Wed, 20 Sep 2023 17:12:45 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>music</category><category>cpop</category><category>music share</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/vpn/surge个人使用配置</guid>
    <title>Surge 个人使用配置</title>
    <link>https://wxmvv.github.io/blog/vpn/surge个人使用配置</link>
    <description>&lt;h2&gt;个人配置&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://wxmvv.github.io/static/file/surge.conf&quot;&gt;surge.conf&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;导入后替换配置中的订阅地址即可使用&lt;/p&gt;
&lt;h2&gt;参考&lt;/h2&gt;
&lt;p&gt;surge 官方&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://nssurge.com/support&quot;&gt;官方&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.surge.community&quot;&gt;社区-入门指南&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;参考仓库&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://limbopro.com&quot;&gt;毒奶&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://blankmagic.github.io/surge/&quot;&gt;blankmagic&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/blackmatrix7/ios_rule_script&quot;&gt;blackmatrix7 ios-rule-script&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/Rabbit-Spec&quot;&gt;Rabbit-Spec&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;模块参考&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wiki.surge.community/modules&quot;&gt;社区推荐&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/deezertidal/Surge_Module&quot;&gt;deezertidal&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/Yu9191/Rewrite/tree/main/Surge&quot;&gt;Yu9191&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;一些特殊模块&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/sub-store-org/Sub-Store&quot;&gt;sub-store&lt;/a&gt; 订阅转换&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://docs.boxjs.app&quot;&gt;box.js&lt;/a&gt; &lt;a href=&quot;https://github.com/chavyleung/scripts&quot;&gt;boxjs 脚本&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/VirgilClyne/iRingo&quot;&gt;iRingo&lt;/a&gt; 解锁苹果功能&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/Script-Hub-Org/Script-Hub&quot;&gt;script.hub&lt;/a&gt; 脚本转换&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://raw.githubusercontent.com/ExaAlice/Alice/main/Module/MitMAllHostnames.sgmodule&quot;&gt;MIITAllHost&lt;/a&gt; 抓包使用&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;一些工具&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/surgioproject/surgio&quot;&gt;surgio&lt;/a&gt; 规则转换&lt;/li&gt;
&lt;/ul&gt;
</description>
    <pubDate>Sun, 03 Sep 2023 11:13:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>vpn</category><category>surge</category><category>macos</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/把obsidian变成IA writer(哈哈)</guid>
    <title>把 Obsidian 变成 IA writer</title>
    <link>https://wxmvv.github.io/blog/code/markdown/把obsidian变成IA writer(哈哈)</link>
    <description>&lt;h2&gt;随便说&lt;/h2&gt;
&lt;p&gt;用了 obsidian 好久了，真的是符合我心中电子笔记最完美样子的软件，唯一的问题就是界面太乱，所以利用闲暇时间好好整理了一下！&lt;/p&gt;
&lt;p&gt;之前用过 IA writer，真的很干净、很舒服的界面，字体也是我喜欢的，所以我们今天的目标就是把 obsidian 变成 IA writer！(obsidian:所以我只是 IA 的替身吗 😭)&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/markdown/obsidian/obsidian-IA%E9%A2%84%E8%A7%88.jpg&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;h2&gt;换装开始！╮(￣ ▽ ￣&amp;quot;&amp;quot;)╭&lt;/h2&gt;
&lt;p&gt;首先是先大体上整理一下外表！
让我们换一个主题 - 对的没错！就是你 minimal ！(主题店常年第一名的)
虽然有直接 copy IA 的主题比如 IB，不过实际使用效果不是很理想，minimal 凭借她优秀的可调教性成为我们的选择！&lt;/p&gt;
&lt;p&gt;我们同时还需要 3 个插件配合&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Hider&lt;/li&gt;
&lt;li&gt;Minimal Theme Settings&lt;/li&gt;
&lt;li&gt;Style Settings&lt;/li&gt;
&lt;li&gt;Focus Active Sentence (可选)&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;然后是 IA 的字体&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/iaolo/iA-Fonts&quot;&gt;IA-Fonts&lt;/a&gt; 选择你喜欢的下载并安装&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;OK！ 前期准备完成！&lt;/p&gt;
&lt;h2&gt;设置设置&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://docs.obsidian.md/Home&quot;&gt;官方文档&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/markdown/obsidian/%E5%A4%96%E8%A7%82%E8%AE%BE%E7%BD%AE1.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-palette&quot;&gt;#00C6FF
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;IA 的大蓝色&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/markdown/obsidian/%E5%A4%96%E8%A7%82%E8%AE%BE%E7%BD%AE2%202.png&quot; alt=&quot;&quot;&gt;
&lt;img src=&quot;/static/images/markdown/obsidian/%E5%A4%96%E8%A7%82%E8%AE%BE%E7%BD%AE3%201.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;点击 import 将下面的拷贝进去&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-json&quot;&gt;{
  &amp;quot;minimal-style@@bg1@@dark&amp;quot;: &amp;quot;#191A1A&amp;quot;,
  &amp;quot;minimal-style@@bg1@@light&amp;quot;: &amp;quot;#F7F7F7&amp;quot;,
  &amp;quot;minimal-style@@ui1@@light&amp;quot;: &amp;quot;#00BEFF&amp;quot;,
  &amp;quot;minimal-style@@ax1@@dark&amp;quot;: &amp;quot;#CCCCCC&amp;quot;,
  &amp;quot;minimal-style@@ax1@@light&amp;quot;: &amp;quot;#1A1A1A&amp;quot;,
  &amp;quot;minimal-style@@ax2@@dark&amp;quot;: &amp;quot;#CCCCCC&amp;quot;,
  &amp;quot;minimal-style@@ax2@@light&amp;quot;: &amp;quot;#1A1A1A&amp;quot;,
  &amp;quot;minimal-style@@code-background@@dark&amp;quot;: &amp;quot;#252524&amp;quot;,
  &amp;quot;minimal-style@@code-background@@light&amp;quot;: &amp;quot;#EEEEEE&amp;quot;,
  &amp;quot;minimal-style@@h1-size&amp;quot;: &amp;quot;1.5em&amp;quot;,
  &amp;quot;minimal-style@@h2-size&amp;quot;: &amp;quot;1.2em&amp;quot;,
  &amp;quot;minimal-style@@h3-size&amp;quot;: &amp;quot;1.125em&amp;quot;,
  &amp;quot;minimal-style@@h3-weight&amp;quot;: 600,
  &amp;quot;minimal-style@@h3-style&amp;quot;: &amp;quot;italic&amp;quot;,
  &amp;quot;minimal-style@@active-line-on&amp;quot;: true,
  &amp;quot;minimal-style@@checkbox-shape&amp;quot;: &amp;quot;checkbox-square&amp;quot;,
  &amp;quot;minimal-style@@ribbon-style&amp;quot;: &amp;quot;ribbon-hidden&amp;quot;,
  &amp;quot;minimal-style@@bold-weight&amp;quot;: 600
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;img src=&quot;/static/images/markdown/obsidian/%E5%A4%96%E8%A7%82%E8%AE%BE%E7%BD%AE4.png&quot; alt=&quot;&quot;&gt;&lt;/p&gt;
&lt;p&gt;新建一个 随便的名字.css 然后放在里面 并且打开就能看到啦！&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-css&quot;&gt;.markdown-source-view.mod-cm6 .cm-content {
  /* 光标颜色 */
  caret-color: var(--ia-primary-color);
}
/*修改顶部导航栏  hover时候才显示*/
.view-header:hover {
  opacity: 1 !important;
}
.workspace-tabs.mod-stacked.mod-top .workspace-tab-header-container:hover {
  opacity: 1 !important;
}
.view-header {
  opacity: 0 !important;
}
.workspace-tabs.mod-stacked.mod-top .workspace-tab-header-container {
  opacity: 0 !important;
}
/*选中的tab 标题栏和边框颜色*/
.workspace-tab-container .workspace-tab-header {
  box-shadow: -1px 0 0 0 var(--ia-link-color), var(--tab-stacked-shadow) !important;
}
.workspace-tab-container .workspace-tab-header.mod-active.is-active {
  box-shadow: -1px 0 0 0 var(--ia-primary-color), var(--tab-stacked-shadow) !important;
}
.workspace-tab-header.mod-active.is-active .workspace-tab-header-inner-title,
.workspace-tab-header.mod-active.is-active .workspace-tab-header-inner-icon {
  color: var(--ia-primary-color) !important;
  /* font-weight:600 !important; */
}
/* 外部链接url和括号颜色 */
.cm-string.cm-url,
.cm-formatting.cm-formatting-link.cm-link,
.cm-active &amp;gt; .cm-formatting.cm-formatting-link-string.cm-string.cm-url {
  color: var(--ia-link-color) !important;
}
/* 内部链接括号颜色 */
.cm-formatting-link.cm-formatting-link-end,
.cm-formatting-link.cm-formatting-link-start {
  color: var(--ia-link-color) !important;
}
/* 选中后的外部链接url和括号颜色 */
.cm-active &amp;gt; .cm-string.cm-url {
  color: var(--ia-active-link-color) !important;
}

/* theme-dark */
.theme-dark {
  --ia-link-color: #7b7a79;
  --ia-active-link-color: #00bbff;
}
/* theme-light */
.theme-light {
  --ia-link-color: #b5b3b0;
  --ia-active-link-color: #00bbff;
}
/* theme-dark &amp;amp; theme-light */
.theme-dark,
.theme-light {
  --ia-primary-color: #00bbff;
}
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;设置好了吗？是不是大变样了呢？哈哈&lt;/p&gt;
&lt;h2&gt;变装结束&lt;/h2&gt;
&lt;p&gt;还是有很多没有弄好的，比如光标宽度，选中文字颜色等，有空再折腾你啦！
╮(￣ ▽ ￣&amp;quot;&amp;quot;)╭&lt;/p&gt;
&lt;p&gt;有什么更好的建议也欢迎邮件我哦！&lt;/p&gt;
</description>
    <pubDate>Mon, 21 Aug 2023 14:34:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>obsidian</category><category>markdown</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/js/svelte以及tailwindcss使用尝试</guid>
    <title>TailwindCSS 以及 Svelte 使用尝试</title>
    <link>https://wxmvv.github.io/blog/code/js/svelte以及tailwindcss使用尝试</link>
    <description>&lt;h2&gt;参考文档&lt;/h2&gt;
&lt;p&gt;先看文档，tailwindCSS 真的我花了一小会时间适应了一下就可以算是入门了吧，真的太方便了，但是 svelte 则需要认真读一下文档，要不连文件怎么建都不知道... 和 vue 使用有很多相似地方，不同的地方更多，尤其是使用方法似乎变简单了，不过我也没有特别深入的使用，不好做评价。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://svelte.dev&quot;&gt;svelte&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://kit.svelte.dev&quot;&gt;svelte.kit - 最新项目都会使用 kit&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://tailwindcss.com&quot; title=&quot;台风天&quot;&gt;tailwindCSS&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://tailwindui.com/components&quot;&gt;tailwindCSS 官方组件库&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://daisyui.com&quot;&gt;DaisyUI - 基于 tailwind 的 UI 库&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;我的项目&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://wxmvv.github.io/softwhite-homepage-svelte/&quot;&gt;softwhite&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;随便说&lt;/h2&gt;
&lt;p&gt;去年了解到的 tailwindCSS 不过也没花时间去尝试，最近用了一下简直是停不下来，使用体验极为舒适，这里记录一下顺便也做下推荐。&lt;/p&gt;
&lt;p&gt;另一个 svelte，是在我看 DaisyUI 的示例项目时候，看到的框架，搜了下说是前端届一颗冉冉升起的新星，就一起用起来了。(vue 自认为用的还不是很好，也不知道哪来的勇气在这瞎试，笑)&lt;/p&gt;
&lt;p&gt;使用过程中也学到很多新的东西，或者一些踩的坑，有时间也会写下来给大家参考。&lt;/p&gt;
</description>
    <pubDate>Sun, 21 May 2023 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>js</category><category>svelte</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/js/解决nvm启动速度慢的问题</guid>
    <title>解决 nvm 启动速度慢的问题</title>
    <link>https://wxmvv.github.io/blog/code/js/解决nvm启动速度慢的问题</link>
    <description>&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;export NVM_DIR=&amp;quot;$HOME/.nvm&amp;quot;
export PATH=$HOME/.nvm/versions/node/v18.14.0/bin/:$PATH
nvm() { . &amp;quot;$NVM_DIR/nvm.sh&amp;quot; ; nvm $@ ; }
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;注释掉之前添加的 nvm 启动命令&lt;/p&gt;
&lt;p&gt;然后将上面代码中的版本号改为自己想默认启动的 node，存入配置文件&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://www.jianshu.com/p/e1598eb2df8e&quot;&gt;参考&lt;/a&gt;&lt;/p&gt;
</description>
    <pubDate>Thu, 10 Feb 2022 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>shell</category><category>macos</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/js/Pjax实现无刷新加载页面</guid>
    <title>Pjax 实现无刷新加载页面</title>
    <link>https://wxmvv.github.io/blog/code/js/Pjax实现无刷新加载页面</link>
    <description>&lt;p&gt;给朋友制作网站的时候，收到一个需求，就是要无刷新完成页面切换，最好还要有过渡动画。&lt;/p&gt;
&lt;p&gt;因为是原生 js 做的网页，便想到使用 jquery 的 ajax 解决问题。
不过由于考虑到文件大小并且也并没有使用 jq 其他功能，最后决定使用了不需要引入 jq 的&lt;a href=&quot;https://github.com/MoOx/pjax&quot;&gt;pjax&lt;/a&gt;。&lt;/p&gt;
&lt;h2&gt;使用&lt;/h2&gt;
&lt;h3&gt;引入&lt;a href=&quot;https://github.com/MoOx/pjax&quot;&gt;pjax&lt;/a&gt;&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;script src=&amp;quot;https://cdnjs.cloudflare.com/ajax/libs/pjax/0.2.8/pjax.min.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;script&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;$(document).ready(function () {
  var pjax = new Pjax({
    elements: &amp;quot;a&amp;quot;,
    selectors: [&amp;quot;main&amp;quot;],
    cacheBust: false,
    scrollRestoration: false,
    switches: {
      main: Pjax.switches.sideBySide,
    },
    //切换动画效果
    switchesOptions: {
      main: {
        classNames: {
          remove: &amp;quot;Animated-easeOut Animate--noDelay&amp;quot;,
          add: &amp;quot;Animated-easeIn&amp;quot;,
          backward: &amp;quot;Animated-easeOut&amp;quot;,
          forward: &amp;quot;Animated-easeOut&amp;quot;,
        },
      },
    },
  });
});
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;问题与解决方案&lt;/h2&gt;
&lt;h3&gt;script 重载&lt;/h3&gt;
&lt;h4&gt;问题&lt;/h4&gt;
&lt;p&gt;因为 pjax 切换页面并没有完全刷新，所以页面的 js 不会从头执行一遍，导致 js 不生效。&lt;/p&gt;
&lt;h4&gt;解决&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;方式 1 - 重载部分 js&lt;/li&gt;
&lt;/ul&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;function pjax_reload() {
  //需要执行的js
}
// Pjax 完成后，重新加载上面的函数
document.addEventListener(&amp;quot;pjax:complete&amp;quot;, function () {
  pjax_reload();
});
&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;方式 2 - 重载 js 文件
这种情况多数用于第三方文件，比如，卜算子统计的脚本、谷歌/百度/腾讯分析的脚本等，这些脚本在每一次页面加载后都需要执行。
在引入这些文件的标签上添加 data-pjax 属性，然后将具有这个属性的标签重新添加在页面中。有时候不方便在这些标签上添加额外的属性，那么你可以在这些标签外套一层标签，如&lt;code&gt;&amp;lt;div class=&amp;quot;.pjax-reload&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;&lt;/code&gt;，然后将 .pjax-reload 里的元素全部重新添加到页面中即可。&lt;/li&gt;
&lt;/ul&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;script data-pjax src=&amp;quot;https://cdn.jsdelivr.net/gh/sukkaw/busuanzi/bsz.pure.mini.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;div class=&amp;quot;.pjax-reload&amp;quot;&amp;gt;
  &amp;lt;script src=&amp;quot;https://www.google-analytics.com/analytics.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code class=&quot;language-js&quot;&gt;// jQuery 写法
$(&amp;quot;script[data-pjax], .pjax-reload script&amp;quot;).each(function () {
  $(this).parent().append($(this).remove());
});
&lt;/code&gt;&lt;/pre&gt;
&lt;h2&gt;参考&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://liuyib.github.io/2019/09/24/use-pjax-to-your-site/#:~:text=%E9%87%8D%E8%BD%BD%20JS%20%E8%84%9A%E6%9C%AC%201%20%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%8F%98%E9%83%A8%E5%88%86%E5%AF%B9%E5%BA%94%E7%9A%84%E4%BA%8B%E4%BB%B6%20%E6%AF%94%E5%A6%82%EF%BC%8C%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E6%A0%8F%E6%9C%89%E4%B8%80%E4%B8%AA%E6%90%9C%E7%B4%A2%E6%8C%89%E9%92%AE%EF%BC%8C%E7%82%B9%E5%87%BB%E4%B9%8B%E5%90%8E%E4%BC%9A%E5%BC%B9%E5%87%BA%E6%90%9C%E7%B4%A2%E6%A1%86%EF%BC%9A%20%E7%94%B1%E4%BA%8E%E9%A1%B5%E9%9D%A2%E9%A1%B6%E9%83%A8%E6%A0%8F%E4%B8%8D%E5%8F%98%EF%BC%8C%E6%89%80%E4%BB%A5%E5%85%B6%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E4%B8%8A%E7%BB%91%E5%AE%9A%E7%9A%84%E4%BA%8B%E4%BB%B6%E4%BB%8D%E7%84%B6%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%EF%BC%8C%E8%BF%99%E9%83%A8%E5%88%86%E5%85%83%E7%B4%A0%E5%AF%B9%E5%BA%94%E7%9A%84%20JS,%E4%BA%8B%E4%BB%B6%E4%B8%8D%E9%9C%80%E8%A6%81%E9%87%8D%E8%BD%BD%E3%80%82%202%20%E9%A1%B5%E9%9D%A2%E5%8F%AF%E5%8F%98%E9%83%A8%E5%88%86%E5%AF%B9%E5%BA%94%E7%9A%84%E4%BA%8B%E4%BB%B6%20%E6%AF%94%E5%A6%82%EF%BC%8C%E9%A1%B5%E9%9D%A2%E4%B8%BB%E4%BD%93%E9%83%A8%E5%88%86%E6%98%AF%E5%8F%98%E5%8C%96%E7%9A%84%EF%BC%8C%E6%87%92%E5%8A%A0%E8%BD%BD%E5%85%B6%E4%B8%AD%E7%9A%84%E5%9B%BE%E7%89%87%EF%BC%9A%20%E5%BD%93%E9%80%9A%E8%BF%87%20Pjax%20%E5%88%87%E6%8D%A2%E9%A1%B5%E9%9D%A2%E5%90%8E%EF%BC%8C%E7%94%B1%E4%BA%8E%E4%B8%BB%E4%BD%93%E9%83%A8%E5%88%86%E6%94%B9%E5%8F%98%EF%BC%8C%E4%B8%8A%E8%BF%B0%E4%BB%A3%E7%A0%81%E5%B7%B2%E7%BB%8F%E5%A4%B1%E6%95%88%EF%BC%8C%E5%9B%A0%E6%AD%A4%E9%9C%80%E8%A6%81%E8%BF%9B%E8%A1%8C%E9%87%8D%E8%BD%BD%E3%80%82%20%E4%B8%BA%E4%BA%86%E6%96%B9%E4%BE%BF%E4%BD%BF%E7%94%A8%EF%BC%8C%E6%88%91%E4%BB%AC%E4%BD%BF%E7%94%A8%E5%87%BD%E6%95%B0%E5%B0%81%E8%A3%85%E4%B8%80%E4%B8%8B%EF%BC%9A&quot;&gt;pjax 使用&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/MoOx/pjax&quot;&gt;pjax&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
    <pubDate>Sat, 05 Dec 2020 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>pjax</category><category>js</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/使用hexo部署静态博客</guid>
    <title>使用 Hexo 部署静态博客</title>
    <link>https://wxmvv.github.io/blog/code/markdown/使用hexo部署静态博客</link>
    <description>&lt;h2&gt;前言&lt;/h2&gt;
&lt;p&gt;最近购买下载了 IA writer，确实是一个十分干净的 md 编辑器，能激发自己写字的欲望。于是考虑重新开始博客部署。翻出了以前的 hexo 博客（大概 18 年部署的一直没更新，并且原来的设置文件都丢失了），整理一下重新部署。&lt;/p&gt;
&lt;h2&gt;安装 hexo 和 cactus 主题&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://hexo.io/zh-cn/&quot;&gt;hexo&lt;/a&gt;
&lt;a href=&quot;https://github.com/probberechts/hexo-theme-cactus&quot;&gt;cactus&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;hexo 安装&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server   #启动服务
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;cactus 主题安装&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-shell&quot;&gt;cd blog
git clone https://github.com/probberechts/hexo-theme-cactus.git themes/cactus
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;配置文件参考&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://hexo.io/zh-cn/docs/&quot;&gt;hexo 文档&lt;/a&gt;
&lt;a href=&quot;https://github.com/probberechts/hexo-theme-cactus&quot;&gt;cactus 主题&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;使用方法&lt;/h2&gt;
&lt;p&gt;hexo new 文件名
hexo clean 或 hexo c 清除缓存
hexo generate 或 hexo g 生成静态文件
hexo server 或 hexo s 本地查看
hexo deploy 或 hexo d 上传&lt;/p&gt;
&lt;h2&gt;参考&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://hexo.io/zh-cn/&quot;&gt;hexo&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/probberechts/hexo-theme-cactus&quot;&gt;cactus 主题&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</description>
    <pubDate>Tue, 03 Nov 2020 18:47:39 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>markdown</category><category>hexo</category>
  </item>

  <item>
    <guid>https://wxmvv.github.io/blog/code/markdown/markdown语法参考</guid>
    <title>Markdown 语法参考以及 Hexo 部分扩展语法</title>
    <link>https://wxmvv.github.io/blog/code/markdown/markdown语法参考</link>
    <description>&lt;h2&gt;Markdown 基础语法&lt;/h2&gt;
&lt;h3&gt;标题&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;# 这是 H1

## 这是 H2

...

###### 这是 H6
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;字重&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;**加粗**&lt;/code&gt;, &lt;strong&gt;加粗&lt;/strong&gt;
&lt;code&gt;*强调*&lt;/code&gt;, &lt;em&gt;强调&lt;/em&gt;
&lt;code&gt;~~删除线~~&lt;/code&gt;, &lt;del&gt;删除线&lt;/del&gt;&lt;/p&gt;
&lt;h3&gt;图片&lt;/h3&gt;
&lt;p&gt;&lt;code&gt;![备注](https://test.com/test.jpg)&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;&lt;img src=&quot;https://cdn.pixabay.com/photo/2017/12/26/04/01/bird-3039692_640.jpg&quot; alt=&quot;备注&quot;&gt;&lt;/p&gt;
&lt;h3&gt;链接&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-md&quot;&gt;邮箱: [mail](w05172075@outlook.com)
链接: [wxm&amp;#39;s blog](https://wxmvv.github.io)
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;邮箱: &lt;a href=&quot;w05172075@outlook.com&quot;&gt;mail&lt;/a&gt;
链接: &lt;a href=&quot;https://wxmvv.github.io&quot;&gt;wxm&amp;#39;s blog&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;引用&lt;/h3&gt;
&lt;p&gt;右尖括号&lt;code&gt;&amp;gt;&lt;/code&gt;开头，引用一段话：&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;右尖括号 &amp;gt; 表示引用。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;代码&lt;/h3&gt;
&lt;h4&gt;内嵌代码&lt;/h4&gt;
&lt;p&gt;用两个&lt;code&gt;反引号&lt;/code&gt;键包围起来。
&lt;code&gt;int var = 100;&lt;/code&gt;&lt;/p&gt;
&lt;h4&gt;固定的代码块&lt;/h4&gt;
&lt;p&gt;以三个&lt;code&gt;反引号&lt;/code&gt;开始一行，并且以同数量的&lt;code&gt;反引号&lt;/code&gt;结束一行，中间的内容就是固定的代码块。&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;NSString \*str = @&amp;quot;Hello Markdown&amp;quot;;
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;有序列表&lt;/h3&gt;
&lt;p&gt;有序列表以 &amp;quot;数字.&amp;quot; + &amp;quot;空格&amp;quot;开始：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;选项 1&lt;/li&gt;
&lt;li&gt;选项 2&lt;/li&gt;
&lt;/ol&gt;
&lt;h3&gt;无序列表&lt;/h3&gt;
&lt;p&gt;无序列表以 &lt;code&gt;*&lt;/code&gt; 或 &lt;code&gt;-&lt;/code&gt; 或 &lt;code&gt;+&lt;/code&gt; + &lt;code&gt;空格&lt;/code&gt;开始：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;选项 1&lt;/li&gt;
&lt;li&gt;选项 2&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;任务列表&lt;/h3&gt;
&lt;p&gt;可以在有序列表或无序列表的基础上，加上 &lt;code&gt;[ ]&lt;/code&gt; 创建任务列表；如果任务已完成，用 &lt;code&gt;[x]&lt;/code&gt; 或 &lt;code&gt;[X]&lt;/code&gt;。&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input checked=&quot;&quot; disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 任务 1&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&quot;&quot; type=&quot;checkbox&quot;&gt; 任务 2&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;水平分割线&lt;/h3&gt;
&lt;p&gt;三个以上的星号或破折号：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;---
---

---
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;表格&lt;/h3&gt;
&lt;p&gt;简单的表格：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Header 1&lt;/th&gt;
&lt;th&gt;Header 2&lt;/th&gt;
&lt;th&gt;Header 3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;也可以在首、尾加上分割线：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Header 1&lt;/th&gt;
&lt;th&gt;Header 2&lt;/th&gt;
&lt;th&gt;Header 3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;td&gt;Cell&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;p&gt;通过冒号来决定单元格内容的对齐方式：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th align=&quot;left&quot;&gt;Header 1&lt;/th&gt;
&lt;th align=&quot;center&quot;&gt;Header 2&lt;/th&gt;
&lt;th align=&quot;right&quot;&gt;Header 3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;&lt;tr&gt;
&lt;td align=&quot;left&quot;&gt;左&lt;/td&gt;
&lt;td align=&quot;center&quot;&gt;中&lt;/td&gt;
&lt;td align=&quot;right&quot;&gt;右&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td align=&quot;left&quot;&gt;左&lt;/td&gt;
&lt;td align=&quot;center&quot;&gt;中&lt;/td&gt;
&lt;td align=&quot;right&quot;&gt;右&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;&lt;/table&gt;
&lt;h3&gt;脚注&lt;/h3&gt;
&lt;p&gt;脚注类似于引用样式的链接。脚注用于完成两件事：标志的文本会变成上标符号；脚注定义将被放置在一个文档末尾的列表。一个脚注看起来是这样的：&lt;/p&gt;
&lt;p&gt;这是包含脚注的文本。&lt;a href=&quot;%E8%BF%99%E6%98%AF%E8%84%9A%E6%B3%A8%E5%86%85%E5%AE%B9%E3%80%82&quot;&gt;^1&lt;/a&gt;&lt;/p&gt;
&lt;hr&gt;
&lt;h2&gt;MDX 扩展语法&lt;/h2&gt;
&lt;h3&gt;什么是 mdx？&lt;/h3&gt;
&lt;p&gt;mdx  是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。 你还可以导入（import）组件，例如交互式图表或弹框，并将它们嵌入到你所书写的内容当中。&lt;/p&gt;
&lt;p&gt;示例:&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-html&quot;&gt;&amp;lt;div className=&amp;quot;note&amp;quot;&amp;gt;&amp;gt; Some notable things in a block quote!&amp;lt;/div&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;div className=&quot;note&quot;&gt; &gt; Some notable things in a block quote! &lt;/div&gt;

&lt;hr&gt;
&lt;h2&gt;Hexo 扩展语法&lt;/h2&gt;
&lt;h3&gt;如何设置「阅读全文」?&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;在文章中使用 &amp;lt;!-- more --&amp;gt; 手动进行截断，Hexo 提供的方式
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;如何修改图片样式？&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;![title](path)
&amp;lt;img src=&amp;quot;链接&amp;quot; width=&amp;quot;宽度&amp;quot; height=&amp;quot;高度&amp;quot; alt=&amp;quot;图片名称&amp;quot; align=&amp;quot;center&amp;quot;&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/MoePlayer/hexo-tag-aplayer/blob/master/docs/README-zh_cn.md&quot;&gt;文档&lt;/a&gt;&lt;/p&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;在主页添加播放器
https://aplayer.js.org/#/zh-Hans/
&lt;/code&gt;&lt;/pre&gt;
&lt;ul&gt;
&lt;li&gt;其他选择&lt;a href=&quot;https://github.com/EYHN/hexo-tag-cplayer&quot;&gt;cplayer&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;插入 pdf&lt;/h3&gt;
&lt;pre&gt;&lt;code class=&quot;language-markdown&quot;&gt;npm install --save hexo-pdf

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}
&lt;/code&gt;&lt;/pre&gt;
&lt;h3&gt;插入视频&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://ultrafish.cn/2020/08/23/online-or-local-video-gif-in-markdown/&quot;&gt;参考&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;添加图片预览&lt;/h3&gt;
&lt;p&gt;&lt;a href=&quot;https://fancyapps.com/docs/ui/quick-start&quot;&gt;fancyapps&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;参考&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;markdown&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://guides.github.com/features/mastering-markdown/&quot;&gt;github-markdown-guide&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;MDX&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.mdxjs.cn/docs/what-is-mdx/&quot;&gt;mdxjs&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;hexo&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://hexo.io/zh-cn/&quot;&gt;HEXO&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;http://theme-next.iissnan.com/getting-started.html&quot;&gt;next 主题&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://github.com/probberechts/hexo-theme-cactus&quot;&gt;cactus 主题&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
</description>
    <pubDate>Sun, 24 Jun 2018 00:00:00 GMT</pubDate>
    <author>wxmvv@outlook.com (wxm)</author>
    <category>markdown</category><category>mdx</category><category>hexo</category>
  </item>

    </channel>
  </rss>