Skip to content

Commit b92ef99

Browse files
nekomeowwwnekomeowww
committed
style: 补全更多的键盘图标，更新样式
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
1 parent 3597d86 commit b92ef99

File tree

11 files changed

+177
-130
lines changed

11 files changed

+177
-130
lines changed

‎.obsidian/snippets/kbd.css

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
/* 键盘按键样式 */
2+
kbd {
3+
padding: 2px 8px;
4+
cursor: pointer;
5+
user-select: none;
6+
position: relative;
7+
bottom: 0;
8+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
9+
}
10+
11+
kbd::after {
12+
content: '';
13+
display: inline;
14+
position: absolute;
15+
left: 0;
16+
top: 0;
17+
height: 100%;
18+
width: 100%;
19+
background: #414141;
20+
box-shadow: 0 0 0px 2px #414141;
21+
border-radius: 4px;
22+
cursor: pointer;
23+
user-select: none;
24+
z-index: -1;
25+
}
26+
27+
/* macOS command 图标 */
28+
kbd[data-macos-keyboard-key="command"]::before {
29+
content: "⌘";
30+
margin-right: 4px;
31+
}
32+
33+
/* macOS Option 图标 */
34+
kbd[data-macos-keyboard-key="option"]::before {
35+
content: "⌥";
36+
margin-right: 4px;
37+
}
38+
39+
kbd[data-windows-keyboard-key="windows"]::before {
40+
content: "⊞";
41+
margin-right: 4px;
42+
font-size: 1.4em;
43+
}
44+
45+
kbd[data-keyboard-key="shift"]::before {
46+
content: "⇧";
47+
margin-right: 4px;
48+
}
49+
50+
kbd[data-keyboard-key="return"]::before {
51+
content: "⏎";
52+
margin-right: 4px;
53+
}
54+
55+
kbd[data-keyboard-key="control"]::before {
56+
content: "⌃";
57+
margin-right: 4px;
58+
}
59+
60+
kbd[data-keyboard-key="enter"]::before {
61+
content: "⌅";
62+
margin-right: 4px;
63+
}
64+
65+
kbd[data-keyboard-key="space"]::before {
66+
content: "␣";
67+
margin-right: 4px;
68+
font-weight: bold;
69+
vertical-align: top;
70+
}

‎.obsidian/snippets/main.css

Lines changed: 0 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,3 @@
1-
/* 键盘按键样式 */
2-
kbd {
3-
padding: 2px 8px;
4-
cursor: pointer;
5-
user-select: none;
6-
position: relative;
7-
bottom: 0;
8-
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
9-
}
10-
11-
kbd::after {
12-
content: '';
13-
display: inline;
14-
position: absolute;
15-
left: 0;
16-
top: 0;
17-
height: 100%;
18-
width: 100%;
19-
background: #414141;
20-
box-shadow: 0 0 0px 2px #414141;
21-
border-radius: 4px;
22-
cursor: pointer;
23-
user-select: none;
24-
z-index: -1;
25-
}
26-
27-
/* macOS Command 图标 */
28-
kbd[data-keyboard-key="macos-command"]::before {
29-
content: "⌘";
30-
margin-right: 4px;
31-
}
32-
33-
/* macOS Option 图标 */
34-
kbd[data-keyboard-key="macos-option"]::before {
35-
content: "⌥";
36-
margin-right: 4px;
37-
}
38-
39-
/* macOS Control 图标 */
40-
kbd[data-keyboard-key="macos-control"]::before {
41-
content: "⌃";
42-
margin-right: 4px;
43-
}
44-
45-
/* macOS Shift 图标 */
46-
kbd[data-keyboard-key="macos-shift"]::before {
47-
content: "⇧";
48-
margin-right: 4px;
49-
}
50-
51-
521
.internal-embed.media-embed.image-embed {
532
display: flex;
543
justify-content: center;

‎.vitepress/styles/kbd.css

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
/* 键盘按键样式 */
2+
.VPDoc kbd {
3+
padding: 4px 8px;
4+
font-size: 0.8rem;
5+
cursor: pointer;
6+
user-select: none;
7+
position: relative;
8+
bottom: 2px;
9+
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
10+
font-weight: 600;
11+
}
12+
13+
.VPDoc kbd::after {
14+
display: inline;
15+
content: '';
16+
position: absolute;
17+
left: 0;
18+
top: 0;
19+
height: 100%;
20+
width: 100%;
21+
background: hsl(0 0% 94% / 1);
22+
box-shadow: 0px 2px 0 2px hsl(0 0% 88% / 1);
23+
border-radius: 6px;
24+
font-size: 0.8rem;
25+
cursor: pointer;
26+
user-select: none;
27+
z-index: -1;
28+
}
29+
30+
/* 夜间模式的键盘按键样式 */
31+
.dark .VPDoc kbd::after {
32+
background: #3c3c3c;
33+
box-shadow: 0 2px 0 2px #292929;
34+
}
35+
36+
/* macOS command 图标 */
37+
.VPDoc kbd[data-macos-keyboard-key="command"]::before {
38+
content: "⌘";
39+
vertical-align: top;
40+
margin-right: 4px;
41+
}
42+
43+
/* macOS Option 图标 */
44+
.VPDoc kbd[data-macos-keyboard-key="option"]::before {
45+
content: "⌥";
46+
vertical-align: top;
47+
margin-right: 4px;
48+
}
49+
50+
.VPDoc kbd[data-windows-keyboard-key="windows"]::before {
51+
content: "⊞";
52+
vertical-align: top;
53+
margin-right: 4px;
54+
font-size: 1.4em;
55+
}
56+
57+
.VPDoc kbd[data-keyboard-key="shift"]::before {
58+
content: "⇧";
59+
vertical-align: top;
60+
margin-right: 4px;
61+
}
62+
63+
.VPDoc kbd[data-keyboard-key="return"]::before {
64+
content: "⏎";
65+
vertical-align: top;
66+
margin-right: 4px;
67+
}
68+
69+
.VPDoc kbd[data-keyboard-key="control"]::before {
70+
content: "⌃";
71+
vertical-align: top;
72+
margin-right: 4px;
73+
}
74+
75+
.VPDoc kbd[data-keyboard-key="enter"]::before {
76+
content: "⌅";
77+
vertical-align: top;
78+
margin-right: 4px;
79+
}
80+
81+
.VPDoc kbd[data-keyboard-key="space"]::before {
82+
content: "␣";
83+
vertical-align: top;
84+
margin-right: 4px;
85+
font-weight: bold;
86+
}

‎.vitepress/styles/main.css

Lines changed: 2 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import 'kbd.css';
2+
13
html, body {
24
-webkit-tap-highlight-color: transparent; /* 避免触屏下的点击高亮颜色 */
35
}
@@ -197,65 +199,3 @@ html, body {
197199
.vp-doc a:hover {
198200
text-decoration: underline;
199201
}
200-
201-
/* 键盘按键样式 */
202-
.VPDoc kbd {
203-
padding: 4px 8px;
204-
font-size: 0.8rem;
205-
cursor: pointer;
206-
user-select: none;
207-
position: relative;
208-
bottom: 2px;
209-
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI Adjusted","Segoe UI","Liberation Sans",sans-serif;
210-
}
211-
212-
.VPDoc kbd::after {
213-
display: inline;
214-
content: '';
215-
position: absolute;
216-
left: 0;
217-
top: 0;
218-
height: 100%;
219-
width: 100%;
220-
background: #ededed;
221-
box-shadow: 0px 2px 0 2px #ccc;
222-
border-radius: 6px;
223-
font-size: 0.8rem;
224-
cursor: pointer;
225-
user-select: none;
226-
z-index: -1;
227-
}
228-
229-
/* 夜间模式的键盘按键样式 */
230-
.dark .VPDoc kbd::after {
231-
background: #3c3c3c;
232-
box-shadow: 0 2px 0 2px #292929;
233-
}
234-
235-
/* macOS Command 图标 */
236-
.VPDoc kbd[data-keyboard-key="macos-command"]::before {
237-
content: "⌘";
238-
vertical-align: top;
239-
margin-right: 4px;
240-
}
241-
242-
/* macOS Option 图标 */
243-
.VPDoc kbd[data-keyboard-key="macos-option"]::before {
244-
content: "⌥";
245-
vertical-align: top;
246-
margin-right: 4px;
247-
}
248-
249-
/* macOS Control 图标 */
250-
.VPDoc kbd[data-keyboard-key="macos-control"]::before {
251-
content: "⌃";
252-
vertical-align: top;
253-
margin-right: 4px;
254-
}
255-
256-
/* macOS Shift 图标 */
257-
.VPDoc kbd[data-keyboard-key="macos-shift"]::before {
258-
content: "⇧";
259-
vertical-align: top;
260-
margin-right: 4px;
261-
}

‎README.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,23 +105,23 @@ cd nolebase
105105

106106
##### 使用的是 macOS 吗
107107

108-
使用 <kbd data-keyboard-key="macos-command">Command</kbd> + <kbd>空格</kbd> 打开「终端」应用，然后输入下面的命令：
108+
使用 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd data-keyboard-key="space">空格</kbd> 打开「终端」应用，然后输入下面的命令：
109109

110110
```shell
111111
cd
112112
```
113113

114-
先多输入一个空格，然后接下来打开访达，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到终端窗口中，最后按下 <kbd>return</kbd> 键，就可以告诉终端前往 Nólëbase 知识库所在的目录了。
114+
先多输入一个空格，然后接下来打开访达，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到终端窗口中，最后按下 <kbd data-keyboard-key="return">return</kbd> 键，就可以告诉终端前往 Nólëbase 知识库所在的目录了。
115115

116116
##### 使用的是 Windows 吗
117117

118-
使用 <kbd>Win</kbd> + <kbd>Q</kbd> 打开搜索，键入「Powershell」之后点击搜索结果中的蓝色方块，然后输入下面的命令：
118+
使用 <kbd data-windows-keyboard-key="windows">Win</kbd> + <kbd>Q</kbd> 打开搜索，键入「Powershell」之后点击搜索结果中的蓝色方块，然后输入下面的命令：
119119

120120
```shell
121121
cd
122122
```
123123

124-
先多输入一个空格，然后接下来打开文件管理器，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到运行窗口中，最后按下 <kbd>回车</kbd> 键，就可以告诉 Powershell 前往 Nólëbase 知识库所在的目录了。
124+
先多输入一个空格，然后接下来打开文件管理器，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到运行窗口中，最后按下 <kbd data-keyboard-key="enter">回车</kbd> 键，就可以告诉 Powershell 前往 Nólëbase 知识库所在的目录了。
125125

126126
##### 使用的是 Linux 吗
127127

@@ -157,7 +157,7 @@ $ pnpm docs:dev
157157

158158
在这个本地运行的 Nólëbase 知识库前端服务器启动的情况下，你针对所有 Markdown 文件、样式文件、配置文件的变更，都会实时响应到网页中。
159159

160-
如果刷新不及时或者更新有异常，也可以试试看使用 <kbd data-keyboard-key="macos-command">Command</kbd> + <kbd>R</kbd> （macOS 系统） <kbd>Ctrl</kbd> + <kbd>R</kbd> （Windows 和 Linux 系统）快捷键强制刷新。
160+
如果刷新不及时或者更新有异常，也可以试试看使用 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd>R</kbd> （macOS 系统） <kbd>Ctrl</kbd> + <kbd>R</kbd> （Windows 和 Linux 系统）快捷键强制刷新。
161161

162162
#### 构建并渲染为可部署的静态页面
163163

‎笔记/index.md

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414

1515
在继续之前，也请容许我介绍一下对项目所使用的技术和架构。
1616

17+
<WorkflowsHowNolebaseWorks />
18+
1719
和其他的由 [Hexo](https://hexo.io) 驱动和生成的博客和静态网站类似，[Nólëbase](https://nolebase.ayaka.io) 其实使用了名为 [VitePress](https://vitepress.dev) 的静态生成器来驱动和生成网站，像 [VitePress](https://vitepress.dev) 这样的静态生成器支持在 Markdown 文件中使用 [Vue](https://vuejs.org/) 组件来嵌入并增强文档的阅读和使用体验。而 [VitePress](https://vitepress.dev) 和 [Vue](https://vuejs.org/) 是 [Node.js](https://nodejs.org/en) 生态的一部分，他们都属于「前端技术」的一部分。
1820

1921
在运行和部署上，我们使用免费的 [Netlify](https://www.netlify.com/) 来提供网站的托管，使用 [GitHub Actions](https://github.com/features/actions)（你可以理解一个将会在每次我们将笔记和知识库内容更新到 GitHub 仓库之后会自动触发的一个自动化工作）把我们的笔记和知识库内容自动构建和部署到 [Netlify](https://www.netlify.com/) 上。
@@ -85,23 +87,23 @@ cd nolebase
8587

8688
##### 使用的是 macOS 吗
8789

88-
使用 <kbd data-keyboard-key="macos-command">Command</kbd> + <kbd>空格</kbd> 打开「终端」应用，然后输入下面的命令：
90+
使用 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd data-keyboard-key="space">空格</kbd> 打开「终端」应用，然后输入下面的命令：
8991

9092
```shell
9193
cd
9294
```
9395

94-
先多输入一个空格，然后接下来打开访达，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到终端窗口中，最后按下 <kbd>return</kbd> 键，就可以告诉终端前往 Nólëbase 知识库所在的目录了。
96+
先多输入一个空格，然后接下来打开访达，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到终端窗口中，最后按下 <kbd data-keyboard-key="return">return</kbd> 键，就可以告诉终端前往 Nólëbase 知识库所在的目录了。
9597

9698
##### 使用的是 Windows 吗
9799

98-
使用 <kbd>Win</kbd> + <kbd>Q</kbd> 打开搜索，键入「Powershell」之后点击搜索结果中的蓝色方块，然后输入下面的命令：
100+
使用 <kbd data-windows-keyboard-key="windows">Win</kbd> + <kbd>Q</kbd> 打开搜索，键入「Powershell」之后点击搜索结果中的蓝色方块，然后输入下面的命令：
99101

100102
```shell
101103
cd
102104
```
103105

104-
先多输入一个空格，然后接下来打开文件管理器，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到运行窗口中，最后按下 <kbd>回车</kbd> 键，就可以告诉 Powershell 前往 Nólëbase 知识库所在的目录了。
106+
先多输入一个空格，然后接下来打开文件管理器，把你解压缩完成的 Nólëbase 知识库文件夹拖拽到运行窗口中，最后按下 <kbd data-keyboard-key="enter">回车</kbd> 键，就可以告诉 Powershell 前往 Nólëbase 知识库所在的目录了。
105107

106108
##### 使用的是 Linux 吗
107109

@@ -137,7 +139,7 @@ $ pnpm docs:dev
137139

138140
在这个本地运行的 Nólëbase 知识库前端服务器启动的情况下，你针对所有 Markdown 文件、样式文件、配置文件的变更，都会实时响应到网页中。
139141

140-
如果刷新不及时或者更新有异常，也可以试试看使用 <kbd data-keyboard-key="macos-command">Command</kbd> + <kbd>R</kbd> （macOS 系统） <kbd>Ctrl</kbd> + <kbd>R</kbd> （Windows 和 Linux 系统）快捷键强制刷新。
142+
如果刷新不及时或者更新有异常，也可以试试看使用 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd>R</kbd> （macOS 系统） <kbd>Ctrl</kbd> + <kbd>R</kbd> （Windows 和 Linux 系统）快捷键强制刷新。
141143

142144
#### 构建并渲染为可部署的静态页面
143145

‎笔记/📟 终端/软件/Git 版本控制/Git 客户端配置 SSH 验证.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,7 +168,7 @@ vim ~/.ssh/config
168168
```
169169
170170
```shell [喜欢 Visual Studio Code]
171-
# 需要预先在 Visual Studio Code 中通过命令面板 Command Palette（可以在 Windows 和 Linux 上通过 Ctrl + Shift + P 或者在 macOS 上通过 Command + Shift + P）
171+
# 需要预先在 Visual Studio Code 中通过命令面板 command Palette（可以在 Windows 和 Linux 上通过 Ctrl + Shift + P 或者在 macOS 上通过 command + Shift + P）
172172
code ~/.ssh/config
173173
```
174174

‎笔记/📟 终端/软件/Git 版本控制/使用变基和堆叠整合提交和拉取请求.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,7 @@ git rebase -i <提交哈希> # 变基操作的时候，会把当前最后一次
208208
git commit --amend
209209
```
210210

211-
会弹出一个专门的标签页来编辑，编辑好之后 Command (Ctrl) + W 关闭编辑器标签页，输入下面的命令继续你的变基操作
211+
会弹出一个专门的标签页来编辑，编辑好之后 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd>W</kbd>（macOS）或者 <kbd data-keyboard-key="control">ctrl</kbd> + <kbd>W</kbd>（Windows 和 Linux）关闭编辑器标签页，输入下面的命令继续你的变基操作
212212

213213
```shell
214214
git rebase --continue

‎笔记/🛠️ 开发/語 编程语言/🐭 Golang/在 Visual Studio Code 中使用 go.work 时根目录的 go.mod 会提示 no go.mod file found in.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ no go.mod file found in /Users/neko/Git/<路径>
3030

3131
通过命令面板打开 Visual Studio Code 的配置：
3232

33-
- 在 macOS 上按 <kbd data-keyboard-key="macos-command">command</kbd> + <kbd data-keyboard-key="macos-option">option</kbd> + <kbd>P</kbd> 可以激活命令面板
33+
- 在 macOS 上按 <kbd data-macos-keyboard-key="command">command</kbd> + <kbd data-macos-keyboard-key="option">option</kbd> + <kbd>P</kbd> 可以激活命令面板
3434
- 在 Windows 和 Linux 上按 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>P</kbd>
3535

3636
然后输入选择下面的内容来配置**全局** Visual Studio Code 配置：

0 commit comments

Comments
 (0)