mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-23 02:31:33 +08:00
docs: update
This commit is contained in:
KazooTTT
@ -11,11 +11,12 @@ tags:
|
||||
- deepseek
|
||||
finished: true
|
||||
published: true
|
||||
category: 软件
|
||||
category: AI
|
||||
slug: free-tokens-large-model-service
|
||||
description:
|
||||
NotionID-notionnext: 30a20483-ea28-4daf-b8be-155f0e690bc7
|
||||
link-notionnext: https://kazoottt.notion.site/tokens-30a20483ea284dafb8be155f0e690bc7
|
||||
rinId: 43
|
||||
---
|
||||
|
||||
# 可以免费领取tokens的大模型服务
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
title: Possible Causes and Solutions for Focusee Switching System Audio to Speaker Playback forcibly
|
||||
date: 2024-05-25
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Draft
|
||||
tags:
|
||||
- focusee
|
||||
- obs
|
||||
- VirtualSoundCard
|
||||
- BlackHole2ch
|
||||
finished: true
|
||||
published: true
|
||||
slug: possible-causes-and-solutions-for-focusee-switching-system-audio-to-speaker-playback-forcibly
|
||||
description:
|
||||
NotionID-notionnext: 80f19b4c-d207-45a0-bbbb-39641a9dc330
|
||||
link-notionnext: https://kazoottt.notion.site/Possible-Causes-and-Solutions-for-Focusee-Switching-System-Audio-to-Speaker-Playback-forcibly-80f19b4cd20745a0bbbb39641a9dc330
|
||||
rinId: 39
|
||||
category: english writing
|
||||
---
|
||||
|
||||
# Possible Causes and Solutions for Focusee Switching System Audio to Speaker Playback Forcibly
|
||||
|
||||
On macOS, when I wanted to use Focusee to record system audio, I followed its guide to install Gemoo Speaker.
|
||||
|
||||
Although switching the output device to Gemoo Speaker allowed me to record the system audio, it played the sound directly through the speakers.
|
||||
|
||||
Later, I found out that it was because I had installed BlackHole2ch. After uninstalling this virtual sound card, Focusee was able to record the sound through the headphones properly using Gemoo Speaker.
|
||||
|
||||
Uninstallation method:
|
||||
|
||||
Navigate to the folder `/Library/Audio/Plug-Ins/HAL` and delete the corresponding BlackHole2ch folder.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
By the way, the reason I installed BlackHole2ch was to record system audio during screen recording or live streaming. Today, I suddenly discovered that OBS now directly supports recording system audio.
|
||||
|
||||
Here's how to do it:
|
||||
|
||||
1. Click the add button below the sources and select macOS Screen Capture.
|
||||
|
||||
|
||||
2. Choose whether to capture desktop audio or application audio based on your needs.
|
||||
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
title: Reasons Not to Recommend Purchasing Focusee for macOS Users
|
||||
date: 2024-06-20
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- macOS
|
||||
- Focusee
|
||||
- Screen Recording Software
|
||||
- Review
|
||||
- Refund
|
||||
finished: true
|
||||
published: true
|
||||
category: english writing
|
||||
slug: focusee-macos-review-en
|
||||
description: An analysis of Focusee's shortcomings on macOS, including severe color discrepancies, slow export speed, and sound card configuration conflicts, along with the author's refund experience.
|
||||
NotionID-notionnext: c692f30c-bcbc-48fd-9739-19e23a3e1e40
|
||||
link-notionnext: https://kazoottt.notion.site/Reasons-Not-to-Recommend-Purchasing-Focusee-for-macOS-Users-c692f30cbcbc48fd973919e23a3e1e40
|
||||
rinId: 40
|
||||
---
|
||||
|
||||
# Reasons Not to Recommend Purchasing Focusee for macOS Users
|
||||
|
||||
## Why I Purchased Focusee
|
||||
|
||||
1. **Need to Record Both Camera and Screen Simultaneously**: Often need to show both myself and the computer screen while recording videos.
|
||||
2. **Need to Use Zoom Function**: Occasionally need to zoom in on specific areas during recording, and Focusee conveniently adds this effect.
|
||||
3. **Supports Both macOS and Windows**: Additionally, there was a discount for purchasing for two devices.
|
||||
|
||||
Based on these three reasons, I purchased Focusee.
|
||||
|
||||
## Why I Don't Recommend It
|
||||
|
||||
### Severe Color Discrepancy
|
||||
|
||||
This is the most serious issue.
|
||||
|
||||
The recorded videos on macOS have significant color discrepancies compared to the actual screen, to the extent that I find it almost unusable. Here's a specific comparison:
|
||||
|
||||
|
||||
|
||||
After discovering this issue, I contacted their team:
|
||||
|
||||
On May 27th, I reported the issue for the first time. They responded that macOS 12.3 and below didn't have this problem, but versions above 12.3 did, and they were looking for a solution.
|
||||
|
||||
|
||||
|
||||
By June 18th, there was still no reply, so I sent another email asking for progress. They replied:
|
||||
|
||||
1. This is an issue caused by higher versions of macOS (but no other screen recording software has such severe color discrepancies).
|
||||
2. Fixing this specific issue might sacrifice other color gamuts in the software.
|
||||
3. The current software configuration provides the best solution for balancing various colors (meaning this issue will not be resolved).
|
||||
|
||||
|
||||
|
||||
### Very Slow Export Speed
|
||||
|
||||
The slowness is quite noticeable. My configuration is a Mac Mini M2 Pro, and whether adding effects to the recorded video or exporting it directly without any changes, the speed is very slow.
|
||||
|
||||
### Sound Card Configuration Conflicts and Lack of Single Application Recording
|
||||
|
||||
Focusee's sound card settings conflict with other virtual sound cards on my system, possibly causing the sound output to be forcibly switched to speakers, and I can't switch back to headphones.
|
||||
|
||||
Issue troubleshooting and solutions: [[Possible Causes and Solutions for Focusee Switching System Audio to Speaker Playback forcibly]]
|
||||
|
||||
[Possible Causes and Solutions for Focusee Switching System Audio to Speaker Playback forcibly](https://www.kazoottt.top/article/possible-causes-and-solutions-for-focusee-switching-system-audio-to-speaker-playback-forcibly)
|
||||
|
||||
Moreover, it doesn't support single application sound recording. Competing products like Screen Studio (paid), QuickRecorder (open-source and free), and OBS all support single application sound recording.
|
||||
|
||||
## Refund Experience
|
||||
|
||||
Since they informed me that the color discrepancy issue would not be resolved, and this was a crucial functional defect for me, I decided to request a refund.
|
||||
|
||||
I purchased Focusee from [数码荔枝 x 软件商店 - 专注于分享最新鲜优秀的正版软件](https://lizhi.shop/) Taobao store. After contacting customer service to ask if I could get a refund, they processed it quickly and agreed to it without any issues. This was quite a pleasant surprise. I will consider Litchi Digital for similar purchases in the future.
|
||||
72
src/content/post/english writing/open-graph intro.md
Normal file
72
src/content/post/english writing/open-graph intro.md
Normal file
@ -0,0 +1,72 @@
|
||||
---
|
||||
title: open graph introduction
|
||||
date: 2024-04-09T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: open-graph-en
|
||||
description: >-
|
||||
Open Graph is a protocol introduced by Facebook in 2010, designed to enhance
|
||||
the display of preview cards when sharing links on social networks like
|
||||
Twitter. It allows websites to control how their content appears when shared,
|
||||
differentiating between links that show previews and those that do not.
|
||||
Twitter also has its own card system, which takes precedence over Open Graph
|
||||
if both are present. Tools like OpenGraph.xyz and opengraph.dev help in
|
||||
previewing and generating Open Graph meta tags for better social media
|
||||
sharing.
|
||||
NotionID-notionnext: 96e4d436-6fd9-4fec-865c-ac2d80b06be0
|
||||
link-notionnext: 'https://kazoottt.notion.site/open-graph-intro-96e4d4366fd94fec865cac2d80b06be0'
|
||||
rinId: 17
|
||||
category: english writing
|
||||
---
|
||||
|
||||
# Open-graph Intro
|
||||
|
||||
[[open graph 简述]]
|
||||
|
||||
## Scenario
|
||||
|
||||
When we use Twitter, we notice that some links display preview cards while others do not.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
This is because some websites have set up Open Graph, while others have not.
|
||||
|
||||
|
||||
|
||||
## What is Open Graph?
|
||||
|
||||
Open Graph is a protocol introduced by Facebook in 2010, used for displaying preview cards when sharing links on social networks.
|
||||
|
||||
|
||||
|
||||
From its name and purpose, it's evident that Open Graph signifies the openness of Facebook and other platforms supporting this protocol, especially amidst certain platforms that block external links or throttle those containing external links.
|
||||
|
||||
|
||||
|
||||
Similar to Open Graph, Twitter has its own card system. If both Twitter Card and Open Graph coexist, Twitter Card takes precedence. Only if Twitter Card is not defined, Open Graph is displayed.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Preview and Inspection Tools
|
||||
|
||||
[OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph](https://www.opengraph.xyz/)
|
||||
|
||||
|
||||
|
||||
[OpenGraph - Preview Images and Generate Open Graph Meta Tags](https://opengraph.dev/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Some Examples
|
||||
|
||||
[Open Graph Examples](https://opengraphexamples.com/)
|
||||
|
||||
|
||||
38
src/content/post/git/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
38
src/content/post/git/已经发布的分支在本地重命名之后如何推送到远程.md
Normal file
@ -0,0 +1,38 @@
|
||||
---
|
||||
title: 已经发布的分支在本地重命名之后如何推送到远程
|
||||
date: 2024-10-16
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Git
|
||||
- 分支管理
|
||||
finished: true
|
||||
published: true
|
||||
category: git
|
||||
slug: rename-published-branch-git
|
||||
description:
|
||||
---
|
||||
|
||||
要将已经发布的分支在本地重命名并推送到远程，可以按照以下步骤进行：
|
||||
|
||||
1. 重命名本地分支：
|
||||
如果你还没有重命名分支，可以使用以下命令：
|
||||
|
||||
```bash
|
||||
git branch -m 旧分支名 新分支名
|
||||
```
|
||||
|
||||
2. 推送重命名后的分支到远程：
|
||||
使用 `-u` 选项设置上游分支：
|
||||
|
||||
```bash
|
||||
git push -u origin 新分支名
|
||||
```
|
||||
|
||||
3. 删除远程的旧分支：
|
||||
如果你希望删除远程的旧分支，可以使用：
|
||||
|
||||
```bash
|
||||
git push origin --delete 旧分支名
|
||||
```
|
||||
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: __dirname is not defined in ES module scope
|
||||
date: 2024-05-29T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- nodejs
|
||||
- 前端
|
||||
- esm
|
||||
- module
|
||||
finished: true
|
||||
published: true
|
||||
category: 前端
|
||||
slug: dirname-is-not-defined-in-es-module-scope
|
||||
NotionID-notionnext: 543bfc66-a416-4704-92be-9a93fed191a8
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/__dirname-is-not-defined-in-ES-module-scope-543bfc66a416470492be9a93fed191a8
|
||||
rinId: 14
|
||||
---
|
||||
|
||||
# __dirname Is not Defined in ES Module Scope
|
||||
|
||||
在package.json中的type = module的项目中，我创建了一个ts文件，类型是esm的类型。
|
||||
|
||||
这里的报错是因为我们错误的使用了module的语法到esm的文件中，要解决这个问题的方法有两种，第一种改为module，另一种是改为esm的写法。
|
||||
|
||||
首先是第一种改为module的写法，那就是把import改为require，然后由于我们这里是module的项目，所以需要修改一下ts文件的后缀ts改为cts。
|
||||
|
||||
一个供参考的例子：[GitHub - shawnsparks/typescript-esm: Explore different usage patterns of ES modules with Typescript](https://github.com/shawnsparks/typescript-esm)
|
||||
|
||||
然后是第二种，文件、路径相关的改为esm的写法。
|
||||
|
||||
```ts
|
||||
import { fileURLToPath } from "url"
|
||||
import path from "path"
|
||||
|
||||
// 获取当前模块的目录路径
|
||||
const __filename = fileURLToPath(import.meta.url)
|
||||
const __dirname = path.dirname(__filename)
|
||||
```
|
||||
24
src/content/post/前端/antd switch组件错误使用案例.md
Normal file
24
src/content/post/前端/antd switch组件错误使用案例.md
Normal file
@ -0,0 +1,24 @@
|
||||
---
|
||||
title: antd switch组件错误使用案例
|
||||
date: 2024-10-12
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
finished: true
|
||||
published: true
|
||||
description:
|
||||
slug: antd-switch-component-misuse-example
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# antd switch组件错误使用案例
|
||||
|
||||
在使用antd的[switch](https://ant-design.antgroup.com/components/switch-cn)的时候,我错误地使用了api
|
||||
|
||||
``` tsx
|
||||
<Switch checked={mode === 1} onChange={handleModeChange} />
|
||||
```
|
||||
|
||||
这里的onChange是cheked变化的时候触发的回调,如果想要切换Switch的时候触发回调,应该使用onClick，而不是onChange。
|
||||
|
||||
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: fetch 报错排查 SocketError other side closed
|
||||
date: 2024-02-03T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 网络
|
||||
published: true
|
||||
slug: fetch-socketerror-other-side-closed
|
||||
link: >-
|
||||
https://kazoottt.notion.site/fetch-SocketError-other-side-closed-d399e7db398c4f7faaa8d3e0003327fd
|
||||
notionID: d399e7db-398c-4f7f-aaa8-d3e0003327fd
|
||||
description: >-
|
||||
在main.js文件中使用fetch方法时遇到了报错，错误信息显示“fetch failed”并指出“other side
|
||||
closed”。错误发生在getFansNum函数中，具体是由于TLS连接的另一端关闭导致的。解决此问题的方法是关闭MitM（中间人攻击）工具，这通常用于拦截和修改网络通信，可能会导致不正常的连接关闭。
|
||||
rinId: 15
|
||||
finished: true
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Fetch 报错
|
||||
|
||||
# 常规
|
||||
|
||||
排查 SocketError other side closed
|
||||
|
||||
在main.js中使用了fetch，但是在运行main.js的时候时候fetch报错。
|
||||
|
||||
```shell
|
||||
% node main.js
|
||||
|
||||
(node:51258) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.
|
||||
(Use `node --trace-warnings ...` to show where the warning was created)
|
||||
node:internal/deps/undici/undici:11730
|
||||
Error.captureStackTrace(err, this);
|
||||
^
|
||||
|
||||
TypeError: fetch failed
|
||||
at Object.fetch (node:internal/deps/undici/undici:11730:11)
|
||||
at async getFansNum (/Users/kazoottt/GitHub/bilibili-fans/main.js:11:20) {
|
||||
cause: SocketError: other side closed
|
||||
at TLSSocket.onSocketEnd (node:internal/deps/undici/undici:8280:26)
|
||||
at TLSSocket.emit (node:events:526:35)
|
||||
at endReadableNT (node:internal/streams/readable:1589:12)
|
||||
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
|
||||
code: 'UND_ERR_SOCKET',
|
||||
socket: {
|
||||
localAddress: '198.19.0.1',
|
||||
localPort: 55306,
|
||||
remoteAddress: '198.18.2.185',
|
||||
remotePort: 443,
|
||||
remoteFamily: 'IPv4',
|
||||
timeout: undefined,
|
||||
bytesWritten: 607,
|
||||
bytesRead: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Node.js v20.10.0
|
||||
```
|
||||
|
||||
从报错信息中可以看出来是getFansNum这个方法中的fetch方法报了错。
|
||||
|
||||
解决方法：
|
||||
|
||||
关闭MitM
|
||||
48
src/content/post/前端/node path模块相关操作.md
Normal file
48
src/content/post/前端/node path模块相关操作.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: node | path模块相关操作
|
||||
subtitle: 记录一些常用用法和区别，以及犯的错。
|
||||
date: 2022-10-24
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- path
|
||||
- 前端
|
||||
- node
|
||||
slug: node-path-module-related-operations
|
||||
published: true
|
||||
description: >-
|
||||
本文介绍了Node.js中path模块的常用操作，包括__dirname与process.cwd()的区别，以及path.join()和path.resolve()的差异。特别指出，__dirname和process.cwd()在使用时需注意其返回的路径差异，以免导致静态资源加载失败。同时，path.join()用于连接路径，而path.resolve()则解析为绝对路径。这些知识点对于正确配置和处理文件路径至关重要。
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Path 相关操作
|
||||
|
||||
path 是 node 的一个常用模块。
|
||||
|
||||
## 常用用法
|
||||
|
||||
TODO
|
||||
|
||||
## 区别
|
||||
|
||||
1. \_\_dirname 和 process.cwd()的区别
|
||||
|
||||
[node.js - What's the difference between process.cwd() vs \_\_dirname? - Stack Overflow](https://stackoverflow.com/questions/9874382/whats-the-difference-between-process-cwd-vs-dirname)
|
||||
|
||||
|
||||
|
||||
此段代码意在配置静态资源路径，由于错误使用\_\_dirname，导致静态资源加载失败。
|
||||
|
||||
```
|
||||
xxx/server_build/client_build // 前者返回
|
||||
xxx/client_build // 后者返回
|
||||
```
|
||||
|
||||
|
||||
|
||||
而目录结构为上图，express-对应 server 打包在 server_bulid,需要加载的 client scripts 在 client_buiild，为同级目录，所以第一张图右边的写法才能正确配置静态资源路径。
|
||||
|
||||
2. path.join()和 path.resolve()的区别
|
||||
|
||||
连接路径
|
||||
|
||||
path.resolve() ==> 解析为绝对路径
|
||||
31
src/content/post/前端/npm scope公共包.md
Normal file
31
src/content/post/前端/npm scope公共包.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
title: npm scope公共包
|
||||
date: 2024-02-18T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- npm
|
||||
finished: true
|
||||
published: true
|
||||
slug: npm-scope-public-package
|
||||
description: >-
|
||||
在package.json文件中添加"publishConfig"字段，设置"access"为"public"，或者在发布时使用命令`npm publish
|
||||
--access=public`，以确保包的访问权限为公开。
|
||||
rinId: 72
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Npm Scope公共包
|
||||
|
||||
在package.json中新增：
|
||||
|
||||
```json
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
```
|
||||
|
||||
或者发布的时候加上 `--access=public`
|
||||
|
||||
```javascript
|
||||
npm publish --access=public
|
||||
```
|
||||
35
src/content/post/前端/npm发包失败的原因.md
Normal file
35
src/content/post/前端/npm发包失败的原因.md
Normal file
@ -0,0 +1,35 @@
|
||||
---
|
||||
title: npm发包失败的原因
|
||||
date: 2024-02-18T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- npm
|
||||
finished: true
|
||||
published: true
|
||||
slug: reasons-why-npm-fails-to-send-packages
|
||||
link: 'https://kazoottt.notion.site/npm-b256188902f74be09e4ee74f8247da84'
|
||||
notionID: b2561889-02f7-4be0-9e4e-e74f8247da84
|
||||
description: >-
|
||||
本文讨论了在npm发包过程中可能遇到的失败原因，包括账号权限不足、包名不规范、包名包含屏蔽词等。特别提到了“download”是一个屏蔽词，作者通过将其替换为“downloader”后成功发布。同时，文章也提到了npm的命令行工具在错误信息提供上的不足，使得问题定位变得困难。参考了GitHub上的相关讨论，以帮助理解这一问题。
|
||||
rinId: 73
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Npm发包失败的原因
|
||||
|
||||
## 可能的原因：
|
||||
|
||||
1. 当前的账号没有发包权限。（比如没有某个包或者某个scope的权限）
|
||||
2. 当前的包名不符合规范。（需要URL-safe characters）
|
||||
3. 当前的包名是屏蔽词。（例如download [[前端/node/npm发包失败的原因#npm包名屏蔽词]])
|
||||
4. 其他（后续遇到了再补充）
|
||||
|
||||
// 吐槽一下，npm的cli给的信息很多都是无效信息，有时候很难从中知道到底是哪里有问题
|
||||
|
||||
## Npm包名屏蔽词
|
||||
|
||||
1. download (我替换成downloader之后才成功发布）
|
||||
|
||||
## 参考
|
||||
|
||||
[\[BUG\] npm publish get 400 Bad Request without any useful information · Issue #6090 · npm/cli · GitHub](https://github.com/npm/cli/issues/6090)
|
||||
84
src/content/post/前端/npm和npx的区别.md
Normal file
84
src/content/post/前端/npm和npx的区别.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
title: npm和npx的区别
|
||||
date: 2023-09-06
|
||||
author: KazooTTT
|
||||
finished: false
|
||||
published: true
|
||||
slug: difference-between-npm-and-npx
|
||||
description: >-
|
||||
本文详细介绍了npm和npx的区别，包括它们的定义、使用场景和具体用法。npm是Node.js的默认包管理器，用于安装、卸载和升级包，而npx是一个命令行工具，允许用户直接运行项目中的二进制文件，无需全局安装。文章通过实例说明了两者在实际开发中的应用，如使用npm安装ant
|
||||
design，以及使用npx创建nextjs项目。
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Npm和npx的区别
|
||||
|
||||
在日常的开发中，经常会使用这两个指令。
|
||||
|
||||
例如使用 npm 引入 ant design
|
||||
|
||||
```shell
|
||||
npm install antd
|
||||
```
|
||||
|
||||
[Create Next App | Next.js (nextjs.org)](https://nextjs.org/docs/api-reference/create-next-app) 中运行使用 npx 来创建 nextjs 项目
|
||||
|
||||
```shell
|
||||
npx create-next-app@latest
|
||||
# or
|
||||
yarn create next-app
|
||||
# or
|
||||
pnpm create next-app
|
||||
```
|
||||
|
||||
本文将从两者的定义、区别、使用场景这三个部分进行阐述。
|
||||
|
||||
## Npm 和 Npx 的定义
|
||||
|
||||
开宗明义，首先需要弄清楚 npm 和 npx 的定义以及它们具体是用来做什么的。
|
||||
|
||||
### Npm 的定义
|
||||
|
||||
我从书籍或者网站中找了一些关于 npm 的定义。例如在《JavaScript 高级程序设计 4th》，作者对 npm 的定义如下：
|
||||
|
||||
> npm，即 Node 包管理器（Node Package Manager），是 Node.js 运行时默认的包管理器。在 npm 仓库中发布的第三方包可以指定为项目依赖，并通过命令行本地安装。npm 仓库包含服务端和客户端 JavaScript 库。
|
||||
> npm 是为在服务器上使用而设计的，服务器对依赖大小并不敏感。在安装包时，npm 使用嵌套依赖树解析所有项目依赖，每个项目依赖都会安装自己的依赖。这意味着如果项目依赖三个包 A、B 和 C，而这三个包又都依赖不同版本的 D，则 npm 会安装包 D 的三个版本。
|
||||
|
||||
在 freecodecamp 的技术分享博客（[什么是 npm —— 写给初学者的编程教程 (freecodecamp.org)](https://www.freecodecamp.org/chinese/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/)）中，作者对 npm 的定义如下：
|
||||
|
||||
> npm（“Node 包管理器”）是 JavaScript 运行时 Node.js 的默认程序包管理器。
|
||||
> npm 由两个主要部分组成:
|
||||
>
|
||||
> 1. 用于发布和下载程序包的 CLI（命令行界面）工具
|
||||
> 2. 托管 JavaScript 程序包的 [在线存储库](https://www.npmjs.com/)
|
||||
|
||||
---
|
||||
|
||||
也就是说 npm 的本质是包管理器。
|
||||
|
||||
如何管理包？
|
||||
|
||||
对于本地，使用 CLI 进行包的安装，卸载、升级
|
||||
对于 npm 存储库，使用 CLI 进行将包发布到存储库中
|
||||
包从何而来？
|
||||
|
||||
npm 存储库 <=== 他人使用 CLI 进行将包发布到存储库中
|
||||
|
||||
很显然在本文开头 npm 命令其实代指的命令行工具，而不是包管理器这个概念本身。
|
||||
|
||||
综上，提到 npm 的时候可能有两个定义，一个是包管理器（本身的定义），一个是包管理器对应的命令行工具（使用过程中代指的定义）。
|
||||
|
||||
### Npx 的定义
|
||||
|
||||
在[什么是 npm —— 写给初学者的编程教程 (freecodecamp.org)](https://www.freecodecamp.org/chinese/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/) 中提到
|
||||
|
||||
> 最新引入的 [npx](https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/) 使我们可以像在全局安装程序一样运行这些 `node_modules` 项目作用域命令，方法是在其前面加上 `npx ...`（即`npx prettier --write ** / *。ts`）。
|
||||
|
||||
## 用法
|
||||
|
||||
[npx 使用教程 - 阮一峰的网络日志 (ruanyifeng.com)](https://www.ruanyifeng.com/blog/2019/02/npx.html)
|
||||
|
||||
如果要运行项目中的某些二进制文件，以前只能使用 路径/bin 文件 来执行
|
||||
但是使用 npx 就可以直接运行了
|
||||
|
||||
> npx 的原理很简单，就是运行的时候，会到`node_modules/.bin`路径和环境变量`$PATH`里面，检查命令是否存在。由于 npx 会检查环境变量`$PATH`，所以系统命令也可以调用。
|
||||
68
src/content/post/前端/npm换源.md
Normal file
68
src/content/post/前端/npm换源.md
Normal file
@ -0,0 +1,68 @@
|
||||
---
|
||||
title: npm换源
|
||||
date: 2024-02-07
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- npm
|
||||
- node
|
||||
published: true
|
||||
slug: npm-registry
|
||||
description: >-
|
||||
本文介绍了如何查看、更换和取消Node.js包管理工具（npm, yarn,
|
||||
pnpm）的源地址，以及如何使用yrm工具快速切换不同的npm源。通过执行特定的命令，用户可以轻松地管理这些工具的源设置，从而优化包的下载速度和开发效率。
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# 查看源
|
||||
|
||||
```shell
|
||||
npm config get registry
|
||||
```
|
||||
|
||||
```shell
|
||||
yarn config get registry
|
||||
```
|
||||
|
||||
```shell
|
||||
pnpm config get registry
|
||||
```
|
||||
|
||||
# 换源
|
||||
|
||||
```shell
|
||||
npm config set registry https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
```shell
|
||||
yarn config set registry https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
```shell
|
||||
pnpm config set registry https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
# 取消换源
|
||||
|
||||
```shell
|
||||
npm config delete registry
|
||||
```
|
||||
|
||||
```shell
|
||||
yarn config delete registry
|
||||
```
|
||||
|
||||
```shell
|
||||
pnpm config delete registry
|
||||
```
|
||||
|
||||
# 工具
|
||||
|
||||
[GitHub - i5ting/yrm: YARN registry manager, fast switch between different registries: npm, cnpm, nj, taobao](https://github.com/i5ting/yrm)
|
||||
|
||||
```shell
|
||||
npm install -g yrm
|
||||
|
||||
yrm ls
|
||||
|
||||
yrm use [name]
|
||||
```
|
||||
66
src/content/post/前端/open graph 简述.md
Normal file
66
src/content/post/前端/open graph 简述.md
Normal file
@ -0,0 +1,66 @@
|
||||
---
|
||||
title: open graph简述
|
||||
date: 2024-04-09T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: open-graph
|
||||
description: >-
|
||||
在使用Twitter时，我们可能会注意到有些链接会显示预览卡片，而有些则不会。这主要是因为一些网站设置了Open Graph协议，而有些则没有。Open
|
||||
Graph是由Facebook在2010年推出的协议，用于在社交网络上分享链接时显示预览卡片。此外，Twitter也有自己的Twitter
|
||||
Card协议，如果两者同时存在，Twitter会优先显示Twitter Card的内容。文章还介绍了一些检查和预览Open
|
||||
Graph设置的工具，以及提供Open Graph示例的网站。
|
||||
NotionID-notionnext: 76ed52a0-ad58-401c-8a5d-c5719f67b673
|
||||
link-notionnext: 'https://kazoottt.notion.site/open-graph-76ed52a0ad58401c8a5dc5719f67b673'
|
||||
rinId: 16
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# Open Graph 简述
|
||||
|
||||
## 场景
|
||||
|
||||
在我们使用twitter的时候，会发现有的链接会显示预览卡片，有的不会。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
这是因为有的网站设置了open graph，有的没有。
|
||||
|
||||
|
||||
|
||||
## 那么什么是open graph？
|
||||
|
||||
open graph是一个由facebook在2010年发布的协议，用于在社交网络上分享链接时，显示预览卡片。
|
||||
|
||||
|
||||
|
||||
我觉得无论是它的名称还是意图，都能看出facebook以及其他支持这种协议的社交平台的开放性, 特别是在某些平台会屏蔽外链或者限流带有外链的衬托下。
|
||||
|
||||
|
||||
|
||||
和open graph类似还有twitter自己的card，如果twitter card和open graph同时存在的话，会先显示在twitter card。如果twitter card没有定义，才会显示open graph。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 预览和检查工具
|
||||
|
||||
[OpenGraph - Preview Social Media Share and Generate Metatags - OpenGraph](https://www.opengraph.xyz/)
|
||||
|
||||
|
||||
|
||||
[OpenGraph - Preview Images and Generate Open Graph Meta Tags](https://opengraph.dev/)
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 一些例子
|
||||
|
||||
[Open Graph Examples](https://opengraphexamples.com/)
|
||||
|
||||
|
||||
93
src/content/post/前端/再次学习History.scrollRestoration.md
Normal file
93
src/content/post/前端/再次学习History.scrollRestoration.md
Normal file
@ -0,0 +1,93 @@
|
||||
---
|
||||
title: 再次学习History.scrollRestoration
|
||||
date: 2024-05-23T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- History API
|
||||
- scrollRestoration
|
||||
- Web Development
|
||||
- JavaScript
|
||||
- 浏览器
|
||||
finished: true
|
||||
published: true
|
||||
category: 前端
|
||||
slug: understanding-history-scrollrestoration
|
||||
description: >-
|
||||
本文重新探讨了浏览器History对象的scrollRestoration属性，该属性用于控制历史页面切换时滚动条是否恢复到之前的位置。scrollRestoration属性有两个可选值：auto和manual。当设置为auto时，滚动条会自动恢复到切换前的位置；若设置为manual，则滚动条保持在页面顶部。文章还讨论了该属性的局限性，包括可能导致的页面跳动和在不同浏览器中实现一致滚动恢复的困难。最后，文章建议在页面出现不美观跳跃或需要手动控制滚动条位置时，应将scrollRestoration设置为manual。
|
||||
NotionID-notionnext: b5838d05-d223-4a6d-b92c-e284c5e5a2ce
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/History-scrollRestoration-b5838d05d2234a6db92ce284c5e5a2ce
|
||||
rinId: 18
|
||||
---
|
||||
|
||||
# 再次学习History.scrollRestoration
|
||||
|
||||
|
||||
|
||||
之前在react.dev的源代码中了解到了这个HIstory的属性，当时写了一篇笔记来记录我对它的理解，现在看来还是一知半解。所以今天打算重新学习一下这个属性，主要从属性以及所属对象的介绍、使用方法，是否开启标准这几个方面来简单展开。
|
||||
|
||||
## 什么是scrollRestoration
|
||||
|
||||
scrollRestoration是一个属性，它所属的实例是浏览器的History。
|
||||
|
||||
这个属性是做什么的？它用来控制我们在切换历史页面的时候，滚动条的位置会不会恢复到之前的位置。
|
||||
|
||||
|
||||
|
||||
如图所示，我们切换历史页面，又切换回最之前的页面，发现滚动条的位置依然保持底部，也就是之前的位置。
|
||||
|
||||
什么是切换历史页面，从操作上来讲就是点击浏览器的回退（有的浏览器长按回退键会弹出历史的前面多个页面供选择）、前进按钮
|
||||
|
||||
从代码上来讲就是执行下面的这些操作：
|
||||
|
||||
```js
|
||||
history.back()
|
||||
history.forward()
|
||||
history.go(page) // page大于0，表示往后面翻对应的页数，反之则是往前翻对应的页数
|
||||
```
|
||||
|
||||
那么scrollRestoration这个属性与是否恢复滚动条的关系是什么？
|
||||
|
||||
scrollRestoration可选的值为auto和manual (如果浏览器支持这个属性，那么它默认是auto)
|
||||
|
||||
> scroll restoration mode, a scroll restoration mode, initially "auto". [HTML Standard](https://html.spec.whatwg.org/multipage/browsing-the-web.html#she-scroll-restoration-mode)
|
||||
|
||||
如果是auto：那么在切换历史页面的时候，滚动条会自动地恢复到切换之前的位置。
|
||||
|
||||
如果是manual：那么在切换页面的时候，滚动条会在顶部。
|
||||
|
||||
（上述的结果均在未手动修改state对应的滚动条位置的情况下）
|
||||
|
||||
## 属性的局限性
|
||||
|
||||
我之前觉得这个特性很好，但是为什么要单独地设置一个属性来控制是否要恢复到之前的滚动条位置呢？
|
||||
|
||||
在[History API - 滚动恢复 | Blog | Chrome for Developers](https://developer.chrome.com/blog/history-api-scroll-restoration)这篇文章中提到：
|
||||
|
||||
> This often means unsightly jumps as the scroll position changes automatically, and especially so if your app does transitions, or changes the contents of the page in any way. Ultimately this leads to an horrible user experience.
|
||||
> To make matters even worse there's very little you can do about it: Chrome triggers a `popState` event before the `scroll` event, which means you can read the current scroll position in `popState` and then reverse it in the `scroll` event handler with `window.scrollTo` (Ewww, but at least it works!). Firefox, however, triggers the `scroll` event *before* `popState`, so you have no idea what the old scroll value was in order to restore it. Bah!
|
||||
|
||||
翻译为中文：
|
||||
|
||||
> 这通常意味着当滚动位置自动改变时会出现难看的跳动，尤其是当你的应用程序进行过渡或以任何方式更改页面内容时。这最终会导致糟糕的用户体验。
|
||||
> 更糟的是，你几乎无能为力：Chrome 会在 scroll 事件之前触发 popState 事件，这意味着你可以在 popState 中读取当前的滚动位置，然后在 scroll 事件处理程序中使用 window.scrollTo 恢复滚动位置（呃，但至少它能工作！）。然而，Firefox 则是在 popState 事件之前触发 scroll 事件，所以你无法知道旧的滚动位置以便恢复它。唉！
|
||||
|
||||
总结一下就是，此文的作者认为这个属性会造成的两个缺点是：
|
||||
|
||||
1. 可能产生不太美观的跳跃：当滚动位置自动改变时，页面内容可能会突然跳动，尤其是在应用程序进行过渡或更改页面内容时，这会导致不好的用户体验。
|
||||
2. （在不开启这个属性的时候）非常难以人工地实现恢复滚动位置：由于不同浏览器在触发 popState 和 scroll 事件的顺序上存在差异（如 Chrome 和 Firefox），这使得在所有浏览器中一致地恢复滚动位置变得非常困难。
|
||||
|
||||
## 那么什么时候需要设置为manual？
|
||||
|
||||
参考上面的两个缺点来说，当满足以下的条件的时候，可以考虑设置为manual
|
||||
|
||||
1. 页面确实会产生了不太美观的跳跃
|
||||
2. 不在意历史的滚动条位置，同时更希望全部由手动控制滚动条位置的时候
|
||||
|
||||
## 参考的资料
|
||||
|
||||
[History: scrollRestoration property - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration)
|
||||
|
||||
[HTML Standard](https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-history-scroll-restoration)
|
||||
50
src/content/post/前端/在react中不要滥用 short-circuit &&.md
Normal file
50
src/content/post/前端/在react中不要滥用 short-circuit &&.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: 在react中不要滥用 &&
|
||||
date: 2024-10-16
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
- react
|
||||
- jsx
|
||||
- short-circuit
|
||||
- 前端
|
||||
finished: true
|
||||
published: true
|
||||
description: 在React中使用短路运算符（&&）时，0 会被错误地渲染为内容。通过避免使用 && 判断数字，特别是可能为 0 的值，可以确保正确的内容显示，例如显示 0号相机 而非仅仅显示 0。
|
||||
slug: do-not-misuse-short-circuiting-in-react
|
||||
category: 前端
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
代码如下：
|
||||
|
||||
``` jsx
|
||||
{camera_id && (
|
||||
<div>{camera_id}号相机</div>
|
||||
)}
|
||||
```
|
||||
|
||||
当camera_id>0的时候，正常显示x号相机
|
||||
|
||||
当camera_id=0的时候，**异常**显示0,而不是0号相机
|
||||
|
||||
## 错误原因
|
||||
|
||||
这是因为在 JavaScript 中，`0` 被视为 falsy 值，因此当 `camera_id` 为 `0` 时，条件判断 `camera_id &&` 会返回 `false`。所以后面的内容不被渲染。
|
||||
|
||||
但是0是可以被react渲染的，所以最后显示的是0，而不是不显示。
|
||||
|
||||
## 解决方法
|
||||
|
||||
涉及到数字且可能为0的时候，不要直接使用&&来判断，而是使用
|
||||
|
||||
``` jsx
|
||||
{camera_id !== undefined && (
|
||||
<div>{camera_id}号相机</div>
|
||||
)}
|
||||
```
|
||||
|
||||
## 参考
|
||||
|
||||
[reactjs - React showing 0 instead of nothing with short-circuit (&&) conditional component - Stack Overflow](https://stackoverflow.com/questions/53048037/react-showing-0-instead-of-nothing-with-short-circuit-conditional-component)
|
||||
91
src/content/post/前端/如何实现在markdown中渲染iframe.md
Normal file
91
src/content/post/前端/如何实现在markdown中渲染iframe.md
Normal file
@ -0,0 +1,91 @@
|
||||
---
|
||||
title: 如何实现在markdown中渲染iframe
|
||||
date: 2024-04-01T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-render-iframes-in-markdown
|
||||
description: >-
|
||||
本文介绍了如何在Markdown中渲染iframe的两种方法。第一种方法是通过直接在Markdown中嵌入iframe标签，需要使用`rehypeRaw`插件来实现HTML内容的嵌入。第二种方法是通过重写Markdown中的`a`标签，将其转换为iframe，这种方法可以根据链接内容进行定制化处理，例如将特定链接转换为iframe展示。文中还提供了相关的代码示例和项目源代码链接，以及一个演示地址供参考。
|
||||
NotionID-notionnext: a63f5e28-352a-48cc-8c89-f9dd5b5a18ac
|
||||
link-notionnext: 'https://kazoottt.notion.site/markdown-iframe-a63f5e28352a48cc8c89f9dd5b5a18ac'
|
||||
rinId: 19
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# 1 如何实现在markdown中渲染iframe
|
||||
|
||||
demo展示地址：[Create Next App](https://markdown-preview-eosin.vercel.app/demo)
|
||||
|
||||
项目源代码：[https://github.com/KazooTTT/markdown-iframe-preview/](https://github.com/KazooTTT/markdown-iframe-preview/)
|
||||
|
||||
[https://github.com/KazooTTT/markdown-iframe-preview/](https://github.com/KazooTTT/markdown-iframe-preview/)
|
||||
|
||||
使用的markdown渲染器是：[GitHub - remarkjs/react-markdown: Markdown component for React](https://github.com/remarkjs/react-markdown)
|
||||
|
||||
|
||||
|
||||
有两种方案，第一种是iframe以html的语法嵌入（1），第二种是重写a标签把它转化为iframe（3）。
|
||||
|
||||
## 1.1 Iframe直接嵌入markdown
|
||||
|
||||
```markdown
|
||||
### 1.1.1 Iframe
|
||||
|
||||
<iframe src="./" width="100%" height="500"></iframe>
|
||||
```
|
||||
|
||||
参考：
|
||||
|
||||
[iFrame Not Rendering · Issue #661 · remarkjs/react-markdown · GitHub](https://github.com/remarkjs/react-markdown/issues/661)
|
||||
|
||||
[GitHub - remarkjs/react-markdown: Markdown component for React](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#appendix-a-html-in-markdown)
|
||||
|
||||
也就是引入rehypeRaw这个rehypePlugin，实现在markdown中嵌入html。
|
||||
|
||||
（谨慎使用，需要保证html内容安全的情况下嵌入）
|
||||
|
||||
```tsx
|
||||
import Markdown from "react-markdown"
|
||||
import rehypeRaw from "rehype-raw"
|
||||
|
||||
const DempPage = () => {
|
||||
return <Markdown rehypePlugins={[rehypeRaw]}>{markdownContent}</Markdown>
|
||||
}
|
||||
```
|
||||
|
||||
## 1.2 a标签转化为iframe
|
||||
|
||||
在某些情况下我们需要把a标签的对应的网页直接展示出来，这个时候就要把a标签转化为iframe了。实现的方法是重写a这个组件。
|
||||
|
||||
下面是我的写法，我需要把链接中有`/agent/special`的所有的链接都以iframe的形式展示出来。于是做了一个特殊判断来实现这个逻辑。对于其他的不满足要求的a标签，则直接渲染为a标签即可。
|
||||
|
||||
这里还可以做一些拓展的写法，比如检查到网易云的音乐链接，就在前面加一个网易云的logo，如果检测到外链那么点击的时候打开新的窗口等等。
|
||||
|
||||
```ts
|
||||
import Markdown from "react-markdown";
|
||||
|
||||
const DemoPage = () => {
|
||||
<Markdown
|
||||
components={{
|
||||
a(props) {
|
||||
const { href, children } = props;
|
||||
if (href && href.indexOf("/agent/special") != -1) {
|
||||
return (
|
||||
<iframe src={href} width="100%" height="500" allowFullScreen />
|
||||
);
|
||||
}
|
||||
// 否则,渲染为普通的 <a> 链接
|
||||
return (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer">
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}}
|
||||
>
|
||||
{markdownContent}
|
||||
</Markdown>;
|
||||
};
|
||||
```
|
||||
33
src/content/post/前端/如何快速导出vercel project中的环境变量 图床版.md
Normal file
33
src/content/post/前端/如何快速导出vercel project中的环境变量 图床版.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: 如何快速导出vercel project中的环境变量
|
||||
date: 2024-02-23
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- vercel
|
||||
finished: true
|
||||
published: true
|
||||
slug: how-to-quickly-export-environment-variables-in-vercel-project
|
||||
description: >-
|
||||
本文介绍了如何在Vercel中集成插件或链接数据库后，快速导出环境变量的方法。首先，需要全局安装Vercel，然后通过命令链接Vercel账户，并拉取环境变量到本地的.env.local文件中。这一过程简化了环境变量的管理，提高了开发效率。
|
||||
rinId: 3
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# 如何快速导出vercel Project中的环境变量 图床版
|
||||
|
||||
我在vercel中集成了某些插件或者链接了数据库，要如何快速的导出这些环境变量呢？
|
||||
|
||||
具体方法如下：
|
||||
|
||||
``` shell
|
||||
npm i -g vercel
|
||||
|
||||
vercel link
|
||||
|
||||
vercel env pull .env.local
|
||||
```
|
||||
|
||||
1. 首先是安装vercel
|
||||
2. 然后登录vercel 
|
||||
3. 最后拉取环境变量到.env.local
|
||||
|
||||
48
src/content/post/前端/对于a标签的download属性.md
Normal file
48
src/content/post/前端/对于a标签的download属性.md
Normal file
@ -0,0 +1,48 @@
|
||||
---
|
||||
title: 对于a标签的download属性
|
||||
date: 2024-10-15
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- 前端
|
||||
- html
|
||||
finished: true
|
||||
published: true
|
||||
category: 前端
|
||||
slug: the-download-attribute-for-the-a-tag
|
||||
description:
|
||||
---
|
||||
|
||||
## 对于a标签的download属性
|
||||
|
||||
|
||||
|
||||
[\<a\>: The Anchor element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
|
||||
|
||||
---
|
||||
|
||||
如何定义没有值？
|
||||
|
||||
`<a download> ` 或者 `<a download="">`
|
||||
|
||||
---
|
||||
|
||||
在设置的需要注意类型转换：
|
||||
|
||||
``` js
|
||||
let temp1 = document.createElement('a');
|
||||
|
||||
temp1.download = null;
|
||||
|
||||
console.log(temp1.download); // 输出 undefined
|
||||
|
||||
```
|
||||
|
||||
但是如果先设置了download = '', 再设置 download = null, 就会被转化为'null'
|
||||
|
||||
|
||||
|
||||
所以要么直接设置 download = null，要么直接设置download = ''
|
||||
|
||||
不要设置了download = ''之后去设置download = null
|
||||
100
src/content/post/前端/浏览器滚动恢复属性History.scrollRestoration.md
Normal file
100
src/content/post/前端/浏览器滚动恢复属性History.scrollRestoration.md
Normal file
@ -0,0 +1,100 @@
|
||||
---
|
||||
title: html | 浏览器滚动恢复属性History.scrollRestoration
|
||||
date: 2022-11-27T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- history
|
||||
- html
|
||||
- scrollRestoration
|
||||
- 前端
|
||||
- 页面滚动
|
||||
slug: browser-scroll-restoration-property-historyscrollrestoration
|
||||
published: true
|
||||
description: >-
|
||||
在React新版官网的代码中，发现了一个名为History.scrollRestoration的属性，用于控制页面刷新或返回后是否恢复到原来的滚动位置。该属性有两个值：'auto'表示自动恢复到用户滚动到的位置，而'manual'则表示不恢复，用户需手动滚动到该位置。在React官网的实现中，针对Safari浏览器设置了'auto'，而其他浏览器则使用'manual'，以优化不同浏览器的用户体验。这一设置有助于避免在Safari浏览器中出现返回时的灰色屏幕问题，同时确保其他浏览器如Chrome和Firefox的用户体验。
|
||||
NotionID-notionnext: 7dc13064-8325-4aa3-bf45-5450c89e0223
|
||||
link-notionnext: >-
|
||||
https://kazoottt.notion.site/History-scrollRestoration-7dc1306483254aa3bf455450c89e0223
|
||||
rinId: 21
|
||||
finished: true
|
||||
category: 前端
|
||||
---
|
||||
|
||||
## 后续 2024-05-23
|
||||
|
||||
后来发现我被注释给欺骗了，虽然\_app.tsx里面说让nextjs设置scrollRestoration为manual，但是其实他们的项目中nextjs的scrollRestoration就是true。
|
||||
|
||||
与之前的注释不符...
|
||||
|
||||
```tsx
|
||||
useEffect(() => {
|
||||
// 取自StackOverflow。试图检测Safari桌面版和移动版。
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
if (isSafari) {
|
||||
// 这有点不真实。
|
||||
// 我们仍然依赖手动的Next.js滚动恢复逻辑。
|
||||
// 但是，我们*也*不希望在Safari的回退滑动手势期间出现灰屏。
|
||||
// 看起来启用自动恢复和Next.js逻辑同时使用似乎没有坏处。
|
||||
history.scrollRestoration = "auto"
|
||||
} else {
|
||||
// 对于其他浏览器，让Next.js将scrollRestoration设置为'manual'。
|
||||
// 这似乎对Chrome和Firefox更有效，因为它们没有动画回退滑动。
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
|
||||
|
||||
[Re-enable scroll restoration behind flag (#14046) · vercel/next.js@38bd1a0 · GitHub](https://github.com/vercel/next.js/commit/38bd1a024cb25923d8ea15f269a7294d073684d8)
|
||||
|
||||
# 浏览器滚动恢复属性History.scrollRestoration
|
||||
|
||||
[GitHub - reactjs/react.dev: The React documentation website](https://github.com/reactjs/react.dev)
|
||||
|
||||
最近在阅读 React 新版官网的代码时，发现在[\_app.tsx](https://github.com/reactjs/reactjs.org/blob/main/beta/src/pages/_app.tsx)中有这样一段代码。
|
||||
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
// Taken from StackOverflow. Trying to detect both Safari desktop and mobile.
|
||||
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
|
||||
if (isSafari) {
|
||||
// This is kind of a lie.
|
||||
// We still rely on the manual Next.js scrollRestoration logic.
|
||||
// However, we *also* don't want Safari grey screen during the back swipe gesture.
|
||||
// Seems like it doesn't hurt to enable auto restore *and* Next.js logic at the same time.
|
||||
history.scrollRestoration = "auto"
|
||||
} else {
|
||||
// For other browsers, let Next.js set scrollRestoration to 'manual'.
|
||||
// It seems to work better for Chrome and Firefox which don't animate the back swipe.
|
||||
}
|
||||
}, [])
|
||||
```
|
||||
|
||||
这里用到了我没有接触过的一个属性 History.scrollRestoration，发现这个属性是用来控制页面刷新或者返回后是否滚动到原来的位置。
|
||||
|
||||
[MDN 文档](https://developer.mozilla.org/zh-CN/docs/Web/API/History/scrollRestoration)
|
||||
|
||||
属性的值：
|
||||
|
||||
1. auto 将恢复用户已滚动到的页面上的位置。
|
||||
2. manual 未还原页上的位置。用户必须手动滚动到该位置。
|
||||
|
||||
在 mdn 文档中没有看到 auto 是默认值，但是自己手动验证以及在[google blog](https://developer.chrome.com/blog/history-api-scroll-restoration) 中提到：
|
||||
|
||||
> The good news is, however, that there's a potential fix: history.scrollRestoration. It takes two string values: auto, which keeps everything as it is today (and is its default value), and manual, which means that you as the developer will take ownership of any scroll changes that may be required when a user traverses the app's history.
|
||||
|
||||
所以 auto 确实是默认值没错。
|
||||
|
||||
## 举例
|
||||
|
||||
1. 如果 history.scrollRestoration = 'auto'; 自动回到原有位置。
|
||||
|
||||
|
||||
2. 如果 history.scrollRestoration = 'manual'; 回到顶部。
|
||||
|
||||
|
||||
## 在 react.dev (新版官网)中为什么要使用 manual
|
||||
|
||||
这是因为这个项目用的 next.js，涉及到 ssr，可能出现页面还没渲染完就滚动到了之前的位置。（待补充例子。）
|
||||
|
||||
可以看一下这篇文档[Next.js 中怎么保持页面的滚动位置](https://juejin.cn/post/7141235243326898213)
|
||||
27
src/content/post/前端/禁止antd modal按下esc关闭弹窗.md
Normal file
27
src/content/post/前端/禁止antd modal按下esc关闭弹窗.md
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
title: 禁止antd modal按下esc关闭弹窗
|
||||
date: 2024-10-15
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- antd
|
||||
- 前端
|
||||
finished: true
|
||||
published: true
|
||||
category: 前端
|
||||
slug: antd-modal-esc-disabled
|
||||
description:
|
||||
---
|
||||
|
||||
参考地址：[Modal: option not to close with cancel key · Issue #22137 · ant-design/ant-design · GitHub](https://github.com/ant-design/ant-design/issues/22137)
|
||||
|
||||
解决方法：
|
||||
|
||||
设置modal的keyboard属性为false
|
||||
|
||||
在antd的modal的文档中也有提到：[对话框 Modal - Ant Design](https://ant-design.antgroup.com/components/modal-cn#api)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| -------- | ------------- | ------- | ---- | --- |
|
||||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
||||
50
src/content/post/前端/网页页面在非输入的组件也出现闪烁的光标.md
Normal file
50
src/content/post/前端/网页页面在非输入的组件也出现闪烁的光标.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: 前端页面在非输入的组件也出现闪烁的光标
|
||||
date: 2024-10-15T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
- 前端
|
||||
- 浏览器
|
||||
finished: true
|
||||
published: true
|
||||
description: null
|
||||
slug: web-pages-also-have-a-flashing-cursor-on-non-input-components
|
||||
category: 前端
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
如图：
|
||||
|
||||
|
||||
|
||||
## 错误原因
|
||||
|
||||
开启了光标浏览
|
||||
|
||||
|
||||
|
||||
## 解决方法
|
||||
|
||||
方法一
|
||||
|
||||
按下F7取消光标浏览
|
||||
|
||||
方法二
|
||||
|
||||
如果你使用的是edge，打开浏览器设置，找到辅助功能-键盘-使用文本光标导航页面，取消启用该功能。
|
||||
|
||||
|
||||
|
||||
如果你使用的是google chrome,打开浏览器设置，找到无障碍-使用光标浏览器页面，取消启用该功能。
|
||||
|
||||
方法三 (不推荐)
|
||||
|
||||
``` css
|
||||
body {
|
||||
user-select: none;
|
||||
}
|
||||
```
|
||||
|
||||
这将导致所有的元素都不可以选择，会极大地降低使用体验
|
||||
49
src/content/post/前端/运行npm run tsc报错.md
Normal file
49
src/content/post/前端/运行npm run tsc报错.md
Normal file
@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 运行npm run tsc报错
|
||||
date: 2024-10-15T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- bug
|
||||
finished: true
|
||||
published: true
|
||||
description: null
|
||||
slug: npm-run-tsc
|
||||
category: 前端
|
||||
---
|
||||
|
||||
## 错误现象
|
||||
|
||||
``` bash
|
||||
> npm run lint:js && npm run prettier && npm run tsc
|
||||
|
||||
Checking formatting...
|
||||
All matched files use Prettier code style!
|
||||
npm error Missing script: "tsc"
|
||||
npm error
|
||||
npm error To see a list of scripts, run:
|
||||
npm error npm run
|
||||
npm error A complete log of this run can be found in: C:\Users\turbo\AppData\Local\npm-cache\_logs\2024-10-12T06_30_22_873Z-debug-0.log
|
||||
ELIFECYCLE Command failed with exit code 1.
|
||||
```
|
||||
|
||||
## 错误原因
|
||||
|
||||
虽然安装了tsc但是这里的写的是npm run tsc，也就是说package.json的script中的需要有tsc
|
||||
|
||||
## 解决方法
|
||||
|
||||
在package.json中添加：
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
"tsc": "tsc"
|
||||
},
|
||||
```
|
||||
|
||||
如果有其他的配置需求可以在后面添加，例如
|
||||
|
||||
```
|
||||
"scripts": {
|
||||
"tsc": "tsc --noEmit"
|
||||
},
|
||||
```
|
||||
58
src/content/post/前端/链接样式需要遵循LVHA顺序的原因.md
Normal file
58
src/content/post/前端/链接样式需要遵循LVHA顺序的原因.md
Normal file
@ -0,0 +1,58 @@
|
||||
---
|
||||
title: CSS | 链接样式需要遵循LVHA顺序的原因
|
||||
date: 2021-07-23
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- CSS
|
||||
- 学习笔记
|
||||
- 《深入解析CSS》
|
||||
- 前端
|
||||
slug: reasons-why-link-styles-need-to-follow-the-lvha-order
|
||||
published: true
|
||||
description: 在CSS中，链接的伪类选择器（:link, :visited, :hover, :active）遵循LVHA顺序的原因是为了确保样式正确应用。由于这些伪类的优先级相同，后定义的样式会覆盖先前的样式。因此，为了防止样式冲突，应按照LVHA顺序定义这些伪类，即先定义:link，然后是:visited，接着是:hover，最后是:active。这样的顺序确保了链接在不同状态下的样式能够正确显示，例如在鼠标悬停或点击时。
|
||||
NotionID-notionnext: https://kazoottt.notion.site/d4aa37afdc8147d89869d67ebb5b4e7c
|
||||
category: 前端
|
||||
---
|
||||
|
||||
# 链接样式需要遵循 LVHA 顺序的原因
|
||||
|
||||
《深入解析 CSS》中有这样一句话
|
||||
|
||||
> 伪类选择器（如：hover）和属性选择器（如[type="input"]）与一个类选择器的优先级相同。通用选择器（＊）和组合器（>、+、~）对优先级没有影响。
|
||||
|
||||
也就是说对于以下四个伪类，没有优先级之分。
|
||||
|
||||
如果某一个链接同时处于两个或者以上的状态，并且状态对应的样式产生了冲突，后出现的样式就会覆盖掉前面的样式。
|
||||
|
||||
```css
|
||||
a:link {
|
||||
color: blue;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
**那么为什么需要遵循 LVHA（link visited\hover active）顺序呢**？分析如下：
|
||||
|
||||
:link 这两个伪类是固定的状态（:link 是最原始的状态，:visited 是被点击过后就产生，这两个状态产生之后是一直存在的）
|
||||
|
||||
:hover :active 不是固定的，需要鼠标去触发，并且触发完毕之后会消失。
|
||||
|
||||
所以:link 作为最原始的状态，它的样式应该放在最前面，:visited 紧随其后。
|
||||
|
||||
而对于:hover 以及:active，设想一下如果:active 在:hover 之前，鼠标放到链接上去的时候，直接显示:hover 的颜色。点击链接的时候，由于:hover 在:active 下面，会覆盖 active 的颜色,这并不符合我们的需求，所以:active 应该在:hover 之后。
|
||||
|
||||
综上，由于伪类的优先级一致，后出现的样式会覆盖前面的样式，所以链接的样式应该遵循 LVHA 顺序
|
||||
|
||||
(方便记忆：love hate—> link visited hover active)
|
||||
51
src/content/post/后端/python常用的命令备忘.md
Normal file
51
src/content/post/后端/python常用的命令备忘.md
Normal file
@ -0,0 +1,51 @@
|
||||
---
|
||||
title: python常用的命令备忘
|
||||
date: 2024-03-27T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: false
|
||||
published: true
|
||||
slug: commonly-used-command-memos-in-python
|
||||
description: >-
|
||||
本文介绍了如何在当前环境下导出最小依赖以及配置Python包管理工具pip的镜像源。首先，通过安装`pipreqs`工具并使用命令`pipreqs ./
|
||||
--encoding=utf8`在项目根目录导出依赖。其次，讲解了如何在Windows系统中通过修改`pip.ini`文件或使用命令行配置pip的镜像源，包括设置镜像源地址、取消配置以及查看当前配置的方法。
|
||||
category: 后端
|
||||
---
|
||||
|
||||
# Python常用的命令备忘
|
||||
|
||||
## 导出当前环境下的最小依赖
|
||||
|
||||
首先安装包
|
||||
|
||||
```shell
|
||||
pip install pipreqs
|
||||
```
|
||||
|
||||
然后在环境根目录导出
|
||||
|
||||
```shell
|
||||
pipreqs ./ --encoding=utf8
|
||||
```
|
||||
|
||||
## 镜像源配置
|
||||
|
||||
在windows中，搜索pip.ini，去修改
|
||||
|
||||
或者使用命令行来配置
|
||||
|
||||
```
|
||||
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
|
||||
```
|
||||
|
||||
取消配置
|
||||
|
||||
```
|
||||
pip config unset global.index-url
|
||||
```
|
||||
|
||||
读取当前的配置：
|
||||
|
||||
```
|
||||
pip config get global.index-url
|
||||
```
|
||||
109
src/content/post/后端/管理python环境的方式.md
Normal file
109
src/content/post/后端/管理python环境的方式.md
Normal file
@ -0,0 +1,109 @@
|
||||
---
|
||||
title: 管理python环境的方式
|
||||
date: 2023-12-05
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- python
|
||||
- 环境管理
|
||||
- pyenv
|
||||
- poetry
|
||||
- conda
|
||||
published: true
|
||||
slug: managing-the-python-environment
|
||||
description: >-
|
||||
本文总结了管理Python环境的几种主流方式，包括venv、virtualenv、conda、pipenv和poetry等。虚拟环境能够为不同的项目提供独立的Python版本和依赖库，避免了全局解释器带来的切换和维护问题。文章还介绍了作者个人常用的环境管理工具：pyenv用于Python版本管理，poetry和virtualenv用于依赖管理。此外，还简要说明了conda的使用注意事项，建议避免与pip混用，并了解import优先级。
|
||||
category: 后端
|
||||
---
|
||||
|
||||
# 管理python环境的方式
|
||||
|
||||
最近又有写 python 的需求了，上一次写还是几年前写圣纳百川爬虫的时候，因此很多事情记不太清楚了。
|
||||
|
||||
本文主要来疏离总结一下管理 python 环境的方式，以及它们的适用场景。
|
||||
|
||||
---
|
||||
|
||||
## 主流的方案
|
||||
|
||||
对于不同的项目，它们会用到不同的 python 版本，以及不同的依赖库和版本。如果只使用全局解释器，那么切换和维护起来会非常的麻烦且容易出错。面对这样的场景，虚拟环境是更优的选择。
|
||||
|
||||
在官方文档中提到：[venv --- 创建虚拟环境 — Python 3.12.0 文档](https://docs.python.org/zh-cn/3/library/venv.html)
|
||||
|
||||
> `venv` 模块支持创建轻量的“虚拟环境”，每个虚拟环境将拥有它们自己独立的安装在其 [`site`](https://docs.python.org/zh-cn/3/library/site.html#module-site "site: Module responsible for site-specific configuration.") 目录中的 Python 软件包集合。虚拟环境是在现有的 Python 安装版基础之上创建的，这被称为虚拟环境的“基础”Python，并且还可选择与基础环境中的软件包隔离开来，这样只有在虚拟环境中显式安装的软件包才是可用的。
|
||||
|
||||
那么虚拟环境的管理具体有哪些呢？
|
||||
|
||||
|
||||
我们从 pycharm 提供的解释器选项中能看出一二，pycharm 这里提供的都是比较主流的虚拟环境管理了。
|
||||
|
||||
1. venv（官方内置的模块）
|
||||
2. virtualenv
|
||||
3. conda
|
||||
4. pipenv
|
||||
5. poetry
|
||||
|
||||
这里不想分别对这些管理工作都做详细的介绍，只记录我自己最常用的组合。
|
||||
|
||||
我的需求有两类，第一类管理 python 的版本，第二类管理依赖的版本。
|
||||
|
||||
## 对于 Python 版本管理
|
||||
|
||||
使用 pyenv
|
||||
[GitHub - pyenv/pyenv: Simple Python version management](https://github.com/pyenv/pyenv)
|
||||
用来安装和切换 python 的版本
|
||||
|
||||
## 对于依赖管理
|
||||
|
||||
如果是我自己的项目，那么我会使用 poetry（因为操作比较像 npm，我更加熟悉）
|
||||
|
||||
如果是别人的项目且项目中不是使用 poetry 来管理的，那么我会使用 virtualenv 来管理。
|
||||
|
||||
### Poetry
|
||||
|
||||
[Basic usage | Documentation | Poetry - Python dependency management and packaging made easy](https://python-poetry.org/docs/basic-usage/)
|
||||
|
||||
如果是一个新的项目
|
||||
|
||||
```bash
|
||||
poetry new poetry-demo
|
||||
```
|
||||
|
||||
如果是一个已经存在的项目
|
||||
|
||||
```bash
|
||||
poetry init
|
||||
```
|
||||
|
||||
然后使用`poetry add 包名`安装依赖
|
||||
也可以指定版本，[Dependency specification | Documentation | Poetry - Python dependency management and packaging made easy](https://python-poetry.org/docs/dependency-specification/)
|
||||
|
||||
如果要导出 requirements 方便别人安装可以运行
|
||||
`poetry export -o requirements.txt`
|
||||
|
||||
### Virtualenv
|
||||
|
||||
[virtualenv](https://virtualenv.pypa.io/en/latest/)
|
||||
|
||||
创建虚拟环境
|
||||
``virtualenv env_name
|
||||
|
||||
激活
|
||||
如果是 linux
|
||||
`source env_name/bin/activate`
|
||||
如果是 windows
|
||||
`.\env_name\Scripts\activate`
|
||||
|
||||
当然如果你用的 IDE，它会帮你创建和关联
|
||||
|
||||
然后后面就是正常的 pip install xxx 之类的操作了。
|
||||
|
||||
### Conda
|
||||
|
||||
[请问大神们，pip install 和 conda install 有什么区别吗？ - 知乎](https://www.zhihu.com/question/395145313/answer/2449421755)
|
||||
conda 用来作为虚拟环境管理的话，不建议 pip 和 conda 混用，需要了解一下 import 优先级。
|
||||
|
||||
如果都安装了某一个包，那么优先 import 的是 conda 安装的
|
||||
|
||||
如果之前用 pip 装的，运行`conda convert`转一下。
|
||||
|
||||
然后后面都用 conda 来安装，conda 找不到的包再用 pip 来装。
|
||||
47
src/content/post/生活/一些烦心事.md
Normal file
47
src/content/post/生活/一些烦心事.md
Normal file
@ -0,0 +1,47 @@
|
||||
---
|
||||
title: 一些烦心事
|
||||
date: 2023-01-19T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: somethings-bothering-me
|
||||
description: >-
|
||||
在飞机上，作者通过写作来缓解心中的烦闷。上周状态良好，但本周因熬夜和粉丝圈的负面影响感到状态下滑。作者计划在春节期间调整作息，并反思了过去几年对粉丝圈的感受变化，包括从极度社恐到逐渐适应公共表达的过程，以及对粉丝圈中个体信任的思考。同时，作者也回顾了与主播和粉丝圈的互动，以及个人情感和观点表达的冲突与反思。
|
||||
rinId: 110
|
||||
category: 生活
|
||||
---
|
||||
|
||||
# 一些烦心事
|
||||
|
||||
在飞机上，闲着也是闲着，不妨写点碎碎念，缓解一下心中的阴郁。
|
||||
|
||||
上周也就是 1.9-1.23 这个时间段，我的状态挺好的，无论是工作、学习还是对其他感兴趣事物的产出，那种在对应的时间场所做对应的事情，然后同时又有的积极反馈，真的很棒。
|
||||
|
||||
但是这周突然状态又变差了，想了想主要原因，第一是周末熬夜打乱了作息导致周一失眠，后续也没能调整好状态；第二是，受到了喜欢事物所在圈子某些事件、氛围的影响，进一步使心情变得更差。
|
||||
|
||||
对于第一点，我决定春节放假期间，调整作息，可以赖床，但绝不能晚睡。
|
||||
|
||||
对于第二点，也就是粉丝氛围，其实一直都在困扰着我，去年前大半年，尤为严重，后小半年稍微好一点，但没想到最近又被影响到了心情。
|
||||
|
||||
从什么地方开始聊呢？先聊聊这几年的感受变化吧。
|
||||
|
||||
一个人对某一事物感受的变化，受到多方面影响，无论是自己、事物本身还是大环境等等，多会有一定占比。
|
||||
|
||||
小时候的我，可以说极度社恐，第一次坐飞机的时候，空姐问我要喝什么饮料，我都不敢说话，只能用手指指一下我想要的东西。17 年，到了大学，觉得不能一直畏畏缩缩，决定换个状态重新开始，于是逼自己加了辩论队，从那个时候开始慢慢地变得和普通人一样，虽然性格依然很闷，但终于可以在公共场合表达观点了。
|
||||
|
||||
自身心态发生改变的时间点，18 年-20 年，也刚好是我混我葱圈子最深入的时候，和大家共同经历了某些事，在非主要舆论场一起直面了很多恶意，也在某些事情上明白了现在喜欢不代表会一直喜欢，为了现圈利益撕破脸皮背刺前圈的事情还挺常见，可以信任粉丝整体，但不能信任某个个体。
|
||||
|
||||
当然也有很多暖心的事情，一起庆祝生日、一起为某个线下准备惊喜。当有投票或出专辑，有时会帮一点点忙（那时候大学，时间真的多哇），当时教过四十多岁的玉米怎么购买专辑，之后偶然刷到她的微博，除了分享花花草草，就是转发微博关心我葱身体了，无论是当时还是现在回想起都很感动，这样的事情太多太多。
|
||||
|
||||
而同一时期，也刚好遇到了主播以及她的直播。当时看直播的时候，不太敢发弹幕和回帖，回复被念到的时候会下意识地关掉直播间，过几分钟再打开。并且我算是误打误撞入坑的类型，不了解 ACG，不看音乐区，兴趣点和主播的产出内容毫无重合，但还是在随机到主播的歌的时候产生了兴趣。所以当时的我，属于非常懵懂的旁观者、圈外人，看着大家互动，想着说原来这个圈子的大家是这样表达喜欢的，好不一样。
|
||||
|
||||
这样的状态一直持续到 19 年年初，遇到了一件让我个人不太舒服的事情。那时的我已不是内心极度社恐和卑微的状态了，打字也喜欢带着辩论的一些架子，当时气在头上，在评论区选择了比较直白的提醒，后来有人评论反驳我，我也直接回怼了过去，在那之后选择了渐渐不看直播，投稿刷到了才看。
|
||||
|
||||
19 年成都 bw 短暂的回坑了一下，但重新高强度看直播应该是说唱新世代时期，突然刷到了主播的 vlog，这个节目我葱也在，这种交集让我觉得有些奇妙。根据录制时间拉了点录播，后面又刷了某些切片上下文看，心里又慢慢释然了。
|
||||
|
||||
这让我开始思考当初的做法有没有问题？从道理上讲，主播和观众看法、表达方式不一样太正常不过，无论哪一方，都不应该把自己的观点强加对方，应该做的是求同存异。从情感上讲，某些看法触及到自己所在意的点时，生气也很正常，如果别的地方有人嘴主播我也会表示不满，所以当时评论区也有反驳我也很正常。
|
||||
|
||||
但正确的做法到底是什么我真的不清楚，做法随着自身情感倾斜程度变化吗？
|
||||
|
||||
好像有点扯太远了，本来是想聊粉丝氛围的。
|
||||
33
src/content/post/软件/Telegram bot推荐 VidDlPBot.md
Normal file
33
src/content/post/软件/Telegram bot推荐 VidDlPBot.md
Normal file
@ -0,0 +1,33 @@
|
||||
---
|
||||
title: Telegram bot推荐 VidDlPBot
|
||||
date: 2024-06-26T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Telegram
|
||||
- 视频下载
|
||||
- VidDlPBot
|
||||
- Twitter
|
||||
- TikTok
|
||||
- YouTube
|
||||
- Instagram
|
||||
finished: true
|
||||
published: true
|
||||
slug: telegram-bot-recommendation-viddlpbot
|
||||
description: 推荐一款Telegram bot——VidDlPBot，可以轻松下载Twitter、TikTok、YouTube、Instagram的视频，操作简便。
|
||||
rinId: 60
|
||||
category: 软件
|
||||
---
|
||||
|
||||
# Telegram Bot推荐 VidDlPBot
|
||||
|
||||
|
||||
|
||||
目前已支持Twitter、TikTok、YouTube、Instagram
|
||||
|
||||
添加bot之后，直接输入要下载的链接给bot，它就会返回下载好的视频给你了。超级方便。gemoo
|
||||
|
||||
教学视频：
|
||||
|
||||
[如何快速下载视频(手机端同理)\[telegram bot推荐#1\]\_哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV1dGgkecEr7/)
|
||||
25
src/content/post/软件/shot.so - 图片美化工具.md
Normal file
25
src/content/post/软件/shot.so - 图片美化工具.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
title: shot.so
|
||||
date: 2023-09-17T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- 软件推荐
|
||||
- 图片处理
|
||||
- 设计
|
||||
- 图片美化工具
|
||||
finished: true
|
||||
published: true
|
||||
slug: shotso-image-beautification-tool
|
||||
description: >-
|
||||
shot.so是一个图片美化工具，主要用于快速美化截图。它支持设备模拟，允许用户修改阴影、边框、比例等属性。该工具内置了大量免费模板，方便用户快速创建精美的图片效果。
|
||||
rinId: 62
|
||||
category: 软件
|
||||
---
|
||||
|
||||
# shot.so - 图片美化工具
|
||||
|
||||
<https://shots.so/>
|
||||
|
||||
可快速美化图片（主要是截图），支持设备 mock，支持修改 shadow,border,scale 等。内置模板很多，且均免费。
|
||||
|
||||
|
||||
41
src/content/post/软件/tweet to image 输入推特链接生成对应的图片.md
Normal file
41
src/content/post/软件/tweet to image 输入推特链接生成对应的图片.md
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
title: tweet to image
|
||||
date: 2024-06-26
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Tweet to Image
|
||||
- Twitter Tools
|
||||
- Social Media
|
||||
- Online Tools
|
||||
- Image Conversion
|
||||
- Shareable Content
|
||||
- Digital Marketing
|
||||
finished: true
|
||||
published: true
|
||||
slug: tweet-to-image
|
||||
description: This post introduces three online tools that allow users to convert tweets into shareable images. The tools featured are TweetPik, PostWizz, and 10015 Tools. These services provide an easy way to create visually appealing screenshots of tweets for sharing on various platforms.
|
||||
NotionID-notionnext: 1203f3c5-7438-44af-a655-d509a4dff4ec
|
||||
link-notionnext: https://kazoottt.notion.site/tweet-to-image-1203f3c5743844afa655d509a4dff4ec
|
||||
rinId: 50
|
||||
category: 软件
|
||||
---
|
||||
|
||||
# Tweet to Image 输入推特链接生成对应的图片
|
||||
|
||||
[Perfect Twitter Screenshots - TweetPik](https://tweethunter.io/tweetpik)
|
||||
|
||||
|
||||
|
||||
[Free Tweet to Image Converter Online - PostWizz](https://postwizz.com/tweet-to-image-converter/)
|
||||
|
||||
|
||||
|
||||
[Tweet to Image Converter: Tweet Screenshots Online | 10015 Tools](https://10015.io/tools/tweet-to-image-converter)
|
||||
|
||||
|
||||
|
||||
ref：
|
||||
|
||||
[The Top 6 Free Tools to Convert Tweets Into Shareable Images](https://www.makeuseof.com/free-tools-convert-tweets-into-images/)
|
||||
29
src/content/post/软件/vscode md自动预览.md
Normal file
29
src/content/post/软件/vscode md自动预览.md
Normal file
@ -0,0 +1,29 @@
|
||||
---
|
||||
title: vscode md自动预览
|
||||
date: 2024-10-15T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- vscode
|
||||
- markdown
|
||||
finished: true
|
||||
published: true
|
||||
category: 软件
|
||||
slug: vscode-md
|
||||
description: null
|
||||
---
|
||||
|
||||
# vscode md自动预览
|
||||
|
||||
下载vscode插件 [markdown all in one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
|
||||
|
||||
|
||||
|
||||
然后设置中搜索：`Auto Show Preview To Side`
|
||||
|
||||
设置为`true`
|
||||
|
||||
|
||||
|
||||
备注：不是很好用，不推荐这种使用方式
|
||||
@ -0,0 +1,60 @@
|
||||
---
|
||||
title: “git-credential-osxkeychain”想要访问你的钥匙串中的密钥“github.com” 解决方法
|
||||
date: 2024-09-01
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags:
|
||||
- Git
|
||||
- macOS
|
||||
- 解决方案
|
||||
finished: true
|
||||
published: true
|
||||
category: 软件
|
||||
slug: git-credential-osxkeychain-solve-method
|
||||
description: 解决 macOS 弹出 'git-credential-osxkeychain' 访问 GitHub 密钥的问题
|
||||
NotionID-notionnext: 462377ea-6b4a-472c-9f55-ca4965dfe5c4
|
||||
link-notionnext: https://kazoottt.notion.site/git-credential-osxkeychain-github-com-462377ea6b4a472c9f55ca4965dfe5c4
|
||||
---
|
||||
|
||||
# macos 一直弹出 “git-credential-osxkeychain”想要访问你的钥匙串中的密钥“github.com” 解决方法
|
||||
|
||||
现在网络上关于这个问题的解决方案大部分都是打开钥匙串访问，然后删除github的密钥，但是这个方法其实并不奏效。具体的解决方法如下（二选一即可）
|
||||
|
||||
## 方法一 使用GitHub CLI
|
||||
|
||||
首先，使用brew安装GitHub CLI：
|
||||
|
||||
```bash
|
||||
brew install gh
|
||||
```
|
||||
|
||||
然后，使用以下命令来登录：
|
||||
|
||||
```bash
|
||||
gh auth login
|
||||
```
|
||||
|
||||
## 方法二 使用Git Credential Manager
|
||||
|
||||
如果没有git，使用brew安装git：
|
||||
|
||||
```bash
|
||||
brew install git
|
||||
```
|
||||
|
||||
然后，安装git-credential-manager
|
||||
|
||||
```bash
|
||||
brew install --cask git-credential-manager
|
||||
```
|
||||
|
||||
最后，使用以下命令来登录：
|
||||
|
||||
```bash
|
||||
git credential-osxkeychain
|
||||
```
|
||||
|
||||
## 参考地址
|
||||
|
||||
[在 Git 中缓存 GitHub 凭据 - GitHub 文档](https://docs.github.com/zh/get-started/getting-started-with-git/caching-your-github-credentials-in-git)
|
||||
23
src/content/post/软件/快速获取telegram chatId然后实现消息通知的方法.md
Normal file
23
src/content/post/软件/快速获取telegram chatId然后实现消息通知的方法.md
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
title: 快速获取telegram chatId然后实现消息通知的方法
|
||||
date: 2023-09-14T00:00:00.000Z
|
||||
author: KazooTTT
|
||||
tags:
|
||||
- telegram
|
||||
- bot
|
||||
- 工具
|
||||
finished: true
|
||||
published: true
|
||||
slug: quick-way-to-get-telegram-chatid-and-then-implement-message-notification
|
||||
description: >-
|
||||
本文介绍了如何快速获取Telegram的chatId并实现消息通知的方法。首先，设置Telegram账户的username，然后向@RawDataBot发送消息以获取chatId。最后，结合Telegram
|
||||
bot和apprise工具来实现消息通知功能。
|
||||
rinId: 20
|
||||
category: 软件
|
||||
---
|
||||
|
||||
# 快速获取telegram chatId然后实现消息通知的方法
|
||||
|
||||
1. 给 telegram 账户设置 username
|
||||
2. 搜索[@RawDataBot](https://www.alphr.com/find-chat-id-telegram/)，给它发送一条消息。它会返回账户相关的信息给你。格式如下：，chat.id 就是所需要的 chatId
|
||||
3. 然后就能结合[telegram bot](https://api.telegram.org/)+ [apprise](https://github.com/caronc/apprise/wiki/Notify_telegram)做消息通知了。
|
||||
50
src/content/post/软件/沉浸式翻译自定义OPENAI接口油猴脚本报错.md
Normal file
50
src/content/post/软件/沉浸式翻译自定义OPENAI接口油猴脚本报错.md
Normal file
@ -0,0 +1,50 @@
|
||||
---
|
||||
title: 沉浸式翻译自定义OPENAI接口油猴脚本报错
|
||||
date: 2024-05-21
|
||||
author: KazooTTT
|
||||
type: Post
|
||||
status: Published
|
||||
tags: []
|
||||
finished: true
|
||||
published: true
|
||||
slug: >-
|
||||
immersion-translation-error-message-for-custom-openai-interface-tampermonkey-script
|
||||
description: >-
|
||||
用户在使用oneapi部署服务并接入deepseek翻译模型时遇到错误，错误信息显示域名未被列入@connect列表。通过查询，了解到@connect是油猴脚本的一个标签，用于允许脚本跨域请求特定配置的域名。解决方法包括手动添加域名到@connect列表、使用通配符*简化配置、在油猴脚本设置中添加域名到用户域白名单，或使用浏览器插件直接配置匹配所有URL的模式。
|
||||
NotionID-notionnext: 26f6fc5b-4286-45e2-8e83-e178f45c1ae0
|
||||
link-notionnext: 'https://kazoottt.notion.site/OPENAI-26f6fc5b428645e28e83e178f45c1ae0'
|
||||
rinId: 56
|
||||
category: 软件
|
||||
---
|
||||
|
||||
# 沉浸式翻译自定义OPENAI接口油猴脚本报错
|
||||
|
||||
|
||||
|
||||
我使用oneapi部署了我自己的服务，接入了deepseek作为翻译的模型。
|
||||
|
||||
但是在配置好之后开启翻译报错：
|
||||
|
||||
> [!error]
|
||||
> This domain is not a part of the @connect list
|
||||
|
||||
截图如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
查询了一下：
|
||||
|
||||
`@conncet` 是油猴脚本一个tag，作用是允许油猴脚本跨域请求对应的配置的域名
|
||||
|
||||
[tampermonkey文档](https://www.tampermonkey.net/documentation.php#meta:connect)
|
||||
|
||||
所以油猴脚本报错的解决方法是：
|
||||
|
||||
1. 手动地把对应的域名加上去
|
||||
|
||||
2. 直接添加`// @connect *`，这样后续也不会需要新增其他的配置了。
|
||||
3. 同理在油猴脚本的设置页面的用户域白名单新增对应的域名或者直接添加\* 
|
||||
4. 最后一种简单直接的解决方法是直接使用浏览器插件，我个人的猜测是他们配置了[Match patterns](https://developer.chrome.com/docs/extensions/develop/concepts/match-patterns)为<all_urls>
|
||||
|
||||
Reference in New Issue
Block a user