feat: 添加新栏目

rzx007 · Jan 20, 2024 · e4db857 · e4db857
1 parent 8a95ba1
commit e4db857
Show file tree

Hide file tree

Showing 15 changed files with 1,707 additions and 4 deletions.
diff --git a/docs/.vitepress/configs/nav.ts b/docs/.vitepress/configs/nav.ts
@@ -12,6 +12,25 @@ export const nav: DefaultTheme.NavItem[] = [
   //   ],
   //   activeMatch: '^/fe'
   // },
+  {
+    text: '提效工具',
+    items: [
+      {
+        text: '软件推荐与配置',
+        items: [
+          { text: '多平台软件', link: '/efficiency/software/cross-platform' },
+          { text: 'Mac 平台', link: '/efficiency/software/mac' },
+          { text: 'Windows 平台', link: '/efficiency/software/windows' },
+          { text: '浏览器设置与扩展', link: '/efficiency/software/browser' },
+          { text: 'Visual Studio Code 配置', link: '/efficiency/software/vscode' },
+          { text: 'WebStorm 配置', link: '/efficiency/software/webstorm' }
+        ]
+      },
+      { text: '在线工具', link: '/efficiency/online-tools' },
+      { text: '书签脚本', link: '/efficiency/bookmark-scripts' }
+    ],
+    activeMatch: '^/efficiency'
+  },
   {
     text: 'Reference',
     link: 'https://wangchujiang.com/reference/index.html'
@@ -20,6 +39,7 @@ export const nav: DefaultTheme.NavItem[] = [
     text: 'vue3-resource',
     link: 'https://hu-snail.github.io/vue3-resource/'
   },
+
   {
     text: '日常笔记',
     link: 'https://rzx007.github.io/docs/'

diff --git a/docs/.vitepress/configs/sidebar.ts b/docs/.vitepress/configs/sidebar.ts
@@ -14,6 +14,10 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: '选中元素的文本内容', link: '/html-dom/select-the-text-content-of-an-element' },
         { text: '去除文本中的HTML标签', link: '/html-dom/strip-HTML-from-a-given-text' },
         { text: '触发事件', link: '/html-dom/trigger-an-event.md' },
+        {
+          text: '相机聚焦框',
+          link: '/html-dom/css-camera-border'
+        },
         {
           text: '判断元素是否在视窗内',
           link: '/html-dom/check-if-an-element-is-in-the-viewport.md'
@@ -22,7 +26,7 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
           text: '检查元素是否是另一元素的后代',
           link: '/html-dom/check-if-an-element-is-a-descendant-of-another.md'
         },
-        { text: '其他代码块', link: '/html-dom/others.md' },
+        { text: '其他代码块', link: '/html-dom/others.md' }
       ]
     },
     {
@@ -31,10 +35,14 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
       items: [
         { text: '自动调整文本框的宽度以适合其内容', link: '/html-dom/input-auto-fit.md' },
         { text: '将表导出为 csv', link: '/html-dom/export-a-table-to-csv' },
-        { text: '获取元素的第一个可滚动父元素', link: '/html-dom/get-the-first-scrollable-parent-of-an-element' },
+        {
+          text: '获取元素的第一个可滚动父元素',
+          link: '/html-dom/get-the-first-scrollable-parent-of-an-element'
+        },
         { text: '动态加载 JavaScript 文件', link: '/html-dom/load-a-JavaScript-file-dynamically' },
         { text: '从剪贴板粘贴图像', link: '/html-dom/paste-an-image-from-the-clipboard' },
         { text: 'Canvas API 截取图片的一部分', link: '/html-dom/canvas-shotimg' },
+        { text: '如何不使用`try-catch`处理异步错误', link: '/html-dom/await-to-js' },
       ]
     },
     {
@@ -45,11 +53,19 @@ export const sidebar: DefaultTheme.Config['sidebar'] = {
         { text: '复制高亮代码到剪贴板', link: '/html-dom/copy-highlighted-code-to-the-clipboard' },
         { text: '创建自定义滚动条', link: '/html-dom/create-a-custom-scrollbar' },
         { text: '基于流式数据的类似 chatgpt 的打字机式输出', link: '/html-dom/server-sent-events' },
-        { text: '已同步方式实现事件监听', link: '/html-dom/async-addEventListener'},
+        { text: '已同步方式实现事件监听', link: '/html-dom/async-addEventListener' },
         { text: '使用 vue 指令实现一个元素平滑上升的效果', link: '/html-dom/vue-slide-smooth' },
         { text: '创建一个简易的http-server', link: '/html-dom/create-http-server' },
-        { text: '简单的svg转png', link: '/html-dom/convert-svg-to-png' },
+        { text: '简单的svg转png', link: '/html-dom/convert-svg-to-png' }
       ]
     }
+  ],
+  '/efficiency/': [
+    { text: '多平台软件', link: '/efficiency/software/cross-platform' },
+    { text: 'Mac 平台', link: '/efficiency/software/mac' },
+    { text: 'Windows 平台', link: '/efficiency/software/windows' },
+    { text: '浏览器设置与扩展', link: '/efficiency/software/browser' },
+    { text: 'Visual Studio Code 配置', link: '/efficiency/software/vscode' },
+    { text: 'WebStorm 配置', link: '/efficiency/software/webstorm' }
   ]
 }
diff --git a/docs/code/demo/CameraBorder.vue b/docs/code/demo/CameraBorder.vue
@@ -0,0 +1,20 @@
+<template>
+  <div style="display: flex;">
+    <div class="focus-border" style="margin-right: 20px;"></div>
+    <div class="focus-border" style="width: 200px"></div>
+  </div>
+</template>
+
+<style>
+.focus-border {
+  overflow: hidden;
+  width: 100px;
+  height: 100px;
+  border: 4px solid red;
+  border-radius: 10px;
+
+  /* 核心代码 */
+  -webkit-mask: conic-gradient(from -90deg at 40px 40px, red 90deg, transparent 0deg);
+  -webkit-mask-position: -20px -20px;
+}
+</style>
diff --git a/docs/efficiency/bookmark-scripts.md b/docs/efficiency/bookmark-scripts.md
@@ -0,0 +1,29 @@
+---
+description: '收录一些实用的书签脚本，没想到书签还能这么玩'
+---
+
+# 书签脚本
+
+## 回到顶部
+
+只支持窗口滚动，不支持内联滚动
+
+```js
+javascript: void (function () {
+  document.scrollingElement.scrollIntoView({ behavior: 'smooth' })
+})()
+```
+
+<a href="javascript:void(function(){document.scrollingElement.scrollIntoView({behavior:'smooth'})})()">回到顶部</a>
+
+## 显示密码
+
+```js
+javascript: void (function () {
+  document.querySelectorAll('input[type=password]').forEach(function (dom) {
+    dom.setAttribute('type', 'text')
+  })
+})()
+```
+
+<a href="javascript:void(function(){document.querySelectorAll('input[type=password]').forEach(function(dom){dom.setAttribute('type','text')})})()">显示密码</a>
diff --git a/docs/efficiency/online-tools.md b/docs/efficiency/online-tools.md
@@ -0,0 +1,116 @@
+---
+description: '收录一些实用的在线工具，免去下载软件的烦恼'
+---
+
+# 在线工具
+
+## 开发相关
+
+- [Can I use](https://caniuse.com) 兼容性查询
+- [carbon](https://carbon.now.sh) 代码图片生成
+- [npm trends](https://www.npmtrends.com/) 比较 npm package 的下载情况
+- [Bundlephobia](https://bundlephobia.com/) 分析 npm package 的依赖、bundle 后的大小、下载速度预估
+- [Package Phobia](https://packagephobia.com/) 查询 npm package 的安装体积（磁盘大小）
+
+### 沙箱
+
+- [CodeSandbox](https://codesandbox.io)
+- [Codepen](https://codepen.io)
+
+### 正则
+
+- 正则可视化工具
+  - [regulex](https://jex.im/regulex)
+  - [regexper](https://regexper.com)
+  - [正则可视化](https://wangwl.net/r/vr)
+- [regex101](https://regex101.com) 在线正则测试工具
+- [regexgen](https://npm.runkit.com/regexgen) 生成与一组字符串匹配的正则表达式
+- [any-rule](https://any86.github.io/any-rule) 正则大全
+
+### 代码编译
+
+- [ast 生成器](https://astexplorer.net)
+- [rollup](http://rollupjs.org/repl)
+
+#### JS 相关
+
+- [Babel](https://www.babeljs.cn/repl)
+- [TypeScript](https://www.typescriptlang.org/play)
+
+#### Vue
+
+- [Vue Template Explorer](https://template-explorer.vuejs.org/)
+- [Vue 3 Template Explorer](https://vue-next-template-explorer.netlify.app/)
+- [Vue SFC Playground](https://sfc.vuejs.org/)
+
+#### CSS 预处理器
+
+- [Sass Playground](https://www.sassmeister.com)
+- [Less-To-CSS Playground](https://lesscss.org/less-preview)
+- Stylus Playground
+  - [英文官网](https://stylus-lang.com/try.html)
+  - [中文站点](https://www.stylus-lang.cn/try.html)
+
+### 代码生成
+
+- [webcode.tools](https://webcode.tools) Web 代码生成工具 (CSS、HTML、meta 信息、JSON 等)
+- [nginx 配置可视化生成](https://do.co/nginxconfig) [(github)](https://github.com/digitalocean/nginxconfig.io)
+
+#### CSS 相关
+
+- [CSS Grid Generator](https://cssgrid-generator.netlify.app) grid 布局
+- [FANCY-BORDER-RADIUS](https://9elements.github.io/fancy-border-radius) border-radius 圆角
+- [CSS Shadows Generator](https://shadows.brumm.af) box-shadow 阴影
+- [Cubic-Bezier](https://cubic-bezier.com) 贝塞尔曲线
+- [Easing Gradients](https://larsenwork.com/easing-gradients) 渐变
+- [Clippy — CSS clip-path maker](https://bennettfeely.com/clippy) clip-path
+- [Neumorphism/Soft UI generator](https://neumorphism.io) `border-radius / background / box-shadow`
+
+#### SVG 相关
+
+- [Get Waves](https://getwaves.io) SVG 波浪生成器
+
+### CDN
+
+- [jsDelivr](https://www.jsdelivr.com)
+- [esm.sh](https://esm.sh/)
+
+## 图片处理
+
+### 图片底色去除
+
+- [remove.bg](https://www.remove.bg)
+- [BgRemover](https://www.aigei.com/bgremover)
+
+### 图片压缩
+
+- [TinyPNG](https://tinypng.com)
+- [docsmall](https://docsmall.com)
+- [squoosh](https://squoosh.app) [Google 开源](https://github.com/GoogleChromeLabs/squoosh)的图片压缩工具
+
+### 图片生成
+
+- [Shields.io](https://shields.io/) 绘制小徽章
+
+- 生成 Github 仓库 Star 增长图
+
+  - [Star Charts](https://starchart.cc/) 数据更详细
+  - [Star history](https://star-history.t9t.io/) 手绘风格
+
+- [Notion 风格头像制作](https://notion-avatar.vercel.app/zh)
+
+## 作图工具
+
+- [ProcessOn](https://www.processon.com/) 免费在线流程图思维导图
+- [Draw.io](https://app.diagrams.net/) 流程图
+- [Excalidraw](https://excalidraw.com/) 手绘风格流程图
+
+## 文件处理
+
+- 在线格式转换
+  - [CloudConvert](https://cloudconvert.com/) 在线文件转换器，支持 200+ 种格式、支持自定义设置、图片可在线预览（英文界面）
+  - [Convertio](https://convertio.co/zh/) 在线转换文件的简单工具，支持 300+ 种格式、支持自定义设置（最大 100M）
+
+## 休闲娱乐
+
+[yikm 小霸王在线游戏机](https://www.yikm.net/)
diff --git a/docs/efficiency/software/browser.md b/docs/efficiency/software/browser.md
@@ -0,0 +1,105 @@
+---
+description: '收录一些能提升使用体验的浏览器扩展、油猴脚本、实用小技巧'
+---
+
+# 浏览器设置与扩展
+
+- [Chrome 插件开发全攻略](https://github.com/sxei/chrome-plugin-demo)
+
+## 扩展商店
+
+- [Chrome 网上应用店](https://chrome.google.com/webstore/category/extensions)
+
+- [CrxDL - Chrome 浏览器扩展插件 CRX 下载网](https://crxdl.com/) 更新及时，可下载历史版本
+
+- [Chrome 插件扩展下载网 (免翻墙)](https://www.extfans.com/)
+
+## 体验优化
+
+- 自定义你的新标签页
+
+  - [Infinity 新标签页 (Pro)](https://chrome.google.com/webstore/detail/infinity-new-tab-pro/nnnkddnnlpamobajfibfdgfnbcnkgngh) 功能强大，更符合用户习惯
+
+  - [Momentum](https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca) 设计更加简洁
+
+  - [MONKNOW 新标签页 - 个性化面板](https://www.monknow.com/zh-CN) 支持网站网址 URL 分组管理，数据实时云同步，黑暗深色夜间主题模式。
+
+- [二维码生成器](https://chrome.google.com/webstore/detail/quick-qr-code-generator/afpbjjgbdimpioenaedcjgkaigggcdpp/) 为当前网页链接或任意内容生成二维码
+
+- [uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm) 广告拦截工具
+
+- [过滤广告 为 Youtube™](https://chrome.google.com/webstore/detail/adblock-for-youtube/cmedhionkhpnakcndndgjdbohmhepckk) 移除 Youtube 中的视频广告。
+
+- [哔哩哔哩助手](https://chrome.google.com/webstore/detail/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8A%A9%E6%89%8B%EF%BC%9Abilibilicom-%E7%BB%BC%E5%90%88%E8%BE%85%E5%8A%A9%E6%89%A9%E5%B1%95/kpbnombpnpcffllnianjibmpadjolanh) 哔哩哔哩弹幕网辅助扩展，拥有视频区和直播区的人性化功能
+
+- [The Marvellous Suspender](https://chrome.google.com/webstore/detail/the-marvellous-suspender/noogafoofpebimajpfpamcfhoaifemoa) 冻结暂时用不到的标签页，以释放系统资源
+
+- [OneTab](https://chrome.google.com/webstore/detail/the-great-suspender/klbibkeccnjlkjkiokjodocebajanakg) 点击 OneTab 可将标签页转换成一个列表以释放系统资源，当您需要再次访问这些标签页时，可以单独或全部恢复它们。
+
+- [彩云小译](https://chrome.google.com/webstore/detail/lingocloud-web-translatio/jmpepeebcbihafjjadogphmbgiffiajh) 全文翻译(中英对照)
+
+- [划词翻译](https://chrome.google.com/webstore/detail/%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/ikhdkkncnoglghljlkmcimlnlhkeamad) 划词翻译
+
+- [沙拉查词](https://chrome.google.com/webstore/detail/%E6%B2%99%E6%8B%89%E6%9F%A5%E8%AF%8D-%E8%81%9A%E5%90%88%E8%AF%8D%E5%85%B8%E5%88%92%E8%AF%8D%E7%BF%BB%E8%AF%91/cdonnmffkdaoajfknoeeecmchibpmkmg) Saladict 沙拉查词是一款专业划词翻译扩展，为交叉阅读而生。大量权威词典涵盖中英日韩法德西语，支持复杂的划词操作、网页翻译、生词本与 PDF 浏览。
+
+- [Video Speed Controller](https://chrome.google.com/webstore/detail/video-speed-controller/nffaoalbilbmmfgbnbgppjihopabppdk) 视频倍速播放，支持使用快捷键加快，减慢，推进和回放任何 HTML5 视频
+
+- [medium-unlimited](https://github.com/manojVivek/medium-unlimited) 免费读取 `medium.com` 文章
+
+## 开发常用
+
+- [Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) 用于调试 `Vue.js` 应用程序
+
+- [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) 用于调试 `React` 应用程序
+
+- [Redux DevTools](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) 用于调试应用程序 `Redux` 状态更改
+
+- [掘金](https://chrome.google.com/webstore/detail/%E6%8E%98%E9%87%91/lecdifefmmfjnjjinhaennhdlmcaeeeb) 在新标签页展示聚合内容，包含前端、Android、iOS、后端、产品、设计六大频道，每个频道内都有一到多个内容源
+
+- [WEB 前端助手(FeHelper)](https://chrome.google.com/webstore/detail/fehelperjson/pkgccpejnmalmdinmhkkfafefagiiiad) 包括字符串编解码、图片 `base64` 编码、代码压缩、美化、`JSON` 格式化、正则表达式、时间转换工具、二维码生成器、编码规范检测、页面性能检测、栅格检测、`JS` 运行效率分析
+
+- [Lighthouse](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk) 网站性能测评工具
+
+- [JSON Formatter](https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa) `JSON` 格式化
+
+## GitHub 相关
+
+- [Octotree](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc) 显示文件树形目，在线浏览 Github 代码更便捷
+
+- [Refined GitHub](https://chrome.google.com/webstore/detail/refined-github/hlepfoohegkhhmjieoechaddaejaokhf) 优化 GitHub 默认功能和样式
+
+- [OctoLinker](https://chrome.google.com/webstore/detail/octolinker/jlmafbaeoofdegohdhinkhilhclaklkp) 根据 `require/import` 或 `package.json` 中的 `dependencies` 进行快速跳转
+
+- [File Icon for GitHub and GitLab](https://chrome.google.com/webstore/detail/file-icon-for-github-and/ficfmibkjjnpogdcfhfokmihanoldbfe) 文件 `icon` 美化
+
+- [Github Hovercard](https://chrome.google.com/webstore/detail/github-hovercard/mmoahbbnojgkclgceahhakhnccimnplk) GitHub 的悬浮卡，可快速浏览量用户/仓库/问题/提交信息
+
+- [Enhanced GitHub](https://chrome.google.com/webstore/detail/enhanced-github/anlikcnbgdeidpacdbdljnabclhahhmd) 显示仓库大小、每个文件的大小、下载链接和复制文件内容的选项
+
+## 油猴
+
+- [油猴管理器](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo) 可以通过脚本修改网页
+
+- [油猴脚本市场](https://greasyfork.org/zh-CN)
+
+- [油猴 API 文档](https://www.tampermonkey.net/documentation.php?ext=dhdg&locale=zh)
+
+- 脚本推荐
+
+  - [access-link](https://greasyfork.org/zh-CN/scripts/395970)修复跳转链接为站外直链（移除重定向），免去拦截页面点击步骤可直达站外；拦截页面自动跳转
+
+  - [解除 B 站区域限制](https://greasyfork.org/zh-CN/scripts/25718) 实现解除 B 站区域限制，只对 `HTML5` 播放器生效
+
+  - [imooc-tools](https://greasyfork.org/zh-CN/scripts/396378) 慕课网问答区快速查看问答详情、自动播放下一节视频
+
+  - [115 转存助手 ui 优化版](https://gist.github.com/Nerver4Ever/953447c9ecd330ffc0861d4cbb839369) 115 网盘重要资源的备份复制转移
+
+## 其他工具
+
+- [微信读书自动阅读器](https://github.com/DoooReyn/WxRead-WebAutoReader) 全自动刷阅读时长，轻轻松松冲顶霸榜，您的微读挂机好帮手
+
+## 技巧
+
+### 打开不安全网页
+
+在当前页面任意地方点击，直接输入 `thisisunsafe` 后回车就能访问