欢迎来到 Blokko 文档站

Blokko 是一个免费的个人简介生成器，专为中文互联网环境（如微博置顶、扩列图等）设计。完全在浏览器本地运行。

本站是 Blokko 的官方文档和新手教程，旨在帮助你快速掌握它的使用方法，从零开始，创作出精美的置顶图。由于性能和多方面考虑，本站的样式演示可能会和Blokko主站内效果存在些许差异，但功能都是相通的。因此PC端也可以左边挂着Blokko,右边挂着文档站来一边看一边操作。

核心特性

• 🎨 所见即所得 ：无需代码，通过直观的图形界面实时预览你的创作，拖拽即可排序。
• 🧩 模块化设计 : 提供了多达10种不同功能的内容模块，像搭积木一样自由组合你的页面。
• ⚔️ OC 友好 ：内置多维（雷达图）、时间轴等多种适合展示原创角色（OC）的模块。
• 📽️ 高度自由 ：支持混合排列，界面上几乎所有元素都支持自定义效果
• 📱 响应式布局 ：支持手机端和PC端布局。

准备好了吗？让我们从 认识界面 开始吧！

认识界面

Blokko 采用了经典的三栏式布局，逻辑清晰，易于上手。了解这三个核心区域是掌握 Blokko 的第一步。

1. 左栏：内容模块区

这里是你作品的“骨架”。你添加的所有内容模块（如文字、图片、按钮等）都会以列表的形式在这里显示。你可以：

• 添加模块 ：点击底部的 + 文字 、 🖼️图片 等按钮，即可向页面中添加新的内容模块。
• 排序模块 ：直接在列表中按住并拖动一个模块，就可以调整它在页面中的显示顺序。
• 选中模块 ：点击任意一个模块，右侧的“样式”面板就会切换到该模块的专属设置。
• 显/隐模块 ：点击模块旁边的“眼睛”图标，可以暂时隐藏它，而无需删除。

2. 中栏：实时预览区

这里是你作品的“画布”，实时展示最终效果。你可以在这里进行最直观的操作：

• 直接编辑文字 ：双击预览区中的任何文本（如昵称、简介、卡片标题），即可直接修改。
• 拖拽排序 ：和左栏一样，你也可以直接在预览区中按住模块进行拖拽排序。
• 选中模块 ：单击任意模块，即可在右栏打开它的设置。

3. 右栏：样式检查器

这里是你作品的“调色盘”，负责所有的视觉设计。它主要分为三个标签页：

• 🎨 全局设计 ：在这里设置整个页面的通用样式，如背景颜色/图片、整体字体、全局强调色、卡片通用边框和阴影等。先定好全局风格，能让你的创作事半功倍。
• 📝 当前选中 ：当你选中一个模块后，这里会显示该模块的 独立设置 。你可以为单个模块设置不同于全局的颜色、字体、宽度等，实现丰富的个性化效果。
• ⚙️ 系统/导出 ：管理你的创作数据，包括导入、导出作品，以及将最终成品保存为图片。

---

理解了这三个区域的职能后，你已经掌握了 Blokko 的核心工作流。接下来，让我们亲手 制作第一个作品 ！

第一个作品：制作简介卡

理论不如实践。让我们通过一个简单的三步教程，快速制作一张包含“个人信息”和“文字介绍”的简介卡，感受一下 Blokko 的魅力。

第一步：修改个人信息

打开 Blokko 后，默认会有一个个人信息头部。我们先来修改它。

1. 在中间的预览区， 双击“你的昵称” ，然后输入你自己的名字。
2. 同样地，双击下面的“你的简介”，输入一句话介绍。
3. 点击预览区的灰色圆形头像，会弹出图片上传窗口，选择一张你喜欢的图片作为头像。

第二步：添加并编辑文字卡片

接下来，我们添加一个文字模块来丰富内容。

1. 在左下角的“内容模块”区域，点击 ➕文字 按钮。一个新的文字卡片会出现在预览区。
2. 双击新卡片中的“卡片标题”，把它改成“关于我”。
3. 双击“卡片内容”，输入更详细的自我介绍。

第三步：调整样式

现在我们的卡片有了内容，但看起来可能有点单调。让我们来美化它。

1. 点击预览区中的“关于我”文字卡片，右侧的“样式检查器”会自动切换到该卡片的独立设置。
2. 在“样式”面板中，找到“背景颜色”选项，点击色块，为这张卡片选择一个你喜欢的背景色。
3. 你还可以尝试调整“文字颜色”、“圆角大小”等其他设置，观察预览区的实时变化。

模块：文字

这是最基础也是最灵活的模块。支持 富文本 编辑，可以用来写个人简介、公告、作品说明或者任何文字内容。你可以通过富文本编辑器为文字添加加粗、斜体、列表、居中等效果。

关键设置

• 富文本编辑 ：在 Blokko 主程序中，点击样式面板里的“编辑内容”按钮，会弹出一个强大的富文本编辑器。
• 标题图标 ：你可以为标题设置一个来自 Iconify 图标库的图标，让信息分类更清晰。
• 文字方向 ：支持一键切换为 竖排文字 ，轻松实现古风或杂志风格的排版。
• 卡片样式 ：除了自定义颜色，Blokko 还内置了“便利贴”、“网格纸”等多种预设卡片样式，可以一键切换。

模块：图片

用于展示单张图片，可以附加说明文字。非常适合展示你的绘画作品、摄影、喜欢的梗图，或者为你的 OC 配上立绘。

关键设置

• 图片源 ：支持从本地上传，或通过内置的 Pixabay 搜索免费高质量图片。
• 图片裁剪与滤镜 ：Blokko 内置了简易的图片编辑器，你可以在上传后对图片进行裁剪、旋转，并调整亮度、对比度、饱和度、模糊等参数。
• 瀑布流布局 ：当多个图片模块相邻时，在“全局设计”中开启“紧凑模式(瀑布流)”，它们会自动排列成紧凑的瀑布流布局。

模块：按钮

创建装饰用按钮，用于扩列场景下快速分享你的社交媒体ID（微博、B站）。

关键设置

• 图标搜索 ：Blokko 内置了图标搜索功能，你还可以上传自己的 SVG 图标。
• 样式自定义 ：可以自由定义按钮的背景色、文字颜色、圆角大小和对齐方式。
• 多按钮布局 ：通过调整按钮模块的宽度（在“布局与构图”中学习），你可以实现一行放置多个按钮的效果。

模块：进度条

以可视化的方式展示一些类似于熟练度、好感度或任何可量化的数据。非常适合在OC设定中使用，或者是说最近在忙什么？

关键设置

• 样式自定义 ：可以自由设置进度条的填充色、背景色、高度和圆角。
• 渐变色 ：支持为进度条填充设置漂亮的渐变色效果。
• 多条组合 ：添加多个进度条模块并放在一起，可以形成一个清晰的技能列表。

模块：时间轴

用于按时间顺序展示事件、个人经历或角色的生平。简洁清晰，是叙事的绝佳工具。

关键设置

• 动态增删 ：在 Blokko 中，你可以自由地添加、删除和拖拽排序每一个时间点事件。
• 颜色统一 ：时间轴的圆点和连接线颜色会自动跟随“全局强调色”，保持整体风格统一。

模块：书影音

专门用于分享和评论书籍、电影或音乐专辑。内置多种精美样式，让你的分享更具格调。

关键设置

• 多种样式 ：提供“杂志”、“海报”、“票根”等多种预设风格，每种都有独特的设计感。
• 布局切换 ：“杂志”风格支持横向和纵向两种布局，以适应不同尺寸的封面图。
• 标签系统 ：可以为每个条目添加自定义标签，如“科幻”、“必看推荐”等。

模块：多维

v2.1.0 新增的核心功能，非常适合用来展示 OC（原创角色）的五维/六维属性雷达图，或者展示个人各项能力的分布。

关键设置

• 自定义维度 ：在 Blokko 中，你可以自由设定维度的数量（推荐3-8个）和每个维度的名称。
• 风格切换 ：内置多种风格的预设，如黑红/浅蓝等。
• 颜色自定义 ：雷达图的填充色和描边色都可以自由调整，以匹配你的角色设定或整体设计风格。

模块：分隔

用于在视觉上分割不同的内容区域，让你的页面布局更有条理。可以只用线条，也可以在中间附带文字说明。

模块：留白

一个简单但至关重要的工具，用于在模块之间增加垂直间距。“留白”是设计中的呼吸，善用它可以让你的排版更舒适、更有高级感。（PS：在常规的100%,67%,33%比例之外，留白区块还有单独的17%比例，方便大家更自由的排版创作。）

进阶：全局主题与背景

“全局设计”是 Blokko 的核心功能之一，它能让你轻松定义整个作品的统一视觉风格。一个好的工作流程是： 先在“全局设计”中定下整体基调，然后再去微调单个模块。

页面背景

你可以为页面设置一个丰富的背景，支持四种模式：

• 纯色 ：最简单的背景，选择一个颜色即可。
• 渐变 ：选择起始和结束两种颜色，并调整渐变角度，创造出有层次感的背景。
• 图片 ：上传一张你喜欢的图片作为背景。可以调整图片的填充方式（覆盖/适应）、平铺方式，并叠加一层颜色蒙版来确保前景文字的可读性。
• 纹理 ：为你的背景再叠加一层精美的 SVG 纹理图案，并自定义其颜色、透明度和密度，增加页面的质感。

主题色与默认样式

• 主题色与强调色 ：主题色会影响部分UI元素。**强调色 (Accent Color)** 则会应用到链接、时间轴圆点、音乐播放进度条、多维雷达图等关键位置，起到画龙点睛的作用。
• 组件默认样式 ：统一设置所有卡片模块的默认外观，包括背景模式（纯色/渐变）、颜色、文字颜色、圆角大小、透明度、内边距等。这是保证你作品风格统一的关键。

进阶：字体与卡片效果

文字是信息传达的核心。Blokko 提供了强大的字体系统与丰富的效果，助你打造个性鲜明的视觉风格。勾选“高级/专家模式”后，你将解锁更多强大的工具。

强大的字体系统

你可以在“全局设计”的“排版”标签页中设置一个统一的全局字体。Blokko 支持三种字体来源：

• 内置字体 ：Blokko 内置了多款优秀的、可免费商用的开源中英文字体，开箱即用。
• 加载本地字体 ：在 PC 端，点击“加载本地”按钮，Blokko 可以读取并使用你**电脑上安装的所有字体**，给予你无限的选择空间。（此功能依赖于浏览器的实验性API，可能并非所有浏览器都支持）
• 上传字体 ：你可以上传自己的 .ttf , .otf , .woff , .woff2 字体文件。上传后的字体会保存在浏览器中，方便随时调用。

高级效果：卡片阴影

在高级模式下，你可以为卡片模块添加精细的阴影，创造出更具立体感和艺术感的效果。

进阶：布局与构图

除了默认的垂直流式布局，Blokko 还有你整单个模块宽度的能力，从而创造出丰富多样的网格混搭布局。

调整模块宽度

1. 在预览区或内容模块区， 单击 你想要调整的模块。
2. 右侧的“样式检查器”会自动切换到“📝 当前选中”标签页。
3. 找到“布局宽度”设置项，选择一个预设宽度（如 50%、33%）。
4. 当多个调整了宽度的模块总宽度不足或等于一行时，它们会自动并排显示。

紧凑/瀑布流布局 (Masonry)

在创建了多列布局后，你可能会发现不同高度的卡片之间存在着不美观的垂直空隙。这时，你可以启用“紧凑/瀑布流布局”来解决这个问题。

• 如何开启 ：在右侧“样式检查器”的“🎨 全局设计” -> “组件”标签页中，勾选“ 开启紧凑/瀑布流布局 ”。
• 效果 ：开启后，Blokko 会自动计算并消除模块间的垂直间隙，形成类似瀑布流效果，让排版更紧凑、美观。

进阶：组件独立样式

虽然“全局设计”能保证风格的统一，但有时我们希望某个特定的卡片能脱颖而出，作为视觉焦点。这时，就需要用到“组件独立样式”。

覆盖规则

Blokko 的样式系统遵循一个简单的层级规则： 独立设置 > 全局设置 。

当你选中一个模块并进入“当前选中”面板时，你所做的任何修改（如更改背景色、字体大小、圆角等）都将 仅对这一个模块生效 ，并覆盖掉“全局设计”中对应的默认设置。所有其他未被独立修改的模块，则继续沿用全局样式。

应用场景

• 创建“公告”卡片 ：为一个重要的文字模块设置一个醒目的背景色和更大的字号，使其在众多卡片中格外引人注目。
• 视觉分组 ：为一组相关的卡片（例如，关于同一个OC的几张卡片）设置相同的独立背景色，从而在视觉上将它们归为一类。
• 特殊效果 ：仅为某张图片卡片添加一个独特的边框，或者为某个按钮设置一个渐变背景，增加设计的丰富度。

特殊效果的独立应用

除了颜色和字体，一些特殊效果也可以独立应用于单个模块。

• 竖排文字 ：对于“文字”模块，你可以在其独立设置中将其“文字方向”改为“竖排”，轻松实现古风或日式杂志的排版效果，而不会影响其他模块。
• 装饰贴纸 ：在“文字”模块的高级设置中，你可以为它添加“胶带”或“图钉”贴纸，创造出一种将便签贴在墙上的有趣视觉效果。

进阶：高级边框

开启“高级/专家模式”后，你将获得对组件边框的精细控制能力，还能一键应用多种预设的潮流边框风格。

全局边框

在“全局设计”面板中，你可以为所有卡片模块统一添加边框。这能极大地提升页面的整体感。不仅可以设置基础的边框宽度和颜色，更可以从多种高级风格中进行选择。

高级边框样式详解

这些预设风格能瞬间改变你作品的气质，让设计感倍增。

• 新粗野主义 (Neo-Brutalism) ：特点是硬朗的实线边框和无模糊的硬阴影，风格强烈，复古而现代。
• 像素风 (Pixel) ：模拟老式游戏UI的像素边框，适合复古或游戏主题。
• 双重偏移 (Double Offset) ：通过两个错位的边框创造出一种纸张堆叠的层次感。

进阶：高级背景效果

除了颜色和图片，高级模式还允许你为卡片添加更复杂的背景效果，极大地丰富视觉层次。

预设卡片样式

除了完全自定义，Blokko 还内置了一些精心设计的卡片预设样式，可以在“当前选中”面板中一键切换，为你的文字卡片增添别样风情。

• 网格纸 (Grid) ：模拟学生时代的网格练习本，带有红色顶栏，文艺又怀旧。
• 羊皮纸 (Paper) ：模拟复古的羊皮纸或牛皮纸质感，带有独特的纹理，适合复古或奇幻主题。

数据管理与导出

由于 Blokko 的所有数据都保存在你的本地浏览器中，因此了解如何正确地备份、分享和导出你的创作至关重要。

四种导出模式详解

在“系统/导出”面板中，点击“导出数据”按钮，你会看到四种导出选项。理解它们的区别，能帮助你选择最适合的方式。

• 标准导出 (.json)
  导出包含所有文本、颜色和布局设置的配置文件。 不包含图片文件 。
  • 优点：文件小，导出和导入速度极快。
  • 缺点：图片丢失。再次导入时，所有图片位置会变成空白占位符，需要你手动重新上传。
  • 适用场景：只修改了文字或颜色，想在同一台电脑上快速创建一个版本备份。
• 强化导出 (.zip) - 推荐
  将配置文件和所有用到的本地图片打包成一个 .zip 压缩包。
  • 优点： 最完整的备份 ，包含了所有数据。可以方便地将作品迁移到另一台电脑或另一个浏览器上。
  • 缺点：如果图片较多，文件会稍大，导出和导入需要几秒钟处理时间。
  • 适用场景： 日常备份、更换设备 。
• 模板导出 (.json)
  仅导出颜色、布局和卡片结构， 不包含任何文字和图片内容 。
  • 优点：文件极小，可以快速分享你的设计风格。
  • 缺点：不含任何具体内容。
  • 适用场景：你想把一套好看的配色或布局方案分享给朋友，让他们来填充自己的内容。
• 过时导出 (.json)
  一种旧的导出方式，将所有数据（包括图片）强行编码并塞入一个巨大的 .json 文件。
  • 优点：无。
  • 缺点：在图片稍多时，极易导致浏览器卡顿甚至崩溃，文件巨大，处理速度极慢。
  • 适用场景： 不推荐使用 。仅为兼容非常旧的版本而保留。

操作历史与撤销重做

Blokko 会自动记录你的每一步操作。在“系统/导出”面板中，你可以看到一个详细的“操作历史”列表。

• 撤销/重做 ：使用面板上的 撤销 和 重做 按钮，或者快捷键 Ctrl/Cmd + Z 和 Ctrl/Cmd + Y 。
• 跳转历史 ：你可以直接点击历史列表中的任意一项，快速回到当时的状态。

导出为图片

当你完成创作后，最终需要的是一张可以发布的图片。在“系统/导出”面板中，点击“导出为图片”按钮，即可将你的整个作品渲染成一张高质量的 PNG 图片并下载。

其他：样式分享

Blokko 提供了一个非常便捷的功能，让你能将自己精心调配的*配色、字体、布局等纯样式信息，通过一张二维码快速分享给朋友，或者从别人那里一键“偷”来好看的皮肤。

如何分享你的样式

1. 在右侧“样式检查器”中，切换到“ ⚙️ 系统/导出 ”标签页。
2. 点击“📱 二维码分享样式”按钮，会弹出一个窗口。
3. Blokko 会自动生成一个包含你当前所有样式信息的二维码。
4. 你可以让朋友直接用 Blokko 扫描这个二维码，或者点击“保存二维码卡片”下载一张精美的图片分享出去。

如何导入别人的样式

1. 同样地，在“⚙️ 系统/导出”面板中点击“📱 二维码分享样式”按钮。
2. 在弹出的窗口中，切换到“ 📥 导入二维码 ”标签页。
3. 点击“上传二维码图片”，选择你朋友分享给你的二维码图片。
4. Blokko 会自动识别并询问你是否应用。确认后，你的作品就会瞬间换上新的“皮肤”！

常见 QA

这里整理了一些大家在使用过程中可能遇到的常见问题和解答。

1. 为什么我导出的图片看起来有点模糊？

默认的导出分辨率是 1200px 宽度，对于大多数场景已经足够清晰。如果你需要更高清的图片（例如用于打印或在高清屏幕上展示），可以尝试以下方法：

• 在“系统/导出”面板中，勾选“ 超清导出 (1800px) ”选项。
• 如果需要特定尺寸，可以勾选“ 自定义尺寸 ”并手动输入更大的宽度值。

请注意，导出尺寸越大，处理时间越长，生成的文件也越大。

2. 我可以在手机上使用 Blokko 吗？

可以。 Blokko 对移动端进行了适配，你可以在手机浏览器上完成大部分操作。但由于手机屏幕较小，操作精细度有限，我们仍然 强烈建议在 PC（电脑）上进行复杂的设计和排版 ，以获得最佳体验。

3. 我的数据安全吗？会上传到服务器吗？

绝对安全，并且 100% 本地运行。 Blokko 的核心设计理念就是保护用户隐私。你的所有创作数据，包括文字、上传的图片、字体等，都只保存在你自己的浏览器本地存储中，**不会上传到任何服务器**。这也意味着，请务必定期使用“强化导出”功能备份你的作品，以防因清理浏览器缓存等原因导致数据丢失。

4. 为什么我无法加载电脑上的本地字体？

“加载本地字体”功能依赖于一项较新的、实验性的浏览器 API ( window.queryLocalFonts )。出于安全考虑，并非所有浏览器都默认支持或开启此功能。如果你无法使用，这通常是正常的。作为替代方案，你可以使用“ 上传字体 ”功能，将你的 .ttf 或 .otf 字体文件直接上传到 Blokko 中使用。

5. 我用 Blokko 制作的图片可以商用吗？

Blokko 工具本身完全免费，你可以自由使用生成的图片。 但是，你需要为图片中使用的**素材版权**负责。这包括：

• 字体： 请确保你使用（尤其是上传）的字体允许商业用途。Blokko 内置的推荐字体均基于免费商用协议。
• 图片： 请确保你上传的图片、图标等素材拥有合法授权，或来自 Unsplash、Pixabay 等无版权图片网站。

简而言之：工具是你的画笔，但画布上的颜料（素材）需要你自己确保来源合法。

实战：打造个人置顶

学会了基础模块和进阶技巧，是时候将它们组合起来，创造一个实用且美观的个人置顶页面了。这个案例将指导你如何整合信息、引导访客，并展示你的个性。

第一步：构思你的“名片”

个人置顶就像一张数字名片。在开始前，先想好你想展示的核心内容：

• 我是谁？ - 一个简洁的自我介绍。
• 我在哪里？ - 指向你最活跃的社交媒体链接。
• 我最近在做什么？ - 分享最近在玩的游戏，看的电影或书，以及自己在推谁？

第二步：模块组合

根据上面的构思，我们可以选择以下模块进行组合：

1. 文字模块 ：用于自我介绍或填写一些自己的推
2. 按钮模块 ：如果有扩列需求，可以创建多个按钮，分别可以填写、B站、小红书等ID。
3. 书影音模块 ：用“杂志”或“海报”样式分享你最近的喜爱。

第三步：布局与美化

单纯的垂直堆叠可能有些单调。我们可以运用“自由布局”技巧来优化排版。

• 并排按钮 ：选中其中一个按钮模块，进入“当前选中”面板，将其宽度设置为 50% 。对另一个按钮也做同样的操作。现在，它们就会优雅地并排显示了！
• 统一风格 ：在“全局设计”中设置一个和谐的背景色或背景图，选择一款你喜欢的全局字体。这能瞬间提升整体的精致感。

实战：创建OC资料卡

尽管制作初衷是制作置顶图，但随着功能更新，意外的也很适合搞OC了()，因此，你也可以尝试从头到尾制作一张完整的原创角色（OC）资料卡。这将涉及到全局设计、多种模块的组合以及自由布局的应用。

第一步：设定全局风格

我们先为整个页面定下基调。

1. 进入右侧的“全局设计”面板。
2. 在“页面背景”中，选择一个背景，或上传一张贴合你OC的背景图，适当降低其不透明度。
3. 在“全局字体”中，选择一款你喜欢的字体。
4. 在“组件默认样式”中，将卡片背景色也设为一个可以和背景图拉开差距的颜色，并给予一定的透明度，让背景图隐约可见。

第二步：添加核心模块

接下来，我们依次添加构成角色信息的核心模块。

1. 个人信息 ：点击默认的头部，上传OC的头像，并将昵称和简介改为OC的名字和称号。
2. 多维模块 ：添加一个“多维”模块，选择好风格，设置好OC的各项能力值。
3. 图片模块 ：添加一个“图片”模块，上传OC的全身立绘。
4. 时间轴模块 ：添加一个“时间轴”模块，记录下OC生平的关键事件，如果是有世界观，也可以用时间轴记录世界观事件。

第三步：运用自由布局排版

现在所有模块都垂直排列，显得很长。我们用自由布局来优化它。

1. 选中“多维”模块，在右侧“当前选中”面板中，将其宽度设置为 50% 。
2. 选中它下面的“图片”模块，同样将宽度设置为 50% 。你会发现它们现在并排显示了！
3. 这样，我们就形成了一个左侧是能力图、右侧是OC立绘的经典布局。

第四步：细节微调与导出

最后，进行一些细节调整，让作品更完美。

1. 你可以为“角色背景”文字卡片单独设置一个不同的背景色，让它更突出。
2. 检查所有模块的间距是否合适，如果不满意，可以使用“留白”模块来增加间距。
3. 一切满意后，在主程序的“系统/导出”中，选择“导出为图片”，一张精美的OC资料卡就诞生了！