神奇的交互
该教程会向你介绍 BlogiNote 中神奇的交互。
改变模式
你可以通过 点击 首页右上角(或在移动端的右下角)一个按钮,将首页在列表模式和文件夹模式之间来回切换
如果首页处于 列表模式 就会显示文章列表。
如果首页处于 文件夹模式,页面就会基于网格来显示所有的文章,就像你平时在电脑上看到的文件系统一样的层级结构。
在 note 模式下,你可以 点击子文件夹进行原地的下钻操作,查看子文件夹里内容
很神奇~对吧 ✌ 快切换到 node 模式尝试一下吧 😋
代码块
点击代码块左上角的 按钮以展开或收起 📃 长长的代码块。
点击 按钮来一键复制代码块
js
const languageColorMap = {
theme: '#a855f7',
bash: '#89e051',
shell: '#89e051',
html: '#e34c26',
javascript: '#f1e05a',
}
图片
你可以 双击文章中的图片,然后一个称为 LightBox 的组件就会弹出,它会将图片放大到和屏幕一样大。
你可以和 LightBox 进行多种交互:
- 在图片上 滚动鼠标的滚轮,或(在触控屏) 捏合双指以缩放图片
- 拖拽可以将图片四处移动
- 有多个按钮悬浮在图片上,你可以 单击图片以显示或隐藏这些按钮
- 如果你想关闭 LightBox,你可以 点击模糊的背景,或是 点击右上角的 Esc 按钮,或是按下键盘上的
Esc
键 - 在左上角的紫色按钮 percent% 显示图片当前的缩放比例,你可以 点击它,或 双击图片以重置缩放值(到 100%)和位置(移回居中位置)