l1n6yun's Blog

记录学习的技能和遇到的问题

自动获取: Chrome登录 阿里云盘 后,控制台粘贴

1
JSON.parse(localStorage.token).refresh_token

upload successful

在日常使用浏览器的过程中,书签功能是许多用户不可或缺的工具之一。它可以帮助我们快速访问常用的网站,节省时间并提高上网效率。然而,有些用户可能希望单击书签时能够直接在新标签页中打开,而不是在当前标签页中替换内容。今天,我们就来分享一下如何在火狐浏览器中设置书签单击后在新标签页打开的方法。

火狐浏览器的书签功能简介

火狐浏览器(Mozilla Firefox)是一款广受欢迎的开源浏览器,以其强大的功能、灵活的自定义选项和出色的隐私保护而受到用户的喜爱。书签功能是火狐浏览器的一个重要特性,用户可以通过它将喜欢的网站添加到收藏夹中,方便随时访问。默认情况下,单击书签会在当前标签页中打开链接,但有时我们可能需要在新标签页中打开书签,以便同时查看多个网页。

设置书签单击后在新标签页打开的步骤

打开火狐浏览器的高级首选项窗口

首先,启动火狐浏览器,在浏览器顶部的地址栏中输入 about:config,然后按下回车键。这个地址会带你进入火狐浏览器的高级配置页面,这里包含了大量可以自定义的选项。

upload successful

接受风险并继续

当页面切换后,你会看到一个提示文字,警告你更改配置可能会导致浏览器不稳定或出现其他问题。不用担心,这只是浏览器的常规提示。点击“接受风险并继续”按钮,进入高级首选项窗口。

搜索并修改相关设置

在高级首选项窗口的搜索框中输入 browser.tabs.loadBookmarksinTabs,然后按下回车键。搜索结果中会出现一个名为 browser.tabs.loadBookmarksinTabs 的选项,它的默认值通常是 false。

upload successful

修改选项值

找到这个选项后,点击其右侧的双向箭头,将其值切换为 true。这样,当你再次单击书签时,链接就会在新标签页中打开。

在当今快节奏的开发环境中,拥有一个功能强大且易于使用的工具箱对于提升工作效率至关重要。今天,我们将介绍一个轻量级、开源的前端工具箱——it-tools。这个工具箱专为开发者设计,旨在简化日常开发任务,无论是普通用户还是资深开发者都能从中受益。

upload successful

为什么选择 it-tools?

it-tools 以其简洁高效、一站式解决方案、跨平台支持和开源特性脱颖而出:

  • 简洁高效:提供众多常用小工具,降低学习和使用成本。
  • 一站式解决方案:一个界面解决多种需求,简化工作流程。
  • 跨平台支持:通过 web 端访问,支持多种操作系统和浏览器环境。
  • 开源且持续更新:社区活跃,功能不断扩展和优化。

部署方式

it-tools 作为一个基于 Web 的前端工具箱,提供了多种部署方式:

在线使用

最简单的部署方式是直接在线使用,无需本地部署。访问 https://it-tools.tech/ 即可立即开始使用所有功能,所有操作都在浏览器中完成。如果访问的语言不正确,可以在右上角切换。

Docker 部署

使用 docker 命令

1
2
3
4
docker run -d --name it-tools \
--restart unless-stopped \
-p 8080:80 \
corentinth/it-tools:latest

使用 docker-compose

1
2
3
4
5
6
7
8
9
version: '3.3'
services:
it-tools:
image: corentinth/it-tools:latest
restart: always
environment:
TZ: Asia/Shanghai
ports:
- 8080:80

本地编译部署

如果你想将 it-tools 部署到线上服务器供团队使用,可以按照以下步骤进行:

  1. 构建项目

首先生成项目的静态文件:

1
2
3
4
5
6
7
git clone https://github.com/CorentinTh/it-tools.git
cd it-tools
pnpm install
# 运行开发环境
pnpm dev
# 编译上线环境
pnpm build

如果你想开发自己的工具,还可以运行:

1
pnpm run script:create:tool my-tool-name
  1. 部署到服务器

将生成的 dist 文件夹中的静态文件上传到你的 Web 服务器(如 Nginx、Apache 等)。

  1. 配置服务器

在你的服务器配置文件中,将根目录指向 /opt/dist 文件夹。以 Nginx 为例:

1
2
3
4
5
6
7
8
9
server {
listen 80;
server_name 你的域名;

location / {
root /opt/dist;
index index.html;
}
}

保存配置并重启服务器,即可通过域名访问。

工具详细介绍

it-tools 涵盖了多个实用的前端工具,主要包括以下类别:

  1. Crypto 加密工具类:Token生成、Hash函数、UUID生成和文本加解密等功能。
  2. Converter 转换工具类:日期时间、数据格式(JSON、XML等)和颜色代码转换等工具。
  3. Web 工具类:URL编码/解码、HTML实体转义、HTTP状态码查询等Web开发相关工具。
  4. Images and videos 图片视频工具类:二维码生成、SVG占位符生成等功能。
  5. Development 开发工具类:代码格式化、端口生成等工具,帮助开发者简化日常任务。
  6. Network 网络工具类:IPv4子网计算器、MAC地址生成器等网络相关工具。
  7. Math 数学工具类:数学表达式计算、百分比计算等常用数学工具。
  8. Measurement 测量工具类:温度转换等测量单位转换工具。
  9. Text 文本工具类:文本统计、字符串混淆器等文本处理工具。
  10. Data 数据工具类:JSON转CSV、数据格式验证等数据处理工具。

总结

it-tools 已经提供了广泛的工具集合,帮助开发者在加密、格式转换、网络、开发辅助等领域提高工作效率。通过进一步扩展和细化每个工具的功能,可以增强其适用性和灵活性,满足更多复杂开发场景下的需求。这些扩展内容有助于让 it-tools 成为前端开发中更强大且实用的工具箱。

关于

随着时间的推移,个人站点的博客文章会越来越多,那怎么样才能快速找到你印象中的文章呢?增加一个站点内的搜索功能是非常有必要和方便的。
具体操作

  1. 安装搜索:在Hexo的根目录下,打开命令可执行窗口,执行如下命令:
1
npm install hexo-generator-searchdb --save
  1. 全局配置文件_config.yml,新增如下内容:
1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000
  1. hexo主题配置文件(\themes\next_config.yml),修改local_search的enable为true:
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

使用方法

  1. 打开破解工具
  2. 选择 Navicat 安装目录,勾选 HOSTS 和 RSA key,点击 Patch
  3. 打开 Navicat Premium 输入许可证,点击 激活 按钮

upload successful

  1. 等待弹出服务器不可用窗口,点击 手动激活 按钮

upload successful

  1. 请求码 复制到激活工具中的 Request Code 输入框中

  2. 点击 Generate Activation Code! 按钮,生成激活码

  3. 生成好的 激活码 复制到 Navicat Premium 中,点击激活按钮

upload successful

upload successful

  1. 预览一下破解结果

upload successful

下载地址

阿里云盘

下载视频,并将m3u8格式转为mp4格式

1
2
3
ffmpeg -i https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 playlist.mp4
或者
ffmpeg -i https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 -c copy playlist.mp4

下载中。。。由于视频很大,下载需要很长长长时间(1个G的视频可能需下载几小时…)。
可以通过如下指令进行下载提速(下载速度大约能提升到几到十几分钟,很棒了哦,起码比百度云快):

1
ffmpeg -i https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8 -c copy -bsf:a aac_adtstoasc playlist_1.mp4

1
ffmpeg -f concat -i filelist.txt -c copy -y FBF73ED7.mp4

filelist.txt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
file 'FBF73ED7.p701.1.mp4'
file 'FBF73ED7.p701.2.mp4'
file 'FBF73ED7.p701.3.mp4'
file 'FBF73ED7.p701.4.mp4'
file 'FBF73ED7.p701.5.mp4'
file 'FBF73ED7.p701.6.mp4'
file 'FBF73ED7.p701.7.mp4'
file 'FBF73ED7.p701.8.mp4'
file 'FBF73ED7.p701.9.mp4'
file 'FBF73ED7.p701.10.mp4'
file 'FBF73ED7.p701.11.mp4'
file 'FBF73ED7.p701.12.mp4'
file 'FBF73ED7.p701.13.mp4'
file 'FBF73ED7.p701.14.mp4'
file 'FBF73ED7.p701.15.mp4'
file 'FBF73ED7.p701.16.mp4'
file 'FBF73ED7.p701.17.mp4'
file 'FBF73ED7.p701.18.mp4'
file 'FBF73ED7.p701.19.mp4'
file 'FBF73ED7.p701.20.mp4'
file 'FBF73ED7.p701.21.mp4'
file 'FBF73ED7.p701.22.mp4'
file 'FBF73ED7.p701.23.mp4'
file 'FBF73ED7.p701.24.mp4'
file 'FBF73ED7.p701.25.mp4'
file 'FBF73ED7.p701.26.mp4'
file 'FBF73ED7.p701.27.mp4'
file 'FBF73ED7.p701.28.mp4'
file 'FBF73ED7.p701.29.mp4'
file 'FBF73ED7.p701.30.mp4'

在阅读一些网站文章时,时常会遇到文章内容只展示一部分,用户需要 关注博主、或者关注公众号 的一系列障碍。

upload successful

upload successful

于是使用“开发者工具”分析了一下前端代码发现。大多数实现逻辑基本上都是将文章内容元素设置一个较小高度,超出的部分隐藏掉。再在后追加一个“查看全文”的元素。

想起 Dark Reader (暗黑)插件的自定义CSS功能,因为在使用通用暗黑方案后不能满足所有网站,所以要对一些不能完美适配的网站添加亿点自定义代码。在这正好派到了用场。(当然你也可以使用其他插件)

打开 Dark Reader 插件,点击开发者工具

upload successful

在 主题编辑器 中添加一下代码:(这里用了IT屋和CSDN做演示)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
================================

it1352.com

CSS
.arc-body-main-more{
display: none !important;
}
.arc-body-main{
height: auto !important;
}

================================

blog.csdn.net

CSS
.article_content{
height: auto !important;
}
div.hide-article-box {
display: none !important;
}

upload successful

点击 Apply,刷新网站,就可以清除全文阅读限制了

实现原理很简单:隐藏关注元素,清除文章内容元素的高度限制。

注:此方法只能用于前端限制,后端限制是不行的。

介绍

PHP CS Fixer (PHP Coding Standards Fixer)是一款通过编码标准来修复代码的工具。它支持 PSR 编码规范和其他社区驱动(如 Symfony),还可以根据自己(团队)的风格进行自定义配置。

安装

安装 PHP CS Fixer 推荐使用 Composer 来进行安装。可以进行全局安装或者直接安装到项目中

1
2
3
4
5
# 全局安装
$ composer global require friendsofphp/php-cs-fixer

# 为项目安装
$ composer require --dev friendsofphp/php-cs-fixer

用法

describe 查看规则规则集

upload successful

fix 修复一个文件或者目录

使用 fix 命令可以对文件或者目录进行修复

1
2
$ php-cs-fixer fix /path/to/dir
$ php-cs-fixer fix /path/to/file

--path-mode 输出格式选项,支持 txt、json、xml、checkstyle、junit 和 gitlab。(默认txt)

--quiet 不输出任何信息。

-v --verbose 选项将显示应用的规则。
-vv 啰嗦
-vvv 调试

upload successful

出现“修复后 linting 期间报告的错误”,可以使用它来更详细地进行调试

upload successful

--rules 指定修复规则

1
2
3
4
5
6
7
8
9
$ php-cs-fixer fix ./ --rules=@PSR12

$ php-cs-fixer fix ./ --rules=line_ending,full_opening_tag,indentation_type

$ php-cs-fixer fix ./ --rules=-full_opening_tag,-indentation_type

$ php-cs-fixer fix ./ --rules=@Symfony,-@PSR1,-blank_line_before_statement,strict_comparison

$ php-cs-fixer fix ./ --rules='{"concat_space": {"spacing": "none"}}'

--dry-run 运行修复程序但不修改文件

--diff 以 udiff 格式输出修改内容

--allow-risky 是否运行有风险的修改,传入参数(yes or no)

--stop-on-violation 修复一个文件后停止执行

--show-progress 显示处理进度

退出代码

退出代码 fix命令是使用以下位标志构建的:

  • 0 - 好的。
  • 1 - 一般错误(或 PHP 最低要求不匹配)。
  • 4 - 某些文件的语法无效(仅在试运行模式下)。
  • 8 - 某些文件需要修复(仅在试运行模式下)。
  • 16 - 应用程序的配置错误。
  • 32 - Fixer 的配置错误。
  • 64 - 应用程序中出现异常。

PHP CS Fixer 介绍

PHP CS Fixer (PHP Coding Standards Fixer)是一款通过编码标准来修复代码的工具。它支持 PSR 编码规范和其他社区驱动(如 Symfony),还可以根据自己(团队)的风格进行自定义配置。

PHP CS Fixer 安装

安装 PHP CS Fixer 推荐使用 Composer 来进行安装。可以进行全局安装或者直接安装到项目中

1
2
3
4
5
全局安装
composer global require friendsofphp/php-cs-fixer

为项目安装
composer require --dev friendsofphp/php-cs-fixer

PhpStorm 配置

PHP > Quality Tools 找到 PHP CS Fixer ,点击配置.

upload successful

在路径中选这个刚刚安装好的 PHP CS Fixer C:\Users\l1n6yun\AppData\Roaming\Composer\vendor\bin\php-cs-fixer.bat.

点击 验证 按钮验证是否安装成功.

upload successful

点击 PHP CS Fixer inspection 配置,在检测页面开启,并根据项目要求配置检测规则集

upload successful

配置外部工具

Program: C:\Users\l1n6yun\AppData\Roaming\Composer\vendor\bin\php-cs-fixer.bat

Arguments: fix "$FileDir$\$FileName$" --using-cache=no

Working directory: $ProjectFileDir$

upload successful

添加快捷键

upload successful

0%