前端静态站点【免费下载链接】minimal-mistakes:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.项目地址https://gitcode.com/gh_mirrors/mi/minimal-mistakes点击查看免费下载本篇技术指南围绕 minimal-mistakes 主题官方示例文章 docs/_posts/2013-01-09-markup-text-alignment.md 展开讲解在 Jekyll Kramdown 环境下如何通过内联属性列表Inline Attribute ListIAL为段落设置左对齐、居中、右对齐与两端对齐并结合主题自带的.text-*工具类与.align-*图片对齐类给出更工程化的排版方案。读完本文你将能在自己的博客与文档页面中直接复刻这套对齐语法并理解其底层 CSS 实现。原文档定位Markup 系列示例之一在 minimal-mistakes 仓库中docs/_posts/目录下存放着一组用于演示 Markdown 排版能力的示例文章文件名以markup-前缀标识。2013-01-09-markup-text-alignment.md正是其中专门演示文本对齐的一篇Front Matter 中声明了categories: Markuptags: alignment, content, css, markup方便按标签归档检索正文依次展示五种段落形态默认不指定对齐、左对齐、居中对齐、右对齐、两端对齐justify每段示例下方紧跟一行 Kramdown 属性列表语法如{: styletext-align: left;}这就是文本对齐的核心开关。该文件本身不含 JS 或 Sass它的价值在于给出了一套即抄即用的 Markdown 排版模板与本仓库中 docs/_posts/2013-01-10-markup-image-alignment.md图片对齐互为姊妹篇。语法基础Kramdown 属性列表IAL文本对齐之所以能写在 Markdown 里依赖的是 Kramdown 渲染器的属性列表特性在段落、标题、图片等块级元素之后紧跟一行{: ... }其中的内容会被解析为该元素的 HTML 属性。对应到本文场景写法是这是一段左对齐的文字。 {: styletext-align: left;}渲染后等价于p styletext-align: left;这是一段左对齐的文字。/p该特性在仓库文档 docs/_docs/15-utility-classes.md 中有明确说明使用 Kramdown 渲染器可以为文本和图片添加块级/内联属性从而在保持 Markdown 书写习惯的同时注入自定义样式。需要注意的是该语法能否生效取决于站点渲染器。仓库的演示站点在 docs/_config.yml 中配置为markdown: kramdown kramdown: input: GFM hard_wrap: false auto_ids: true entity_output: as_char toc_levels: 1..6markdown: kramdown保证 IAL 语法被正确解析input: GFM表示以 GitHub Flavored Markdown 方式解析正文兼容 GitHub 风格的表格、删除线等写法hard_wrap: false意味着普通换行不会强制生成br段落按空行划分——这决定了{: ... }必须紧跟在目标段落之后、且与段落之间不能有空行否则属性列表会脱离原段落。五种对齐方式完整示例以下是原文档的完整对齐演示段落文字原样保留可直接复制到自己的_posts目录中使用。默认对齐不设置任何属性### Default This is a paragraph. It should not have any alignment of any kind. It should just flow like you would normally expect. Nothing fancy. Just straight up text, free flowing, with love. Completely neutral and not picking a side or sitting on the fence. It just is. It just freaking is. It likes where it is. It does not feel compelled to pick a side. Leave him be. It will just be better that way. Trust me.不附加 IAL 时段落使用站点默认排版通常继承正文的text-align默认值大多数浏览器为left这也是绝大多数正文内容的预期形态。左对齐### Left Align This is a paragraph. It is left aligned. Because of this, it is a bit more liberal in its views. Its favorite color is green. Left align tends to be more eco-friendly, but it provides no concrete evidence that it really is. Even though it likes share the wealth evenly, it leaves the equal distribution up to justified alignment. {: styletext-align: left;}居中对齐### Center Align This is a paragraph. It is center aligned. Center is, but nature, a fence sitter. A flip flopper. It has a difficult time making up its mind. It wants to pick a side. Really, it does. It has the best intentions, but it tends to complicate matters more than help. The best you can do is try to win it over and hope for the best. I hear center align does take bribes. {: styletext-align: center;}右对齐### Right Align This is a paragraph. It is right aligned. It is a bit more conservative in its views. Its prefers to not be told what to do or how to do it. Right align totally owns a slew of guns and loves to head to the range for some practice. Which is cool and all. I mean, its a pretty good shot from at least four or five football fields away. Dead on. So boss. {: styletext-align: right;}两端对齐Justify### Justify Align This is a paragraph. It is justify aligned. It gets really mad when people associate it with Justin Timberlake. Typically, justified is pretty straight laced. It likes everything to be in its place and not all cattywampus like the rest of the aligns. I am not saying that makes it better than the rest of the aligns, but it does tend to put off more of an elitist attitude. {: styletext-align: justify;}需要说明的是text-align: justify会让浏览器拉伸词间距使文本两端齐平对中文与长英文段落效果明显但对很短的段落或行末单词可能产生较大空隙使用时建议结合实际内容判断是否美观。主题内置工具类.text-*的推荐做法原文档用内联style属性实现对齐而 minimal-mistakes 主题本身还提供了一组语义更清晰的工具类在 _sass/minimal-mistakes/_utilities.scss 中有源码实现$text-alignments: left, right, start, end, center, justify; each $alignment in $text-alignments { .text-#{$alignment} { text-align: $alignment; } } .text-nowrap { white-space: nowrap; }从源码结构看主题通过 Sass 循环为六种取值left、right、start、end、center、justify生成了对应的.text-left、.text-right、.text-start、.text-end、.text-center、.text-justify类另附.text-nowrap禁止换行。对应的 Kramdown 写法见 docs/_docs/15-utility-classes.mdLeft aligned text {: .text-left}Center aligned text. {: .text-center}Right aligned text. {: .text-right}Justified text. {: .text-justify}与内联style相比.text-*类的优势在于样式与内容解耦主题换肤如 skins 目录 中的浅色/深色主题或全局调整对齐策略时只需改动 SCSS 一处支持逻辑方向start/end在dirrtl环境下会自动反转方向利于多语言站点可维护性类名自解释后续改版不必逐段修改内联样式。需要注意工具类只对块级元素生效{: .text-left }要放在段落或div等块容器之后对行内元素无效。延伸图片对齐.align-*类文本对齐常与图片排版搭配使用。同一份 _sass/minimal-mistakes/_utilities.scss 中定义了图片对齐类.align-left、.align-right、.align-center演示见 docs/_posts/2013-01-10-markup-image-alignment.mdimage-center{: .align-center}image-left{: .align-left} 其余段落文字会在图片右侧环绕。image-right{: .align-right}其 CSS 要点见 _sass/minimal-mistakes/_utilities.scss 第 144-171 行.align-left/.align-right在窄屏下先以块级元素水平居中进入$small断点后才启用float: left/right并配合margin实现文字环绕.align-center始终display: block; margin-inline: auto;水平居中。这套断点行为保证了移动端图片不会左右溢出与文本对齐类配合即可完成图文排版。使用注意与常见问题属性列表位置{: ... }必须紧跟目标段落之后且无空行中间插入空行会导致 Kramdown 将其当作独立段落样式失效。渲染器依赖IAL 语法是 Kramdown 特性。若站点使用 Redcarpet 或 CommonMark 等其他渲染器请改用 HTML 标签包裹如p styletext-align: center;或直接使用div 工具类。行内 vs 块级{: style...}紧跟段落时为块级属性若用于链接[文字](#){: .btn}则为行内属性语义不同不能混用。预览验证本地bundle exec jekyll serve后打开http://localhost:4000即可查看效果仓库演示站点的docs/目录本身就是一套完整示例含 docs/_config.yml 与 docs/_posts可作为对照样本。小结文本对齐在 minimal-mistakes 中有两条成熟路径原示例文章 docs/_posts/2013-01-09-markup-text-alignment.md 演示的{: styletext-align: X;}内联属性写法以及主题工具类.text-left/.text-center/.text-right/.text-justify辅以.text-start/.text-end/.text-nowrap。前者适合快速、一次性的排版微调后者更契合主题化、可维护的长期内容管理。结合 _sass/minimal-mistakes/_utilities.scss 的源码与 docs/_docs/15-utility-classes.md 的官方说明即可在自己的博客中稳定复现五种对齐效果并进一步扩展到图文混排场景。赞分享前端静态站点【免费下载链接】minimal-mistakes:triangular_ruler: Jekyll theme for building a personal site, blog, project documentation, or portfolio.项目地址https://gitcode.com/gh_mirrors/mi/minimal-mistakes点击查看免费下载相关推荐minimal-mistakes 文本对齐指南Kramdown 内联样式与 .text-* 工具类全解析minimal mistakes 文本对齐指南Kramdown 内联样式与 .text 工具类全解析 本文以 minimal mistakes 主题仓库中的示前端静态站点Minimal Mistakes 集合归档页实战用 layout: collection 构建 Pets 文档列表Minimal Mistakes 集合归档页实战用 layout: collection 构建 Pets 文档列表 导读 本文以 Minimal Mistak前端静态站点铜钟音乐如何打造极致纯净的免费听歌体验铜钟音乐如何打造极致纯净的免费听歌体验 在音乐应用日益复杂的今天铜钟音乐Tonzhon以其 纯粹专注的音乐体验 和 零广告干扰的设计理念 为追求简单听前端音视频创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考