神奇的交互

tutorial

神奇的交互

该教程会向你介绍 BlogiNote 中神奇的交互。

改变模式

你可以通过 点击 首页右上角(或在移动端的右下角)一个按钮,将首页在列表模式文件夹模式之间来回切换

如果首页处于 列表模式 就会显示文章列表。

如果首页处于 文件夹模式,页面就会基于网格来显示所有的文章,就像你平时在电脑上看到的文件系统一样的层级结构。

改变模式
改变模式

在 note 模式下,你可以 点击子文件夹进行原地的下钻操作,查看子文件夹里内容

note 模式
note 模式

很神奇~对吧 ✌ 快切换到 node 模式尝试一下吧 😋

代码块

点击代码块左上角的 按钮以展开或收起 📃 长长的代码块。

点击 按钮来一键复制代码块

js
const languageColorMap = {
  theme: '#a855f7',
  bash: '#89e051',
  shell: '#89e051',
  html: '#e34c26',
  javascript: '#f1e05a',
}

提示框

点击提示框左上角的图表或标题,以展开或收起提示内容。

提示

点击 ☝ 上面的图标或标题可以展开或收起这一段内容

图片

交互
交互

你可以 双击文章中的图片,然后一个称为 LightBox 的组件就会弹出,它会将图片放大到和屏幕一样大。

你可以和 LightBox 进行多种交互:

  • 在图片上 滚动鼠标的滚轮,或(在触控屏) 捏合双指以缩放图片
  • 拖拽可以将图片四处移动
  • 有多个按钮悬浮在图片上,你可以 单击图片以显示或隐藏这些按钮
  • 如果你想关闭 LightBox,你可以 点击模糊的背景,或是 点击右上角的 Esc 按钮,或是按下键盘上的 Esc
  • 在左上角的紫色按钮 percent% 显示图片当前的缩放比例,你可以 点击它,或 双击图片以重置缩放值(到 100%)和位置(移回居中位置)

Copyright © 2024 Benbinbin

Theme BlogiNote

Icons from Icônes