hello word - 新闻

代码高亮测试

2025-11-09T09:21:00+00:00

console.log("行号从5开始"); console.log("下一行是6");def func(): a = 1 b = 2 # 高亮此行 c = 3 d = 4 # 高亮此行及下两行 e = 5 f = 6

两个空格

→ 一个制表符[x] Write the press release[ ] Update the website[ ] Contact the media

markdown语法指南

2025-10-30T10:48:00+00:00

markdown - 更简洁、更高效=================================================强烈建议开发者认真阅读本文档，掌握md及HBuilderX对md的强大支持。窄屏幕下，可按Alt+滚轮横向滚动很多人只把markdown用于网络文章发表，这糟蹋了markdown。markdown不止是HTML的简化版，更重要的是txt的升级版、word的轻量版、笔记的最佳载体。作为一种简单的格式标记语言，不同于txt的无格式，不同于HTML的复杂标记，也不同于word的鼠标调整样式。markdown通过简单的几个字符键入，就可以快捷的定义文档的样式。比如在行首敲一个“#”，就把这行定义为了1级标题，并且在HBuilderX里有直观完善的着色，这样无需发布为web页面，可直接当word用。掌握markdown，你可以完全抛弃txt和笔记软件的编辑器，并且在大多数场景下替代掉复杂臃肿的word。享受简洁之美、享受效率提升。而HBuilderX，可以被称为最强大的markdown书写工具了。下面的示例列举了markdown语法及对应的HBuilderX使用技巧：开始前，可以先按下文档结构图的快捷键Alt+w（Mac是Ctrl+w），浏览本文的大纲。标题语法markdown的标题是行首以#号开头，空格分割的，不同级别的标题，在HX里着色也不同。如下：标题1标题2标题3标题4标题5标题6标题使用技巧：Emmet快速输入：敲h2+Tab即可生成二级标题【同HTML里的emmet写法，不止标题，HX里所有可对应tag的markdown语法均支持emmet写法】。仅行首生效智能双击：双击#号可选中整个标题段落智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动在下一行补#。而连续2次回车后将自动补的#去掉。(体验同word)回车后再次按Tab可递进一层标题，再按Tab切换列表符在# 后回车，可上插一个空标题行【同word】，或任意位置按Ctrl+Shift+Enter也可以上插空标题行折叠：点标题前的-号可折叠该标题段落，快捷键是Alt+-（展开折叠是Alt+=）多层折叠时折叠或展开子节点，快捷键是Alt+Shift+-或=全文全部折叠或展开，快捷键是Ctrl+Alt+Shift+-或=折叠其他区域，快捷键是Alt+Shift+o。这对长文档管理非常有用，可以专注于当前章节可以在菜单-跳转-折叠中随时找到这些功能列表markdown的列表支持有序列表、无序列表以及特殊的任务列表。同样也是在行前加一个特殊符号，并空格后再跟列表文字内容。有序列表有序列表就是有顺序的列表，依靠行前的数字标记顺序。有序列表1 【设置或取消有序列表符的快捷键：Ctrl+Alt+1，可选中多行批量设置序号；支持多光标批量设置列表符，即按Ctrl+鼠标左键添加多光标】有序列表2 【列表后回车会自动补序号】有序列表3 【智能双击：双击前面的数字，可重新对数字排序，修正序号错误，并选中有序列表段落（左边的4是故意写错让你体验的）】无序列表无序列表就是列表不排序，无序列表因书写随意而被更广泛的使用。无序列表有3种前缀，HX里分别用于表示1级列表、2级列表、3级列表。无序列表1 【快捷键：Ctrl+Alt+-；智能双击：双击-号可选中整段无序列表；再次按Tab会更换二级列表符】无序列表2Emmet：li后敲Tab可生成*号列表符，行首生效快捷键：Ctrl+Alt+8【8即*对应的数字】，支持多光标批量设置列表符，即按Ctrl+鼠标左键添加多光标智能双击：双击*号可选中整段无序列表智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动续列表；连续按回车会清除列表符；再次按Tab会更换列表符；在列表符后回车或行尾Shift+回车，上一行留出列表符*号常用于二级列表，列表符后继续Tab，可切换列表符无序列表3 【快捷键：Ctrl+Alt+=；常用于三级列表；其他同上】任务列表任务列表非常实用，管理待办、已办非常便利。[ ] 任务列表-未完成任务【快捷键：Ctrl+Alt+[】[x] 任务列表-已完成任务【快捷键：Ctrl+Alt+]】智能双击：双击方括号内可切换勾选状态，把任务标记为完成或未完成；双击方括号右侧可选中任务列表段落智能回车：回车后自动补任务列表前缀符号；连续按回车清除前缀符号；在列表符后回车或行尾Shift+回车，上一行留出列表符[ ] 如需发布到web渲染，需增加无序列表- 的前缀以上三种列表，均支持批量修改列表符，有如下方式建议依次学习尝试：选中多行，按快捷键Ctrl+Alt+“1”或“-”或“[”或“]”，批量设置列表符如果需要跳行设置有序或无序列表，通过Ctrl+鼠标左键点中目标多行（可不连续），产生多光标，然后按快捷键Ctrl+Alt+“1”或“-”或“[”或“]”，可跳行设置列表符，尤其是有序列表，数字也会跳行加1按Alt+鼠标选中行首那列（列选择），这样每行行首都有光标，然后再键入或删除列表符即可批量操作选中多行，按快捷键Ctrl+Shift+\（其实就是Ctrl+|），可以在每行行首添加一个光标引用列表引用1引用2快捷键：Ctrl+Alt+Shift+.智能双击：双击>号可选中整段引用列表智能回车：行尾回车或行中Ctrl+Enter强制换行后会自动续列表；连续按回车会清除列表符；在列表符后回车或行尾Shift+回车，上一行留出列表符文字样式语法加粗【快捷键：Ctrl+B，支持多光标；Emmet：b后敲Tab】加粗2_倾斜_【Emmet：i后敲Tab；前后包围：选中文字按Ctrl+\是在选区两侧添加光标，可以继续输入_】倾斜删除线单行代码包围插入：先选中文字内容，然后按_*~`等符号，会自动在2侧加包围智能双击：双击语法区前面的定义符号，选中包含定义符的整段文字去包围：选中整段文字后，按Ctrl+Shift+]，可去除2侧包围符号引号括号虽然不属于markdown语法，但也支持相同的包围、选择、去包围操作。引号括号智能双击选择时略特殊的是：双击引号括号内侧，选中引号括号里的内容(不含引号括号)；按下Alt+双击引号括号内侧，则选中包含符号的整段文字HBuilderX还支持以下对2侧文本高效处理的手段选中文字按Ctrl+\是在选区两侧添加光标，可以继续输入~~，会在2侧同时输入向2侧扩大选择：【Win:Alt+Shit+→ 、Mac:Ctrl++Shit+→】；由2侧向内减少选择：【Win:Alt+Shit+← 、Mac:Ctrl++Shit+←】链接文字Emmet：a后敲Tab打开链接：Alt+鼠标单击；如果是本地文件，可通过Shift+Alt+单击，在另一分栏打开文件智能粘贴：粘贴URL会自动变成超链接格式；粘贴本地文件进来也会自动创建引用链接智能双击：双击语法区开头，即[左侧，选中包含定义符的整段文字Emmet：img后敲Tab智能粘贴：粘贴剪切板里的图形时会自动保存为本md文档的附件；删除文档中的图片语法，保存md文档时会自动删除对应的图片附件；粘贴图片文件时自动变成链接引用格式；悬浮预览：鼠标移到图片语法上，本地图片会自动显示出来智能双击：双击语法区开头，即!左侧，选中包含定义符的整段文字表格 Emmet：table3*3后敲Tab，表示生成3行3列的表格，行首生效md表格对齐是传统md的痛点，按下Ctrl+K可以自动整理表格格式（暂未兼容不同缩放模式和字体的情况）支持从excel、wps、word、number的表格中复制粘贴表格进来（不支持合并单元格和单元格换行）分割线------------- 【Emmet：hr后敲Tab】=============代码区 var a = documentEmmet：code后敲Tab，行首生效智能双击：双击语法区开头，即!左侧，选中包含定义符的整段文字支持代码直接高亮着色，这应该是只有HBuilderX才有的功能。注意需要在代码区开头指定语言类型注释快捷键：Ctrl+/智能双击：双击注释首尾的定义符，选中整段注释其他emmet快捷输入day后敲Tab，当前日期。注意day需在行首或前面有空格time后敲Tab，当前时间。注意time需在行首或前面有空格文档结构图文章很长时，word里有文档结构图，HBuilderX也有。菜单视图-文档结构图，快捷键Alt+W(mac是ctrl+W)，轻松管理长文档运行、预览和打印PDF对md文件点工具栏或菜单里的浏览器运行，可以使用外部浏览器预览此md文件，会自动渲染为HTML。点右上角的预览【快捷键Alt+p】，可在HBuilderX右侧预览该md文档的HTML渲染结果。在浏览器中点打印，选择打印到PDF，可将md输出为PDF格式。（注意在打印选项里去掉页眉页脚）一键分享markdown拥有迷人的输入体验，但分享并不方便，尤其是缺少免费、稳定、高速的图床。uniCloud提供了免费、稳定、高速的服务器和cdn。HBuilderX，基于uniCloud，提供了markdown的一键分享功能。利用uniCloud的前端网页托管，将markdown稳定转成了HTML网页，并发布为在线的URL。您可以把URL发送给任何想要分享的人。同时markdown里涉及的图片也会自动上传到前端网页托管里免费cdn中。更多见: MarkDown一键分享使用说明其他常用但你可能不知道的快捷操作技巧Ctrl+鼠标左键添加多光标，然后敲字或粘贴，可批量处理。Ctrl+鼠标左键拖选，可选中多个选区。Ctrl+鼠标右键删除多光标不选内容按Ctrl+C或X可复制或剪切整行选中2个选区后，按Ctrl+Shift+X，可互换选区内容。如无选区，只是2个光标，则互换2行Ctrl+上下键可上下移动行Ctrl+Insert可重复插入当前行，如果有选中内容，可重复插入选中内容Ctrl+Shift+K可合并多行（是格式化Ctrl+K的反操作）删除按Ctrl+D可删除选中行，支持多光标Shift+Del删除到行尾Shift+Backspace删除到行首选择Ctrl+E选相同词(mac是Command+D)，连续按可选中多词进一步操作，比替换更方便Ctrl+L可连选多行，Ctrl+Shift+L也是选择行，但不选行首尾的空白字符Ctrl+=可逐级放大选区双击标题、列表符可选中相应段落双击英文引号、括号内侧，可选中内部内容双击缩进符，可选中同缩进段落双击连字符比如-或_，可选中相连的词，比如双击这里试试，uni-app查找Ctrl+P查找文件Ctrl+Alt+F可在当前目录的所有文档中搜索指定关键字(mac是Command+Shift+f)选中文字按F3，查找下一个，Shift+F3找上一个云同步：HBuilderX+markdown用于云同步笔记的技巧，请参考http://ask.dcloud.net.cn/article/13097都学会了吗？markdown语法其实很简单，认真学半小时就能掌握。

增强版 CSS 框架使用文档

2025-10-25T03:39:00+00:00

增强版 CSS 框架使用文档目录1. 框架概述2. 快速开始3. 全局变量3.1 颜色系统3.2 字体系统3.3 边框系统3.4 间距系统3.5 阴影系统3.6 过渡与动画4. 网格系统4.1 容器4.2 行4.3 列4.4 响应式断点4.5 列偏移4.6 列排序5. 工具类5.1 显示控制5.2 布局工具5.3 间距工具5.4 边框工具5.5 文本工具5.6 背景工具5.7 过渡与动画工具5.8 其他工具6. 示例6.1 基础布局示例6.2 响应式布局示例6.3 组件样式示例1. 框架概述 {#1-框架概述}本框架是一个功能完整的 CSS 工具集，提供了全面的样式解决方案，包括：灵活的 12 列网格系统，支持多断点响应式设计完整的全局变量系统，便于主题定制丰富的工具类，覆盖布局、间距、边框、文本等场景统一的过渡与动画效果，提升用户体验标准化的基础样式重置，确保跨浏览器一致性框架设计遵循 "移动优先" 原则，通过清晰的命名规范和模块化结构，使开发者能够快速构建一致、美观的界面。2. 快速开始引入框架将框架 CSS 文件引入到 HTML 文档的中：\基础结构一个典型的页面结构如下：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \3. 全局变量框架使用 CSS 变量（Custom Properties）定义全局样式，所有变量都在:root选择器下声明，便于统一修改和主题定制。3.1 颜色系统主题色\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;背景色\--color-background: #ffffff; /\* 主要背景色 \*/ \--color-background-alt: #f9fafb; /\* 交替背景色 \*/ \--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/ \--color-background-active: #e5e7eb; /\* 激活背景色 \*/ \--color-background-card: #ffffff; /\* 卡片背景色 \*/ \--color-background-modal: #ffffff; /\* 模态框背景色 \*/ \--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/文本色\--color-text: #000000; /\* 主要文本色 \*/ \--color-text-light: #374151; /\* 浅色文本 \*/ \--color-text-lighter: #6B7280; /\* 更浅文本 \*/ \--color-text-muted: #3d3d3d; /\* 次要文本 \*/ \--color-text-disabled: #9CA3AF; /\* 禁用文本色 \*/ \--color-text-inverse: #ffffff; /\* 深色背景上的文本 \*/功能色（状态色）\--color-success: #52c41a; /\* 成功色 \*/ \--color-warning: #fa8c16; /\* 警告色 \*/ \--color-danger: #ff4d4f; /\* 危险/错误色 \*/ \--color-info: #4096ff; /\* 信息色 \*/中性色系提供从--color-neutral-50（最浅）到--color-neutral-950（最深）的完整中性色阶，满足各种场景需求。七色调全色系包含红、橙、黄、绿、青、蓝、紫七个色系，每个色系都有从 50 到 950 的色阶变化，如：/\* 红色系示例 \*/ \--color-red-50: #fff5f5; \--color-red-100: #ffe3e3; /\* ... 中间色阶省略 ... \*/ \--color-red-950: #5c0d12;3.2 字体系统\--font-family-main: 'Helvetica Neue', Helvetica, 'PingFang SC', ...; /\* 主要字体 \*/ \--font-family-mono: 'SF Mono', Menlo, Monaco, ...; /\* 等宽字体（代码用） \*/ \--font-family-display: var(--font-family-main); /\* 标题字体 \*/ /\* 字体大小 \*/ \--font-size-xs: 10px; \--font-size-sm: 12px; \--font-size-md: 13px; \--font-size-lg: 14px; \--font-size-xl: 16px; \--font-size-2xl: 18px; \--font-size-3xl: 22px; \--font-size-4xl: 26px; \--font-size-5xl: 32px; \--font-size-6xl: 40px; /\* 字体权重 \*/ \--font-weight-light: 300; \--font-weight-normal: 400; \--font-weight-medium: 500; \--font-weight-semibold: 600; \--font-weight-bold: 700; \--font-weight-extrabold: 800; /\* 行高 \*/ \--line-height-xs: 1.2; \--line-height-sm: 1.3; \--line-height-md: 1.5; \--line-height-lg: 1.6; \--line-height-xl: 1.8;3.3 边框系统/\* 边框宽度 \*/ \--border-width: 1px; \--border-width-sm: 0.5px; /\* 细边框 \*/ \--border-width-lg: 2px; /\* 粗边框 \*/ /\* 边框圆角 \*/ \--border-radius: 4px; \--border-radius-sm: 2px; /\* 小圆角 \*/ \--border-radius-lg: 6px; /\* 大圆角化 \*/ \--border-radius-xl: 8px; \--border-radius-full: 9999px; /\* 全圆角（圆形） \*/ /\* 边框颜色 \*/ \--color-border: #ccc; \--color-border-light: #e5e7eb; /\* 浅色边框 \*/ \--color-border-dark: #9CA3AF; /\* 深色边框 \*/ \--color-border-primary: var(--color-primary); /\* 主色边框 \*/3.4 间距系统\--spacing-0: 0; /\* 零间距 \*/ \--spacing-xxs: 2px; /\* 极小间距 \*/ \--spacing-xs: 4px; \--spacing-sm: 5px; \--spacing-md: 10px; \--spacing-lg: 20px; \--spacing-xl: 25px; \--spacing-2xl: 32px; /\* 更大间距 \*/ \--spacing-3xl: 40px; \--spacing-4xl: 56px; \--spacing-5xl: 72px;3.5 阴影系统\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \03.6 过渡与动画\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \14. 网格系统框架采用 12 列网格布局，通过容器（container）、行（row）和列（col）的组合实现灵活的页面布局。4.1 容器容器用于包裹网格内容，提供居中对齐和内边距控制。类名说明最大宽度.container基础容器1200px.container-sm小型容器540px.container-md中型容器720px.container-lg大型容器960px.container-xl特大型容器1140px.container-xxl超大型容器1320px.container-fluid流体容器100% 宽度使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \24.2 行行（Row）用于包裹列（Column），并提供负外边距抵消列的内边距，确保布局对齐。类名说明.row基础行.row-gutter-sm小间距行（8px）.row-gutter-lg大间距行（24px）使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \34.3 列列是网格系统的核心，通过指定占比来控制宽度。框架采用 12 列系统，每列的宽度为100% / 12 * 列数。基础列类：类名说明宽度占比.col-11 列宽8.333%.col-22 列宽16.666%..........col-1212 列宽100%.col自动分配宽度平均分配.col-auto自动宽度由内容决定使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \44.4 响应式断点框架提供 6 个响应式断点，支持在不同屏幕尺寸下调整布局：断点前缀断点值说明xs0超小屏幕（手机，默认）sm576px小屏幕（平板竖屏）md768px中等屏幕（平板横屏）lg992px大屏幕（笔记本 / 小桌面）xl1200px特大屏幕（桌面）xxl1400px超特大屏幕（大桌面）响应式列类命名规则：.col-[断点前缀]-[列数]使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \54.5 列偏移通过偏移类可以控制列的左侧留白，实现列的右移效果。偏移类命名规则：.offset-[断点前缀]-[偏移列数]使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \64.6 列排序通过排序类可以改变列的显示顺序，而不改变 HTML 结构。排序类：类名说明.order-first排在最前面.order-last排在最后面.order-[n]排在第 n 位（n 为 0-12）.order-[断点前缀]-first在指定断点排在最前面.order-[断点前缀]-last在指定断点排在最后面.order-[断点前缀]-[n]在指定断点排在第 n 位使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \75. 工具类框架提供了丰富的工具类，用于快速设置元素样式，避免重复编写 CSS。5.1 显示控制类名说明.hidden隐藏元素（display: none）.invisible不可见但保留空间（visibility: hidden）.visible可见（visibility: visible）.sr-only仅屏幕阅读器可见.d-none不显示.d-block块级显示.d-flexFlex 布局显示.d-sm-none在 sm 断点及以上不显示.d-sm-block在 sm 断点及以上块级显示.d-sm-flex在 sm 断点及以上 Flex 显示...类似的 md/lg/xl/xxl 前缀类使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \85.2 布局工具Flex 布局工具类名说明.flex启用 Flex 布局.inline-flex启用内联 Flex 布局.flex-row水平方向排列（默认）.flex-row-reverse水平反向排列.flex-col垂直方向排列.flex-col-reverse垂直反向排列.flex-wrap允许换行.flex-nowrap不允许换行.justify-start主轴起点对齐.justify-end主轴终点对齐.justify-center主轴居中对齐.justify-between主轴两端对齐.justify-around主轴均匀分布.items-start交叉轴起点对齐.items-end交叉轴终点对齐.items-center交叉轴居中对齐.items-baseline交叉轴基线对齐.items-stretch交叉轴拉伸对齐.flex-1Flex 项目占满剩余空间.flex-autoFlex 项目自动调整.flex-noneFlex 项目不伸缩使用示例：\ \ \ \ \ \框架示例\ \ \ \ \

\ \

\ \9Grid 布局工具类名说明.grid启用 Grid 布局.grid-cols-22 列网格.grid-cols-33 列网格.grid-cols-44 列网格.grid-cols-auto自动列数.gap-0 至 .gap-2xl网格间距使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;0定位工具类名说明.position-static静态定位.position-relative相对定位.position-absolute绝对定位.position-fixed固定定位.position-sticky粘性定位.top-0顶部对齐.right-0右侧对齐.bottom-0底部对齐.left-0左侧对齐5.3 间距工具间距工具类用于快速设置元素的外边距（margin）和内边距（padding），命名规则如下：前缀：m-（margin）或 p-（padding）方向：无方向（全方向）、t（上）、b（下）、l（左）、r（右）、x（左右）、y（上下）大小：0、xxs、xs、sm、md、lg、xl、2xl常用间距类：类名说明.m-0全方向外边距为 0.p-md全方向内边距为 md（10px）.mt-sm上外边距为 sm（5px）.mb-lg下外边距为 lg（20px）.px-xl左右内边距为 xl（25px）.py-2xl上下内边距为 2xl（32px）使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;15.4 边框工具类名说明.border基础边框.border-0无边框.border-sm细边框.border-lg粗边框.border-dashed虚线边框.border-primary主色边框.border-success成功色边框.border-warning警告色边框.border-danger危险色边框.border-t上边框.border-r右边框.border-b下边框.border-l左边框.border-t-0无上边框...类似的 r-0/b-0/l-0圆角工具：类名说明.rounded基础圆角.rounded-0无圆角.rounded-sm小圆角.rounded-lg大圆角化.rounded-xl超大圆角.rounded-full全圆角（圆形）.rounded-t上圆角.rounded-r右圆角.rounded-b下圆角.rounded-l左圆角使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;25.5 文本工具文本对齐类名说明.text-left左对齐.text-center居中对齐.text-right右对齐.text-justify两端对齐文本颜色类名说明.text-primary主色文本.text-secondary辅助色文本.text-text主要文本色.text-text-light浅色文本.text-muted次要文本.text-disabled禁用文本色.text-inverse反色文本（用于深色背景）.text-success成功色文本.text-warning警告色文本.text-danger危险色文本.text-info信息色文本文本大小类名说明对应变量.text-xs超小文本--font-size-xs (10px).text-sm小文本--font-size-sm (12px).text-md中等文本--font-size-md (13px).text-lg大文本--font-size-lg (14px).text-xl超大文本--font-size-xl (16px).text-2xl 至 .text-5xl更大文本对应变量逐步增大字体权重类名说明对应变量.font-light轻量--font-weight-light (300).font-normal正常--font-weight-normal (400).font-medium中等--font-weight-medium (500).font-semibold半粗体--font-weight-semibold (600).font-bold粗体--font-weight-bold (700).font-extrabold特粗体--font-weight-extrabold (800)其他文本工具类名说明.text-underline下划线.text-underline-hoverhover 时显示下划线.text-no-underline无下划线.text-uppercase大写.text-lowercase小写.text-capitalize首字母大写使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;35.6 背景工具背景工具类用于快速设置元素的背景色，命名规则为.bg-[颜色名称]。常用背景类：类名说明.bg-primary主色背景.bg-primary-light主色浅色背景.bg-background主要背景色.bg-background-alt交替背景色.bg-background-hover悬停背景色.bg-success成功色背景.bg-success-bg成功色浅色背景.bg-warning警告色背景.bg-warning-bg警告色浅色背景.bg-danger危险色背景.bg-danger-bg危险色浅色背景.bg-neutral-[n]中性色背景（n 为 50-900）使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;45.7 过渡与动画工具过渡工具类名说明.transition基础过渡效果.transition-none无过渡.transition-fast快速过渡（150ms）.transition-normal正常过渡（300ms）.transition-slow慢速过渡（500ms）.transition-color仅颜色过渡.transition-bg仅背景色过渡.transition-border仅边框过渡.transition-transform仅变换过渡.transition-shadow仅阴影过渡动画工具类名说明.animate-fade-in淡入动画.animate-fade-out淡出动画.animate-slide-up上滑动画.animate-slide-down下滑动画.animate-slide-left左滑动画.animate-slide-right右滑动画.animate-bounce弹跳动画.animate-pulse脉冲动画.animate-shake抖动动画.animate-spin旋转动画.animate-zoom-in放大动画.animate-zoom-out缩小动画使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;55.8 其他工具类名说明.shadow基础阴影.shadow-sm小阴影.shadow-lg大阴影.shadow-xl超大阴影.shadow-primary主色阴影.shadow-hoverhover 时显示更大阴影.w-100宽度 100%.h-100高度 100%.w-auto宽度自动.h-auto高度自动.max-w-100最大宽度 100%.overflow-hidden溢出隐藏.overflow-auto溢出自动滚动.cursor-pointer鼠标指针为手型.cursor-not-allowed鼠标指针为禁止.opacity-0透明度 0.opacity-50透明度 50%.opacity-100透明度 100%.zoom-hoverhover 时轻微放大使用示例：\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;66. 示例6.1 基础布局示例\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;76.2 响应式布局示例\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;86.3 组件样式示例按钮组件\--color-primary: #007BFF; /\* 主色调 \*/ \--color-primary-light: #3395FF; /\* 主色浅变体 \*/ \--color-primary-dark: #0056D2; /\* 主色深变体 \*/ \--color-primary-transparent: rgba(0, 123, 255, 0.15); /\* 主色透明变体 \*/ \--color-primary-rgb: 0, 123, 255; /\* 主色RGB值（用于rgba计算） \*/ \--color-secondary: #444; /\* 辅助色 \*/ \--color-secondary-light: #666; \--color-secondary-dark: #222;9表单组件\--color-background: #ffffff; /\* 主要背景色 \*/ \--color-background-alt: #f9fafb; /\* 交替背景色 \*/ \--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/ \--color-background-active: #e5e7eb; /\* 激活背景色 \*/ \--color-background-card: #ffffff; /\* 卡片背景色 \*/ \--color-background-modal: #ffffff; /\* 模态框背景色 \*/ \--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/0提示框组件\--color-background: #ffffff; /\* 主要背景色 \*/ \--color-background-alt: #f9fafb; /\* 交替背景色 \*/ \--color-background-hover: #f3f4f6; /\* 悬停背景色 \*/ \--color-background-active: #e5e7eb; /\* 激活背景色 \*/ \--color-background-card: #ffffff; /\* 卡片背景色 \*/ \--color-background-modal: #ffffff; /\* 模态框背景色 \*/ \--color-background-overlay: rgba(0, 0, 0, 0.5); /\* 遮罩层背景色 \*/1以上就是增强版 CSS 框架的详细使用文档。通过灵活运用框架提供的网格系统和工具类，可以快速构建出美观、一致且响应式的网页界面。如需进一步定制，可以通过修改全局变量来调整主题样式，无需修改工具类代码。（注：文档部分内容可能由 AI 生成）

人生无常，大肠包小肠

2025-10-24T13:42:00+00:00

人生无常，大肠包小肠H1H2H3H4H5H6粗体：bold text斜体：italicized text引用blockquote有序列表First itemSecond itemThird item无序列表First itemSecond itemThird item代码（Code）：code分割线自定义链接：title自定义图片表格SyntaxDescriptionHeaderTitleParagraphText代码块（Fenced Code Block）{ "firstName": "John", "lastName": "Smith", "age": 25 }脚注（Footnote）Here's a sentence with a footnote. 1标题编号（Heading ID）My Great Heading {#custom-id}定义列表（Definition List）term: definition删除线（Strikethrough）The world is flat.任务列表（Task List）[x] Write the press release[x] Write the press release[ ] Update the website[ ] Contact the mediafunction displayDate(){ document.getElementById("demo").innerHTML=Date(); }标题1标题2标题3内容内容内容自定义标题内容buyu-1.3.0 1.66MB已完成待处理通知推荐热门小徽章大徽章边框样式VIP会员基础颜色按钮（默认尺寸）红色按钮橙色按钮黄色按钮绿色按钮青色按钮蓝色按钮紫色按钮轮廓按钮（默认尺寸）红色轮廓橙色轮廓黄色轮廓绿色轮廓青色轮廓蓝色轮廓紫色轮廓小尺寸按钮红色小按钮橙色小轮廓按钮大尺寸按钮绿色大按钮青色大轮廓按钮块级全宽按钮蓝色块级按钮紫色块级轮廓按钮带链接的按钮新窗口打开返回顶部默认进度条： 60% 带标题：完成度 (75%) 75% 成功样式： 85% 警告样式： 90% 危险样式： 95% 信息样式： 50% 条纹样式： 65% 动画条纹： 70% document.addEventListener("DOMContentLoaded", function () { const ap_6932c2d37c91b = new APlayer({ container: document.getElementById("aplayer-6932c2d37c91a"), audio: [{ name: "成语拜新年", artist: "李昕融", url: "http://music.163.com/song/media/outer/url?id=2016412899.mp3", cover: "https://img.zhuxu.asia/2025/10/68fb836ceacde.jpg" }] }); }); document.addEventListener("DOMContentLoaded", function () { const dp = new DPlayer({ container: document.getElementById("dplayer-6932c2d37c90f"), autoplay: false, loop: false, preload: "auto", lang: "zh-cn", mutex: true, theme: "#b7daff", hotkey: true, volume: 0.7, video: { url: "https://videos.xxapi.cn/3572cb90e7531d80.mp4", pic: "" } }); }); This is the footnote. ↩

测试测试测试

2025-10-22T12:04:00+00:00

新增短代码

2025-10-19T07:54:00+00:00

标签页（Tabs）简介短代码效果标签页（Tabs）组件用于在有限空间内展示多个分类内容，通过点击标签切换不同内容区域，保持界面简洁有序。支持嵌套其他短代码（如按钮、折叠面板等）和代码块，适用于展示多维度信息对比或分步内容。{tabs} {tab name="标题1"} 内容 {/tab} {tab name="标题2"} 内容 {/tab} {tab name="标题3"} 内容 {/tab} {/tabs}由于代码性质这里就不放效果了,可直接查看折叠面板简介短代码效果折叠面板主要用于收纳补充说明、代码块、长文本等内容，避免文章冗长，提升阅读体验。支持自定义标题、默认展开状态及 6 种预设样式（如成功、警告、危险等主题），且兼容嵌套其他短代码。短代码参数支持 2 个可选参数，用于自定义面板标题和默认状态：参数名作用取值范围默认值title自定义面板的标题文字任意文本（建议简短明了）折叠面板open设置面板默认是否展开true（默认展开） / false（默认折叠）false使用示例指定标题为【自定义标题】，并设置默认展开【open="true"】或默认折叠【open="false"】[collapse title="自定义标题" open="true"] 内容 [/collapse]效果：显示标题为 “常见问题解答” 的面板，默认展开显示内容，点击标题可折叠。常见问题解答问：这个折叠面板支持嵌套吗？答：支持，可以在内容中嵌套其他短代码或HTML。问：标题能放特殊符号吗？答：可以，会自动过滤不安全内容，放心使用。温馨提示这是默认展开的折叠面板，适合展示提示信息。温馨提示这是默认关闭的折叠面板附件下载卡片简介短代码效果附件下载卡片用于展示各类文件的下载入口，支持自定义图标、标题、大小等信息，自定义文件类型标识和新文件标记。点击 "下载" 按钮可直接下载或跳转至文件地址，支持指定打开方式（当前窗口 / 新窗口）。短代码参数参数名必选含义与用途示例值默认值url是附件的下载链接（核心参数，为空时会显示错误提示）https://example.com/file.pdf无title否附件的显示名称（用于标识附件内容）产品手册v2.0下载附件size否附件的文件大小（用于展示容量信息，需手动填写）2.4MB空（不显示）icon否附件的图标（可以使用主题内置的font-awesome4.7.0图标）fa fa-file-pdf-ofa-file-otype否附件的文件类型（用于 CSS 样式识别，如区分 PDF / 图片 / 压缩包等）pdf、zip、img空短代码使用方法基础示例（必填参数）[attachment url="链接"]效果：生成一个带默认标题 “下载附件”、默认图标📎、新窗口打开的下载卡片。完整示例（含所有参数）[attachment url="下载链接" title="标题" size="大小" icon="图标" type="文件类型" target="链接打开方式"]PDF文档产品使用手册 2.4MBWord文档季度报告 1.8MBExcel表格销售数据统计 3.2MB软件安装包客户端安装包 15.6MB源码包项目源码 8.7MB图片文件界面截图 1.2MB视频文件功能演示视频 85.3MB音频文件访谈录音 12.5MB新文件标记系统更新包 23.7MB当前窗口打开说明文档 45KB徽章简介短代码效果徽章（Badge）用于展示状态标识、分类标签或重要程度，支持多种颜色、尺寸和样式变体。短代码参数参数名必选含义与用途示例值默认值$content是徽章内部显示的文本（核心内容，为空时返回空字符串，不生成徽章）新上线、已完成无（必填）type否徽章的预设类型（对应预设样式，如颜色、风格，限制在合法类型内）success、danger、infodefaultcolor否徽章的自定义背景色（支持十六进制、rgb、rgba 格式，格式不合法时不生效）#ff5722、rgb(255,87,34)、rgba(255,87,34,0.8)空（使用type对应的预设颜色）size否徽章的尺寸（限制在预设尺寸内，为空时使用默认尺寸）sm（小尺寸）、lg（大尺寸）空（默认尺寸）outline否是否显示边框样式（布尔值，为true时显示边框，不填充纯色背景）true、falsefalse短代码使用方法基础示例（必填参数）[badge]新消息\[/badge]完整示例（含所有参数）[badge type="success"]已完成[/badge] [badge type="danger"]待处理[/badge] [badge type="cyan"]通知[/badge] [badge color="rgba(76,175,80,0.7)"]推荐[/badge] [badge color="#ff9800"]热门[/badge] [badge size="sm"]小徽章\[/badge] [badge size="lg" type="info"]大徽章\[/badge] [badge outline="true" type="warning"]边框样式\[/badge] [badge outline="true" color="#673ab7"]自定义边框色\[/badge] [badge type="purple" size="lg" color="rgba(156,39,176,0.9)" outline="false"]VIP会员\[/badge] 请注意type：仅允许预设的 8 种合法类型（default/success/warning/danger/info/orange/cyan/purple），无效值自动转为default，确保样式统一。size：仅允许 3 种合法值（空 /sm/lg），无效值自动转为空，避免异常尺寸破坏布局。color：通过正则表达式验证格式（仅支持十六进制、rgb、rgba），格式不合法时不生成style属性，避免样式错乱。基础徽章成功警告尺寸徽章小尺寸大尺寸扩展颜色橙色青色紫色边框样式边框大边框紫色自定义颜色自定义红自定义轮廓已完成待处理通知推荐热门小徽章大徽章边框样式自定义边框色VIP会员自定义按钮简介短代码效果自定义按钮支持多种颜色、尺寸和样式，可作为操作入口或链接跳转载体。提供实心 / 轮廓两种基础样式，支持全宽显示（块级按钮）和指定链接打开方式，适合各类交互场景。短代码参数参数名说明可选值/格式默认值示例url按钮链接地址合法URL（如https://example.com或#）#（空链接）无type按钮样式类型（颜色/边框）- 纯色：default、blue、red、orange、yellow、green、cyan、purple- 边框：outline-blue、outline-red等带outline-前缀的颜色defaultsize按钮尺寸sm（小尺寸）、lg（大尺寸）空（默认尺寸）[button size="lg"]target链接打开方式_self（当前窗口）、_blank（新窗口）、_parent（父窗口）、_top（顶层窗口）_self[button target="_blank"]block是否块级显示（占满父容器宽度）true（是）、false（否）false[button block="true"]rel链接关系属性（如nofollow）合法HTML rel属性值（如nofollow、noopener）空[button rel="nofollow"]内容按钮显示文本（短代码包裹的内容）任意文本/HTML片段按钮[button]点击下载短代码使用方法## 基础颜色按钮（默认尺寸） [button url="https://example.com" type="red"]红色按钮（var(--color-red-500)）[/button] [button url="https://example.com" type="orange"]橙色按钮（var(--color-orange-500)）[/button] [button url="https://example.com" type="yellow"]黄色按钮（var(--color-yellow-500)）[/button] [button url="https://example.com" type="green"]绿色按钮（var(--color-green-500)）[/button] [button url="https://example.com" type="cyan"]青色按钮（var(--color-cyan-500)）[/button] [button url="https://example.com" type="blue"]蓝色按钮（var(--color-blue-500)）[/button] [button url="https://example.com" type="purple"]紫色按钮（var(--color-purple-500)）[/button] ## 轮廓按钮（默认尺寸） [button url="https://example.com" type="outline-red"]红色轮廓（var(--color-red-500)）[/button] [button url="https://example.com" type="outline-orange"]橙色轮廓（var(--color-orange-500)）[/button] [button url="https://example.com" type="outline-yellow"]黄色轮廓（var(--color-yellow-600)）[/button] [button url="https://example.com" type="outline-green"]绿色轮廓（var(--color-green-500)）[/button] [button url="https://example.com" type="outline-cyan"]青色轮廓（var(--color-cyan-500)）[/button] [button url="https://example.com" type="outline-blue"]蓝色轮廓（var(--color-blue-500)）[/button] [button url="https://example.com" type="outline-purple"]紫色轮廓（var(--color-purple-500)）[/button] ## 小尺寸按钮 [button url="https://example.com" type="red" size="sm"]红色小按钮[/button] [button url="https://example.com" type="outline-orange" size="sm"]橙色小轮廓按钮[/button] ## 大尺寸按钮 [button url="https://example.com" type="green" size="lg"]绿色大按钮[/button] [button url="https://example.com" type="outline-cyan" size="lg"]青色大轮廓按钮[/button] ## 块级全宽按钮 [button type="blue" block="true"]蓝色块级按钮[/button] [button type="outline-purple" block="true"]紫色块级轮廓按钮[/button] ## 带链接的按钮 [button url="https://example.com" type="yellow" target="_blank"]新窗口打开[/button] [button url="#top" type="outline-green"]返回顶部[/button]基础颜色按钮（默认尺寸）红色按钮（var(--color-red-500)）橙色按钮（var(--color-orange-500)）黄色按钮（var(--color-yellow-500)）绿色按钮（var(--color-green-500)）青色按钮（var(--color-cyan-500)）蓝色按钮（var(--color-blue-500)）紫色按钮（var(--color-purple-500)）轮廓按钮（默认尺寸）红色轮廓（var(--color-red-500)）橙色轮廓（var(--color-orange-500)）黄色轮廓（var(--color-yellow-600)）绿色轮廓（var(--color-green-500)）青色轮廓（var(--color-cyan-500)）蓝色轮廓（var(--color-blue-500)）紫色轮廓（var(--color-purple-500)）小尺寸按钮红色小按钮橙色小轮廓按钮大尺寸按钮绿色大按钮青色大轮廓按钮块级全宽按钮蓝色块级按钮紫色块级轮廓按钮带链接的按钮新窗口打开返回顶部进度条简介短代码效果进度条用于展示任务完成进度或加载状态，支持多种样式（实心 / 条纹 / 动画条纹）和状态颜色（成功 / 警告 / 危险 / 信息）。可添加标题文本说明进度含义，适合数据加载、任务完成度等场景。默认进度条：[progress percent="60"] 带标题：[progress percent="75" title="完成度"] 成功样式：[progress percent="85" type="success"] 警告样式：[progress percent="90" type="warning"] 危险样式：[progress percent="95" type="danger"] 信息样式：[progress percent="50" type="info"] 条纹样式：[progress percent="65" striped="true"] 动画条纹：[progress percent="70" striped="true" animated="true"]默认进度条： 60% 带标题：完成度 (75%) 75% 成功样式： 85% 警告样式： 90% 危险样式： 95% 信息样式： 50% 条纹样式： 65% 动画条纹： 70% 音频简介短代码效果音频短代码用于嵌入音频文件，支持显示歌曲名称、艺术家信息和自定义封面图。提供标准音频控制界面（播放 / 暂停 / 进度条 / 音量），适合播客、音乐片段等音频内容展示。短代码参数参数名必选含义与用途示例值默认值url是音频文件的播放链接（核心参数，为空时不生成播放器，仅返回空字符串）https://example.com/audio/song.mp3空（必填）name否音频的名称（显示在播放器上，用于标识音频内容）《晴天》、访谈录音第1段未知音频artist否音频的作者 / 创作者（显示在播放器上，补充音频信息）周杰伦、产品部团队未知艺术家cover否音频的封面图片链接（显示在播放器左侧，提升视觉效果，支持 JPG/PNG 等格式）https://example.com/covers/song.jpg空（不显示封面）短代码使用方法[audio name="歌曲名称" artist="作者" url="音频链接" cover="音频封面链接"]这里就不展示了视频简介短代码效果视频短代码用于生成视频播放器组件，基于 DPlayer（一款功能丰富的网页视频播放器库）实现，可在页面中嵌入支持自定义尺寸、封面、播放策略的视频播放功能短代码参数参数名必选含义与用途示例值默认值src是视频文件的播放链接（核心参数，为空时返回错误提示，不生成有效播放器）https://example.com/video/demo.mp4空（必填）poster否视频封面图片链接（视频未播放时显示，提升视觉体验，支持 JPG/PNG 等格式）https://example.com/posters/demo.jpg空（不显示封面）width否视频播放器宽度（支持百分比、像素值，控制播放器在页面中的尺寸）80%、1200px100%（全屏宽度）autoplay否是否自动播放（布尔值字符串，需符合浏览器自动播放策略，如静音自动播放）true、falsefalseloop否是否循环播放（视频播放结束后自动重新开始）true、falsefalsepreload否视频预加载策略（控制页面加载时视频资源的加载方式）auto（自动）、none（不预加载）、metadata（仅加载元数据）autolang否播放器界面语言（控制按钮文本、提示信息等语言显示）zh-cn（中文）、en（英文）zh-cnmutex否是否互斥播放（同一页面多个视频播放器，仅允许一个播放，其他自动暂停）true、falsetruetheme否播放器主题颜色（控制进度条、按钮等交互元素的颜色）#ff4400、rgba(51,153,255,1)#b7daff（淡蓝色）hotkey否是否启用热键（支持键盘控制，如空格暂停 / 播放、方向键快进 / 快退）true、falsetruevolume否默认音量大小（0-1 之间的数值，0 为静音，1 为最大音量）0.5、0.80.7（70% 音量）短代码使用方法基础示例[video src="https://example.com/video/intro.mp4"]解析逻辑：使用默认配置（100% 宽度、不自动播放、淡蓝色主题等），不显示封面。完整示例（自定义常用参数）[collapse title="自定义标题" open="true"] 内容 [/collapse]0这里就不展示了，可自己实际应用

Typecho buyu 单栏主题

2025-10-17T13:20:00+00:00

Typecho buyu 单栏主题一款简洁的的 Typecho 单栏主题用户交流群：点击加入主题介绍页：点击查看主题短代码使用手册：点击查看主题宗旨：简洁、简洁、还是简洁！特点和功能响应式设计（PC / 移动完美兼容）内置文章浏览量统计、点赞、分享功能。支持任务列表、视频、音频、折叠面板等短代码。完善的评论系统，包括评论表情、敏感词过滤、字数限制、博主标识等。良好的 SEO 优化，以及语义化标签使用。提供相册独立页面、归档页面、友链页面等自定义页面模板。支持主题设置备份与还原、自定义 CSS/JS、ICP 备案号展示等扩展功能。全站变量名、类名统一规范，方便二开与扩展如何使用主题安装下载主题：访问【github代码仓库】下载最新的代码文件。buyu-1.3.1 1.68MB上传并解压：将下载好的压缩包上传至 Typecho 程序的 /usr/themes/ 目录，然后解压。启用主题：进入 Typecho 后台，依次选择「控制台」>「外观」>「buyu」，点击「启用」按钮。友情链接插件安装下载插件：访问【Links 插件】下载最新版本的插件压缩包。上传并解压：将下载好的压缩包上传至 Typecho 程序的 /usr/plugins/ 目录，然后解压。启用插件：进入 Typecho 后台，依次选择「控制台」>「插件」>「Links」，点击「启用」按钮。IP 属地本地数据库配置下载数据库：访问【qqwry.dat】下载 IP 属地本地数据库压缩包。解压并放置：将下载好的压缩包解压为 qqwry.dat 文件，并将其放置在 Typecho 程序的根目录。常见问题请确保您符合使用条件：typecho版本：建议1.2.1php版本：8.0-8.4打开主题后页面空白：检查插件冲突：进入 Typecho 后台的「插件」页面，依次禁用插件，然后刷新页面，排查是哪个插件导致的冲突。检查静态资源引用：检查主题文件中是否存在重复引用的静态资源，如 CSS、JS 文件等，删除重复引用的部分。如何使用相册独立页面？1.3.1版本相册独立页面去除了！！仅限1.3.0版本使用！！在后台创建相册页面并添加图片数据登录 Typecho 后台，进入「管理」→「新建页面」在右侧「页面属性」中选择模板为「相册」滚动到页面底部「自定义字段」，点击「自定义相册」：字段值：填写 JSON 格式的图片数据，示例：[ { "url": "图片链接", "alt": "风景照片1", "title": "卡片标题" }, { "url": "图片链接", "alt": "风景照片2", "title": "卡片标题" }, { "url": "图片链接", "alt": "风景照片3", "title": "卡片标题" } ]如何使用短代码？可以查看https://zhuxu.asia/archives/147/更新日志[1.3.1] 更新内容如下适配：PHP 8.0-8.4 环境新增：文章置顶新增：wap和pc端背景图设置新增：浅色深色模式切换新增：多种短代码（tab框、附件下载卡片、徽章、自定义按钮、进度条）新增：文章底部版权开关新增：文章打赏新增：文章列表的基础信息增加了图标新增：评论昵称需包含中文功能（不满足时则进入待审核）调整：归档页样式调整：WAP 端导航栏样式，并增加了浅色深色切换按钮重构：主题设置表单优化：文章摘要截取优化：评论通知增加了待审核及当检测到是游客回复游客的场景时，单独向站长邮箱发送通知优化：文章点赞、分享、视频音频短代码实现逻辑优化：公共css类增加了更多的常用类、调整了全局结构优化：很多很多的细节修复：使用php8.2版本报错问题修复：自定义Gravatar头像源地址设置失效的问题修复：移动端侧边栏分类展开后点击空白处内容自动消失展开的下拉列表也不关闭的问题修复：部分环境下点赞、分享功能失效的问题[1.3.0] 更新内容如下新增：全新的桌面端和移动端导航栏样式新增：相册独立页面新增：自定义 Gravatar 头像源地址新增：评论表情增加了 14 个颜文字和 44 个Emoji新增：tab标签栏短代码优化：全局ui样式改为卡片样式优化：博主评论的标签显示并增加了用户等级标签显示优化：附件页面和作者页面直接重定向到404页面优化：首页和分类页底部分页按钮样式优化：适配高分辨率显示器显示优化：使用语义化时间展示文章发布时间优化：完善了核心代码的注释，方便修改修复：评论回复邮件无法发送的问题修复：文章点赞逻辑报错的问题修复：某些不是什么大问题的bug移除：IE 浏览器兼容相关代码[1.2.9] 更新内容如下新增：文章版权信息提示新增：评论内容输入框下方字数/可输入多少字/超出多少个字提示新增：评论超过主题设置的字数限制则对发送评论按钮禁用新增：评论敏感词的操作可设为无动作、标记为待审核、评论失败三种模式优化：点赞按钮与分享按钮样式优化：自定义静态资源链接获取代码优化：点击发送评论按钮若评论失败则返回详细错误信息优化：视频播放器支持了更多参数修复：图片灯箱不显示图片的问题修复：图片懒加载失效的问题修复：代码块中填写短代码会被解析的问题[1.2.8] 更新内容如下新增：主题设置评论敏感词过滤、限制用户评论最大字数、评论需包含中文功能新增：文章点赞、分享新增：任务列表短代码新增：全局消息提示新增：评论通知修复：主题设置初始化逻辑错误[1.2.7] 更新内容如下优化：文章密码保护输入框样式优化：进一步完善 CSS 未完成的变量替换[1.2.6] 更新内容如下新增：全新的主题设置样式新增：评论博主标识新增：主题设置自定义网站 Favicon 图标修复：评论回复按钮溢出，评论回复表情按钮样式错乱优化：替换了 CSS 硬编码的颜色、间距、字体大小等值，改为使用变量[1.2.5] 更新内容如下新增：视频播放器更改为 DPlayer 插件实现优化：全局圆角数值优化：略调全局ui样式优化：回到顶部按钮样式优化：评论样式优化：关闭全局评论时，不显示文章/页面的评论统计项修复：友链卡片文字溢出修复：自定义css代码失效的问题修复：自定义js代码失效的问题[1.2.4] 更新内容如下新增：视频/音频/折叠面板短代码新增：主题设置备份新增：站点图片logo设置优化：全局代码结构优化：首页文章列表样式优化：全新的归档页面样式优化：全新的 404 页面样式优化：文章折叠面板的动画体验优化：主题页脚样式/分页按钮样式修复：404页面相关css代码造成的布局错乱问题修复：修改了设置粗体文字后显示是紫色的问题[1.2.3] 更新内容如下新增：评论表情新增：未知bug[1.2.2] 更新内容如下微调：评论样式微调：首页文章列表样式新增：图片懒加载功能新增：图片灯箱功能新增：文章代码块增加了复制功能新增：首页文章列表、独立页面增加了文章阅读量优化：部分代码结构调整：文章、归档、友链页面样式[1.2.1] 更新内容如下优化：取消了侧边栏新增：底部icp备案号设置新增：底部公安联网备案号设置新增：主题设置全局评论开关闭按钮新增：友链页面新增：归档页面新增：文章编辑器字符统计新增：自定义css、自定义js、自定义底部栏内容、底部自定义内容优化：MD内容渲染样式鸣谢typechofancyboxMessage.jsAPlayerDPlayer开源许可MIT LicensePowered by typecho | Theme is buyu程序由不语（朱旭）开发并开源，欢迎参与贡献

计算机网络 - 概述

2025-06-18T03:02:00+00:00

计算机网络 - 概述网络的网络网络把主机连接起来，而互连网（internet）是把多种不同的网络连接起来，因此互连网是网络的网络。而互联网（Internet）是全球范围的互连网。 ISP互联网服务提供商 ISP 可以从互联网管理机构获得许多 IP 地址，同时拥有通信线路以及路由器等联网设备，个人或机构向 ISP 缴纳一定的费用就可以接入互联网。目前的互联网是一种多层次 ISP 结构，ISP 根据覆盖面积的大小分为第一层 ISP、区域 ISP 和接入 ISP。互联网交换点 IXP 允许两个 ISP 直接相连而不用经过第三个 ISP。主机之间的通信方式客户-服务器（C/S）：客户是服务的请求方，服务器是服务的提供方。对等（P2P）：不区分客户和服务器。电路交换与分组交换1. 电路交换电路交换用于电话通信系统，两个用户要通信之前需要建立一条专用的物理链路，并且在整个通信过程中始终占用该链路。由于通信的过程中不可能一直在使用传输线路，因此电路交换对线路的利用率很低，往往不到 10%。2. 分组交换每个分组都有首部和尾部，包含了源地址和目的地址等控制信息，在同一个传输线路上同时传输多个分组互相不会影响，因此在同一条传输线路上允许同时传输多个分组，也就是说分组交换不需要占用传输线路。在一个邮局通信系统中，邮局收到一份邮件之后，先存储下来，然后把相同目的地的邮件一起转发到下一个目的地，这个过程就是存储转发过程，分组交换也使用了存储转发过程。时延总时延 = 排队时延 + 处理时延 + 传输时延 + 传播时延 1. 排队时延分组在路由器的输入队列和输出队列中排队等待的时间，取决于网络当前的通信量。2. 处理时延主机或路由器收到分组时进行处理所需要的时间，例如分析首部、从分组中提取数据、进行差错检验或查找适当的路由等。3. 传输时延主机或路由器传输数据帧所需要的时间。其中 l 表示数据帧的长度，v 表示传输速率。4. 传播时延电磁波在信道中传播所需要花费的时间，电磁波传播的速度接近光速。其中 l 表示信道长度，v 表示电磁波在信道上的传播速度。计算机网络体系结构 1. 五层协议应用层：为特定应用程序提供数据传输服务，例如 HTTP、DNS 等协议。数据单位为报文。传输层：为进程提供通用数据传输服务。由于应用层协议很多，定义通用的传输层协议就可以支持不断增多的应用层协议。运输层包括两种协议：传输控制协议 TCP，提供面向连接、可靠的数据传输服务，数据单位为报文段；用户数据报协议 UDP，提供无连接、尽最大努力的数据传输服务，数据单位为用户数据报。TCP 主要提供完整性服务，UDP 主要提供及时性服务。网络层：为主机提供数据传输服务。而传输层协议是为主机中的进程提供数据传输服务。网络层把传输层传递下来的报文段或者用户数据报封装成分组。数据链路层：网络层针对的还是主机之间的数据传输服务，而主机之间可以有很多链路，链路层协议就是为同一链路的主机提供数据传输服务。数据链路层把网络层传下来的分组封装成帧。物理层：考虑的是怎样在传输媒体上传输数据比特流，而不是指具体的传输媒体。物理层的作用是尽可能屏蔽传输媒体和通信手段的差异，使数据链路层感觉不到这些差异。2. OSI其中表示层和会话层用途如下：表示层：数据压缩、加密以及数据描述，这使得应用程序不必关心在各台主机中数据内部格式不同的问题。会话层：建立及管理会话。五层协议没有表示层和会话层，而是将这些功能留给应用程序开发者处理。3. TCP/IP它只有四层，相当于五层协议中数据链路层和物理层合并为网络接口层。TCP/IP 体系结构不严格遵循 OSI 分层概念，应用层可能会直接使用 IP 层或者网络接口层。 4. 数据在各层之间的传递过程在向下的过程中，需要添加下层协议所需要的首部或者尾部，而在向上的过程中不断拆开首部和尾部。路由器只有下面三层协议，因为路由器位于网络核心中，不需要为进程或者应用程序提供服务，因此也就不需要传输层和应用层。

1Panel系列教程：使用 Docker 搭建 AList

2025-03-30T03:09:00+00:00

前言本文详细介绍如何使用 Docker 搭建 AList AList是一个支持多种存储的文件列表程序。本篇文章我将逐步讲解从拉取镜像、文件配置、通过 1Panel、Docker 部署到域名反向代理的全流程，帮助你快速搭建应用。环境准备我的安装环境操作系统：Debian12；服务器架构：x86_64；服务器CPU：4核；服务器内存：16GB；如果你还没有服务器欢迎通过以下优惠链接购买：腾讯云：https://curl.qcloud.com/Gio4BsMs筋斗云：https://portal.jindouyun.cn/recommend/zlpoAtGIbuN3织音云：https://www.zhiyinidc.com/aff/LLQNCNYO1.安装1Panel我这里使用的是Debian系统来演示操作。打开ssh终端，我这里使用的是xshell输入下方指令后回车执行curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh 执行成功后，控制台会打印面板访问信息，可通过浏览器访问 1Panel面板：http://目标服务器 IP 地址:目标端口/安全入口如果使用的是云服务器，请至安全组开放目标端口。ssh 登录 1Panel 服务器后，执行 1pctl user-info 命令可获取安全入口（entrance）2.基础环境准备2.1-安装Docker【1Panel面板已默认安装】确保系统已安装Docker和docker-compose工具。可通过以下命令检查：docker --version docker-compose --version若未安装，请参考官方文档安装Docker和docker-compose。可点击下方链接参考安装喔https://www.runoob.com/docker.../debian-docker-install.html注：可在1Panel-应用商店搜索alist点击安装即可一键安装哦。2.2-创建数据目录mkdir -p /etc/alist2.3-拉取Alist镜像docker pull xhofe/alist:latest2.4-Docker Compose部署在/etc/alist目录创建docker-compose.yml文件然后输入下方代码version: '3.4' services: alist: image: xhofe/alist:latest container_name: alist volumes: - '/etc/alist:/opt/alist/data' ports: - '5244:5244' environment: - PUID=0 - PGID=0 - UMASK=022 - TZ=Asia/Shanghai restart: unless-stopped 2.5-启动服务在/etc/alist目录打开终端输入下方指令即可启动服务docker-compose up -d 3.查看管理员信息随机生成一个密码docker exec -it alist ./alist admin random手动设置一个密码,NEW_PASSWORD是指你需要设置的密码docker exec -it alist ./alist admin set NEW_PASSWORD4.访问信息在防火墙放行5244端口然后访问如下地址，服务器ip自行填写http://服务器ip:5244输入3.查看管理员信息生成的账号密码即可登录4.反向代理如果你想使用域名访问，那么请接着继续跟着操作在1Panel面板左侧边栏点击网站-网站-创建选择反向代理主域名处填写你要绑定的域名代理地址填写127.0.0.1:5244到这里就大功告成了！访问你绑定的域名即可访问网站了！5.如何更新Alist？在终端输入下方代码docker-compose pull docker-compose up -d公众号新开了个公众号，叫《不语技栈》主要用于分享学习笔记，资源等。有兴趣的可以扫描下方二维码关注公众号喔。

基于 ThinkPHP8 开发的 CMS 博客系统

2024-02-01T12:32:00+00:00

基于 ThinkPHP8 开发的 CMS 博客系统，涵盖核心功能模块、技术架构设计、性能优化、安全防护等多个维度，以下是具体的关键元素清单：一、核心功能模块1. 内容管理系统（CMS 核心）文章管理：支持独立开发的Markdown编辑器进行文章撰写、编辑、管理、草稿箱、定时发布、版本回溯、置顶功能。栏目与分类：多级栏目嵌套、自定义排序、栏目权限控制（如部分栏目仅特定用户可见）。标签与专题：文章标签关联、专题聚合（将相关文章归类为专题）。媒体资源管理：图片/附件上传（支持本地/云存储）、裁剪压缩、水印、资源库分类。评论系统：嵌套评论、评论审核、反垃圾评论（关键词过滤）、评论通知。2. 用户与权限系统多角色管理：超级管理员、编辑、作者、普通用户、VIP 会员等角色划分。会员体系：注册/登录（支持第三方登录如QQ、微信、gitee、github等）、个人中心、积分/余额/等级、会员系统。权限控制：基于 RBAC 模型，细粒度控制菜单、按钮、接口的访问权限（如仅管理员可删除文章）。3. 商业化功能付费订阅：会员套餐配置（月度/年度）、支付集成（微信/支付宝）、订阅到期提醒。内容付费：部分文章设置付费阅读、打赏功能、广告位管理（支持第三方广告联盟）。订单管理：订阅订单、消费记录、退款处理、发票管理。4. 交互与社交功能用户互动：文章点赞/收藏、分享（微信/QQ等平台）、用户投稿审核。消息通知：系统公告、评论回复通知、订阅到期提醒（站内信+邮件）。社交集成：微信公众号关联（内容同步）、QQ/微博登录、内容一键分享。5. 数据与分析统计面板：访问量（PV/UV）、热门文章、用户增长、收入统计等可视化数据。用户行为分析：文章阅读时长、点击热力图、搜索关键词分析。SEO 工具：自定义标题/关键词/描述、自动生成 sitemap、伪静态链接、301 重定向。二、技术架构设计1. 模块化架构按功能拆分模块（如 app/cms、app/user、app/pay、app/api），通过服务类（Service）封装核心逻辑。示例目录结构：app/ ├── cms/ # 内容管理模块（文章、栏目、评论） ├── user/ # 用户与权限模块 ├── pay/ # 支付与订单模块 ├── api/ # 接口模块（供前端/第三方调用） ├── common/ # 公共服务（工具类、常量、异常处理） └── admin/ # 后台管理模块2. API 接口层设计 RESTful 风格 API，支持所有功能的接口调用（供前端/移动端/小程序使用）。接口认证：JWT 令牌验证、接口限流、签名机制（防止篡改）。统一响应格式：{code: 200, msg: "success", data: []}。3. 主题与插件系统主题机制：支持前端主题切换（如默认主题、深色主题），通过模板路径动态加载。插件系统：基于钩子（Hook）机制，支持插件安装/卸载（如广告插件、SEO 插件），不侵入核心代码。4. 数据存储设计数据库：MySQL 为主，核心表设计：缓存：Redis 缓存热门数据（首页文章、用户信息）、Session 存储。搜索引擎：集成 Elasticsearch 实现全文搜索（优于 MySQL 模糊查询）。三、性能与安全优化1. 性能优化数据库优化：合理索引（文章标题、用户 ID）、分表（如评论表按时间分表）、读写分离。缓存策略：系统后台Redis缓存、文件缓存、MySQL缓存、页面静态化（首页/栏目页）、接口数据缓存、CDN 加速静态资源（图片/CSS/JS）。代码优化：避免 N+1 查询（用关联预加载）、减少不必要的数据库操作、使用队列处理耗时任务（如邮件发送）。2. 安全防护输入过滤：防 XSS（前端+后端过滤）、SQL 注入（使用模型查询而非原生 SQL）、CSRF 防护（表单令牌）。权限校验：接口访问权限检查、文件上传类型/大小限制、敏感操作日志记录（如登录/删除）。数据安全：用户密码加密存储（bcrypt 算法）、支付信息脱敏、定期数据库备份。安全设置：系统自带API KEY、QPS限制、JWT 认证（接口安全）。四、前端与交互体验后台管理端：基于 Vue/Element UI 开发，支持可视化编辑、拖拽排序、批量操作。前台展示端：响应式设计（适配 PC/移动端）、懒加载（图片/文章内容）、平滑滚动、夜间模式。编辑器集成：独立开发的Markdown编辑器，支持代码高亮、图片拖拽上传等基础功能。