104 lines
34 KiB
HTML
104 lines
34 KiB
HTML
<!doctype html><head><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css></head><html lang=zh-CN><head><meta charset=utf-8><meta name=theme-color media="(prefers-color-scheme: light)" content="#f7f7f7"><meta name=theme-color media="(prefers-color-scheme: dark)" content="#1b1b1e"><meta name=mobile-web-app-capable content="yes"><meta name=apple-mobile-web-app-status-bar-style content="black-translucent"><meta name=viewport content="width=device-width,user-scalable=no,initial-scale=1,shrink-to-fit=no,viewport-fit=cover"><meta property="og:url" content="https://geekifan.github.io/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/"><meta property="og:site_name" content="Chirpy"><meta property="og:title" content="文本和排版"><meta property="og:description" content="文本、排版、数学公式、图表、流程图、图片、视频等示例。"><meta property="og:locale" content="zh_CN"><meta property="og:type" content="article"><meta property="article:section" content="post"><meta property="article:published_time" content="2019-08-08T11:33:00+08:00"><meta property="article:modified_time" content="2019-08-08T11:33:00+08:00"><meta property="article:tag" content="排版"><meta name=twitter:card content="summary"><meta name=twitter:title content="文本和排版"><meta name=twitter:description content="文本、排版、数学公式、图表、流程图、图片、视频等示例。"><meta itemprop=name content="文本和排版"><meta itemprop=description content="文本、排版、数学公式、图表、流程图、图片、视频等示例。"><meta itemprop=datePublished content="2019-08-08T11:33:00+08:00"><meta itemprop=dateModified content="2019-08-08T11:33:00+08:00"><meta itemprop=wordCount content="940"><meta itemprop=keywords content="排版"><title>文本和排版 |
|
||
Chirpy</title><link rel=apple-touch-icon sizes=180x180 href=/chirpy-starter/img/favicons/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/chirpy-starter/img/favicons/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/chirpy-starter/img/favicons/favicon-16x16.png><link rel="shortcut icon" href=/chirpy-starter/img/favicons/favicon.ico><meta name=apple-mobile-web-app-title content="Chirpy"><meta name=application-name content="Chirpy"><meta name=msapplication-TileColor content="#da532c"><meta name=msapplication-config content="/chirpy-starter/img/favicons/browserconfig.xml"><meta name=theme-color content="#ffffff"><link rel=preconnect href=https://fonts.googleapis.com><link rel=dns-prefetch href=https://fonts.googleapis.com><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=dns-prefetch href=https://fonts.gstatic.com><link rel=preconnect href=https://cdn.jsdelivr.net><link rel=dns-prefetch href=https://cdn.jsdelivr.net><link rel=stylesheet href=https://geekifan.github.io/chirpy-starter/css/main.min.6135c0700b2b81f4338a5c119b7a78b2bd20208c6f27ae64a19d0ef65cba906c.css><link rel=stylesheet href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Source+Sans+Pro:wght@400;600;700;900&display=swap"><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.7.1/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.css><link rel=stylesheet href=/chirpy-starter/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css><script src=/chirpy-starter/js/modules/theme.js></script><script src=https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js></script><script src=https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/locale/zh-cn.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/relativeTime.js></script><script src=https://cdn.jsdelivr.net/npm/dayjs@1.11.13/plugin/localizedFormat.js></script><script src=https://cdn.jsdelivr.net/npm/tocbot@4.32.2/dist/tocbot.min.js></script><script defer src=/chirpy-starter/js/post.js></script><script src=/chirpy-starter/js/mathjax.min.d5a771863485b941b4157c0de2d0426f86b284e264501da1d8d9b2d5973488e0.js defer></script><script async src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=es6"></script><script id=MathJax-script src=https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-chtml.js defer></script></head><body><aside aria-label=Sidebar id=sidebar class="d-flex flex-column align-items-end"><header class=profile-wrapper><a href=/chirpy-starter/zh-cn/ id=avatar class=rounded-circle><img src=/chirpy-starter/img/commons/avatar.jpg width=112 height=112 alt=avatar onerror='this.style.display="none"'></a>
|
||
<a class="site-title d-block" href=/chirpy-starter/zh-cn/>Chirpy</a><p class="site-subtitle fst-italic mb-0">一个专注于文本的博客主题</p></header><nav class="flex-column flex-grow-1 w-100 ps-0"><ul class=nav><li class=nav-item><a href=/chirpy-starter/zh-cn/ class=nav-link><i class="fa-fw fas fa-house"></i>
|
||
<span>主页</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/categories/ class=nav-link><i class="fa-fw fas fa-stream"></i>
|
||
<span>分类</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/tags/ class=nav-link><i class="fa-fw fas fa-tags"></i>
|
||
<span>标签</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/archives/ class=nav-link><i class="fa-fw fas fa-archive"></i>
|
||
<span>归档</span></a></li><li class=nav-item><a href=/chirpy-starter/zh-cn/about/ class=nav-link><i class="fa-fw fas fa-info-circle"></i>
|
||
<span>关于</span></a></li><li class="nav-item mt-4"><a class="nav-link no-hover"><i class="fa-fw fas fa-language"></i><div class=lang-dropdown><select class=lang-select onchange="location=this.value"><option value=https://geekifan.github.io/chirpy-starter/zh-cn/ selected>中文</option><option value=https://geekifan.github.io/chirpy-starter/en/>English</option></select></div></a></li></ul></nav><div class="sidebar-bottom d-flex flex-wrap align-items-center w-100"><button type=button class="btn btn-link nav-link" aria-label="Switch Mode" id=mode-toggle>
|
||
<i class="fas fa-adjust"></i>
|
||
</button>
|
||
<span class=icon-border></span>
|
||
<a href=https://github.com/yourusername aria-label=github target=_blank rel="noopener noreferrer"><i class="fab fa-github"></i>
|
||
</a><a href=https://twitter.com/yourhandle aria-label=twitter target=_blank rel="noopener noreferrer"><i class="fab fa-twitter"></i>
|
||
</a><a href=mailto:your.email@example.com aria-label=email target=_blank rel="noopener noreferrer"><i class="fas fa-envelope"></i>
|
||
</a><a href=https://geekifan.github.io/chirpy-starter/zh-cn/index.xml aria-label=rss><i class="fas fa-rss"></i></a></div></aside><div id=main-wrapper class="d-flex justify-content-center"><div class="container d-flex flex-column px-xxl-5"><header id=topbar-wrapper class=flex-shrink-0 aria-label="Top Bar"><div id=topbar class="d-flex align-items-center justify-content-between px-lg-3 h-100"><nav id=breadcrumb aria-label=Breadcrumb><span><a href=/chirpy-starter/zh-cn/>首页</a>
|
||
</span><span>文本和排版</span></nav><button type=button id=sidebar-trigger class="btn btn-link" aria-label=Sidebar>
|
||
<i class="fas fa-bars fa-fw"></i></button><div id=topbar-title>文本和排版</div><button type=button id=search-trigger class="btn btn-link" aria-label=Search>
|
||
<i class="fas fa-search fa-fw"></i>
|
||
</button>
|
||
<search id=search class="align-items-center ms-3 ms-lg-0"><i class="fas fa-search fa-fw"></i>
|
||
<input class=form-control id=search-input type=search aria-label=search autocomplete=off placeholder=搜索...>
|
||
</search><button type=button class="btn btn-link text-decoration-none" id=search-cancel>取消</button></div></header><div class="row flex-grow-1"><main aria-label="Main Content" class="col-12 col-lg-11 col-xl-9 px-md-4"><article class=px-1 data-toc=true><header><h1 data-toc-skip>文本和排版</h1><p class="post-desc fw-light mb-4">文本、排版、数学公式、图表、流程图、图片、视频等示例。</p><div class="post-meta text-muted"><span>发表于
|
||
<time data-ts=1565235180 data-df=YYYY/MM/DD data-bs-toggle=tooltip data-bs-placement=bottom>%Y/%m/%d</time></span><div class="mt-3 mb-3"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devices-mockup.png class=preview-img alt="Chirpy 主题在多个设备上的响应式渲染。" w=1200 h=630 lqip=data:image/webp;base64,UklGRpoAAABXRUJQVlA4WAoAAAAQAAAADwAABwAAQUxQSDIAAAARL0AmbZurmr57yyIiqE8oiG0bejIYEQTgqiDA9vqnsUSI6H+oAERp2HZ65qP/VIAWAFZQOCBCAAAA8AEAnQEqEAAIAAVAfCWkAALp8sF8rgRgAP7o9FDvMCkMde9PK7euH5M1m6VWoDXf2FkP3BqV0ZYbO6NA/VFIAAAA><figcaption class="text-center pt-2 pb-2">Chirpy 主题在多个设备上的响应式渲染。</figcaption></div><div class="d-flex justify-content-between"><span>作者
|
||
<em><a href=https://github.com/geekifan>一凡</a></em></span><div><span class=readtime data-bs-toggle=tooltip data-bs-placement=bottom title="1173 字"><em>6 分钟</em> 阅读</span></div></div></div></header><div id=toc-bar class="d-flex align-items-center justify-content-between invisible"><span class="label text-truncate">文本和排版</span>
|
||
<button type=button class="toc-trigger btn me-1">
|
||
<i class="fa-solid fa-list-ul fa-fw"></i></button></div><button id=toc-solo-trigger type=button class="toc-trigger btn btn-outline-secondary btn-sm">
|
||
<span class="label ps-2 pe-1">文章内容</span>
|
||
<i class="fa-solid fa-angle-right fa-fw"></i>
|
||
</button>
|
||
<dialog id=toc-popup class=p-0><div class="header d-flex flex-row align-items-center justify-content-between"><div class="label text-truncate py-2 ms-4">文本和排版</div><button id=toc-popup-close type=button class="btn mx-1 my-1 opacity-75">
|
||
<i class="fas fa-close"></i></button></div><div id=toc-popup-content class="px-4 py-3 pb-4"><nav id=TableOfContents><ul><li><a href=#标题>标题</a></li></ul><ul><li><a href=#h2--标题>H2 — 标题</a><ul><li><a href=#h3--标题>H3 — 标题</a></li></ul></li><li><a href=#段落>段落</a></li><li><a href=#列表>列表</a><ul><li><a href=#有序列表>有序列表</a></li><li><a href=#无序列表>无序列表</a></li><li><a href=#待办列表>待办列表</a></li><li><a href=#描述列表>描述列表</a></li></ul></li><li><a href=#引用块>引用块</a></li><li><a href=#提示框>提示框</a></li><li><a href=#表格>表格</a></li><li><a href=#链接>链接</a></li><li><a href=#脚注>脚注</a></li><li><a href=#内联代码>内联代码</a></li><li><a href=#文件路径>文件路径</a></li><li><a href=#代码块>代码块</a><ul><li><a href=#通用>通用</a></li><li><a href=#特定语言>特定语言</a></li><li><a href=#特定文件名>特定文件名</a></li></ul></li><li><a href=#数学公式>数学公式</a></li><li><a href=#图片>图片</a><ul><li><a href=#默认带标题>默认（带标题）</a></li><li><a href=#左对齐>左对齐</a></li><li><a href=#向左浮动>向左浮动</a></li><li><a href=#向右浮动>向右浮动</a></li><li><a href=#暗亮模式--阴影>暗/亮模式 & 阴影</a></li></ul></li><li><a href=#视频>视频</a></li><li><a href=#反向脚注>反向脚注</a></li></ul></nav></div></dialog><div class=content><h2 id=标题 id=标题><span class=me-2>标题</span>
|
||
<a href=#%e6%a0%87%e9%a2%98 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h1 id=h1--标题 class=mt-4 mb-0 data-toc-skip=true id=h1--标题>H1 — 标题</h1><h2 id=h2--标题 class=mt-4 mb-0 data-toc-skip=true id=h2--标题>H2 — 标题</h2><h3 id=h3--标题 class=mt-4 mb-0 data-toc-skip=true id=h3--标题>H3 — 标题</h3><h4 id=h4--标题 class=mt-4 data-toc-skip=true id=h4--标题>H4 — 标题</h4><h2 id=段落 id=段落><span class=me-2>段落</span>
|
||
<a href=#%e6%ae%b5%e8%90%bd class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>这是一个段落示例。在这里，我们可以看到段落是如何在 Markdown 中呈现的。段落是由一个或多个连续的文本行组成，它们之间用一个或多个空行分隔。正常的段落不应该用空格或制表符缩进。这样可以保持文档的整洁和一致性。文本排版是网页设计和内容创作中的重要元素，良好的排版可以提高可读性和美观度。</p><h2 id=列表 id=列表><span class=me-2>列表</span>
|
||
<a href=#%e5%88%97%e8%a1%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=有序列表 id=有序列表><span class=me-2>有序列表</span>
|
||
<a href=#%e6%9c%89%e5%ba%8f%e5%88%97%e8%a1%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ol><li>第一点</li><li>第二点</li><li>第三点</li></ol><h3 id=无序列表 id=无序列表><span class=me-2>无序列表</span>
|
||
<a href=#%e6%97%a0%e5%ba%8f%e5%88%97%e8%a1%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul><li>章节<ul><li>节<ul><li>段落</li></ul></li></ul></li></ul><h3 id=待办列表 id=待办列表><span class=me-2>待办列表</span>
|
||
<a href=#%e5%be%85%e5%8a%9e%e5%88%97%e8%a1%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><ul class=task-list><li class=task-list-item><i class="far fa-circle fa-fw"></i> 任务<ul class=task-list><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> 步骤 1</li><li class=task-list-item><i class="fas fa-check-circle fa-fw checked"></i> 步骤 2</li><li class=task-list-item><i class="far fa-circle fa-fw"></i> 步骤 3</li></ul></li></ul><h3 id=描述列表 id=描述列表><span class=me-2>描述列表</span>
|
||
<a href=#%e6%8f%8f%e8%bf%b0%e5%88%97%e8%a1%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><dl><dt>太阳</dt><dd>地球绕其运行的恒星</dd><dt>月亮</dt><dd>地球的天然卫星，通过反射太阳光可见</dd></dl><h2 id=引用块 id=引用块><span class=me-2>引用块</span>
|
||
<a href=#%e5%bc%95%e7%94%a8%e5%9d%97 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote><p>这行显示 <em>引用块</em>。</p></blockquote><h2 id=提示框 id=提示框><span class=me-2>提示框</span>
|
||
<a href=#%e6%8f%90%e7%a4%ba%e6%a1%86 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><blockquote class=prompt-tip><p>这是一个显示 <code>tip</code> 类型提示的例子。</p></blockquote><blockquote class=prompt-info><p>这是一个显示 <code>info</code> 类型提示的例子。</p></blockquote><blockquote class=prompt-warning><p>这是一个显示 <code>warning</code> 类型提示的例子。</p></blockquote><blockquote class=prompt-danger><p>这是一个显示 <code>danger</code> 类型提示的例子。</p></blockquote><h2 id=表格 id=表格><span class=me-2>表格</span>
|
||
<a href=#%e8%a1%a8%e6%a0%bc class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=table-wrapper><table><thead><tr><th style=text-align:left>公司</th><th style=text-align:left>联系人</th><th style=text-align:right>国家</th></tr></thead><tbody><tr><td style=text-align:left>Alfreds Futterkiste</td><td style=text-align:left>Maria Anders</td><td style=text-align:right>德国</td></tr><tr><td style=text-align:left>Island Trading</td><td style=text-align:left>Helen Bennett</td><td style=text-align:right>英国</td></tr><tr><td style=text-align:left>Magazzini Alimentari Riuniti</td><td style=text-align:left>Giovanni Rovelli</td><td style=text-align:right>意大利</td></tr></tbody></table></div><h2 id=链接 id=链接><span class=me-2>链接</span>
|
||
<a href=#%e9%93%be%e6%8e%a5 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p><a href=http://127.0.0.1:4000>http://127.0.0.1:4000</a></p><h2 id=脚注 id=脚注><span class=me-2>脚注</span>
|
||
<a href=#%e8%84%9a%e6%b3%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>点击钩子将定位到脚注 <sup id=fnref:1><a href=#fn:1 class=footnote-ref role=doc-noteref>1</a></sup>，这里是另一个脚注 <sup id=fnref:2><a href=#fn:2 class=footnote-ref role=doc-noteref>2</a></sup>。</p><h2 id=内联代码 id=内联代码><span class=me-2>内联代码</span>
|
||
<a href=#%e5%86%85%e8%81%94%e4%bb%a3%e7%a0%81 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>这是 <code>内联代码</code> 的一个例子。</p><h2 id=文件路径 id=文件路径><span class=me-2>文件路径</span>
|
||
<a href=#%e6%96%87%e4%bb%b6%e8%b7%af%e5%be%84 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>这里是 <code class=filepath>/path/to/the/file.extend</code>。</p><h2 id=代码块 id=代码块><span class=me-2>代码块</span>
|
||
<a href=#%e4%bb%a3%e7%a0%81%e5%9d%97 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=通用 id=通用><span class=me-2>通用</span>
|
||
<a href=#%e9%80%9a%e7%94%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Text><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-text data-lang=text><span class=line><span class=cl>这是一个通用代码片段，没有语法高亮和行号。</span></span></code></pre></td></tr></table></div></div></div><h3 id=特定语言 id=特定语言><span class=me-2>特定语言</span>
|
||
<a href=#%e7%89%b9%e5%ae%9a%e8%af%ad%e8%a8%80 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=Shell><i class="fas fa-code fa-fw small"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||
</span><span class=lnt>2
|
||
</span><span class=lnt>3
|
||
</span><span class=lnt>4
|
||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash><span class=line><span class=cl><span class=k>if</span> <span class=o>[</span> <span class=nv>$?</span> -ne <span class=m>0</span> <span class=o>]</span><span class=p>;</span> <span class=k>then</span>
|
||
</span></span><span class=line><span class=cl> <span class=nb>echo</span> <span class=s2>"命令执行不成功。"</span><span class=p>;</span>
|
||
</span></span><span class=line><span class=cl> <span class=c1>#执行必要操作 / 退出</span>
|
||
</span></span><span class=line><span class=cl><span class=k>fi</span><span class=p>;</span></span></span></code></pre></td></tr></table></div></div></div><h3 id=特定文件名 id=特定文件名><span class=me-2>特定文件名</span>
|
||
<a href=#%e7%89%b9%e5%ae%9a%e6%96%87%e4%bb%b6%e5%90%8d class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><div class=code-block><div class=code-header><span data-label-text=_sass/jekyll-theme-chirpy.scss><i class="far fa-file-code fa-fw"></i></span> <button aria-label=copy data-title-succeed=Copied!><i class="far fa-clipboard"></i></button></div><div class=highlight file=_sass/jekyll-theme-chirpy.scss><div class=chroma><table class=lntable><tr><td class=lntd><pre tabindex=0 class=chroma><code><span class=lnt>1
|
||
</span><span class=lnt>2
|
||
</span><span class=lnt>3
|
||
</span></code></pre></td><td class=lntd><pre tabindex=0 class=chroma><code class=language-sass data-lang=sass><span class=line><span class=cl><span class=k>@import</span>
|
||
</span></span><span class=line><span class=cl> <span class=s2>"colors/light-typography"</span><span class=o>,</span>
|
||
</span></span><span class=line><span class=cl> <span class=s2>"colors/dark-typography"</span><span class=o>;</span></span></span></code></pre></td></tr></table></div></div></div><h2 id=数学公式 id=数学公式><span class=me-2>数学公式</span>
|
||
<a href=#%e6%95%b0%e5%ad%a6%e5%85%ac%e5%bc%8f class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><p>数学公式由 <a href=https://www.mathjax.org/><strong>MathJax</strong></a> 提供支持：</p><p>$$
|
||
\begin{equation}
|
||
\sum_{n=1}^\infty 1/n^2 = \frac{\pi^2}{6}
|
||
\label{eq:series}
|
||
\end{equation}
|
||
$$</p><p>我们可以引用公式如 \eqref{eq:series}。</p><p>当 $a \ne 0$ 时，$ax^2 + bx + c = 0$ 有两个解，它们是</p><p>$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$</p><h2 id=图片 id=图片><span class=me-2>图片</span>
|
||
<a href=#%e5%9b%be%e7%89%87 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><h3 id=默认带标题 id=默认带标题><span class=me-2>默认（带标题）</span>
|
||
<a href=#%e9%bb%98%e8%ae%a4%e5%b8%a6%e6%a0%87%e9%a2%98 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt=桌面视图 caption=全屏宽度和居中对齐 height=589 width=972>
|
||
</a><em>全屏宽度和居中对齐</em><h3 id=左对齐 id=左对齐><span class=me-2>左对齐</span>
|
||
<a href=#%e5%b7%a6%e5%af%b9%e9%bd%90 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-75 normal"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt=桌面视图 height=589 width=972></a><h3 id=向左浮动 id=向左浮动><span class=me-2>向左浮动</span>
|
||
<a href=#%e5%90%91%e5%b7%a6%e6%b5%ae%e5%8a%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 left"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt=桌面视图 height=589 width=972></a><p>这是一段文本示例，用于演示图片向左浮动时的效果。在这种情况下，文本会环绕在图片的右侧。这对于创建更具视觉吸引力的布局很有用，特别是当您想要文本和图片并排显示时。浮动元素是网页设计中常用的技术，可以有效利用空间并增强内容的可读性。</p><h3 id=向右浮动 id=向右浮动><span class=me-2>向右浮动</span>
|
||
<a href=#%e5%90%91%e5%8f%b3%e6%b5%ae%e5%8a%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><a href=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png class="popup img-link w-50 right"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/mockup.png alt=桌面视图 height=589 width=972></a><p>这是一段文本示例，用于演示图片向右浮动时的效果。在这种情况下，文本会环绕在图片的左侧。这种布局技术可以创建更加动态和有趣的页面设计。合理使用浮动可以使您的内容更加吸引人，并引导读者的视线在页面上流畅移动。记住，浮动元素需要适当的空间才能发挥最佳效果。</p><h3 id=暗亮模式--阴影 id=暗亮模式--阴影><span class=me-2>暗/亮模式 & 阴影</span>
|
||
<a href=#%e6%9a%97%e4%ba%ae%e6%a8%a1%e5%bc%8f--%e9%98%b4%e5%bd%b1 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h3><p>下面的图片将根据主题偏好切换暗/亮模式，注意它有阴影效果。</p><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png class="popup img-link light w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-light.png alt=仅亮模式 h=668 w=1212>
|
||
</a><a href=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png class="popup img-link dark w-75 shadow rounded-10"><img src=/chirpy-starter/post/2019-08-08-text-and-typography/devtools-dark.png alt=仅暗模式 h=668 w=1212></a><h2 id=视频 id=视频><span class=me-2>视频</span>
|
||
<a href=#%e8%a7%86%e9%a2%91 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><iframe class=embed-video loading=lazy src=https://www.youtube.com/embed/Balreaj8Yqs title="YouTube video player" frameborder=0 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><h2 id=反向脚注 id=反向脚注><span class=me-2>反向脚注</span>
|
||
<a href=#%e5%8f%8d%e5%90%91%e8%84%9a%e6%b3%a8 class="anchor text-muted"><i class="fas fa-hashtag"></i></a></h2><div class=footnotes role=doc-endnotes><hr><ol><li id=fn:1><p>脚注源 <a href=#fnref:1 class=footnote-backref role=doc-backlink>↩︎</a></p></li><li id=fn:2><p>第二个脚注源 <a href=#fnref:2 class=footnote-backref role=doc-backlink>↩︎</a></p></li></ol></div></div><div class="post-tail-wrapper text-muted"><div class="post-meta mb-3"><i class="far fa-folder-open fa-fw me-1"></i>
|
||
<a href=/zh-cn/categories/%E5%8D%9A%E5%AE%A2/>博客</a>
|
||
,
|
||
<a href=/zh-cn/categories/%E5%8D%9A%E5%AE%A2/%E6%BC%94%E7%A4%BA/>演示</a></div><div class=post-tags><i class="fa fa-tags fa-fw me-1"></i>
|
||
<a href=/zh-cn/tags/%E6%8E%92%E7%89%88/ class="post-tag no-text-decoration">排版</a></div><div class="post-tail-bottom d-flex justify-content-between align-items-center mt-5 pb-2"><div class=license-wrapper>本文由作者按照 <a href=https://creativecommons.org/licenses/by/4.0/>CC BY 4.0</a> 进行授权</div></div></div></article></main><aside aria-label=Panel id=panel-wrapper class="col-xl-3 ps-2 text-muted"><div class=access><section id=access-lastmod><h2 class=panel-heading>最近更新</h2><ul class="content list-unstyled ps-0 pb-1 ms-1 mt-2"><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-11-customize-the-favicon/>自定义网站图标</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-09-getting-started/>开始使用</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/>撰写新文章</a></li><li class="text-truncate lh-lg"><a href=/chirpy-starter/zh-cn/post/2019-08-08-text-and-typography/>文本和排版</a></li></ul></section><section><h2 class=panel-heading>热门标签</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E6%8E%92%E7%89%88/>排版</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/>入门指南</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87/>网站图标</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%86%99%E4%BD%9C/>写作</a></div></section></div><div class="toc-border-cover z-3"></div><section id=toc-wrapper class="invisible position-sticky ps-0 pe-4 pb-4"><h2 class="panel-heading ps-3 pb-2 mb-0">文章内容</h2><nav id=toc></nav></section></aside></div><div class=row><div id=tail-wrapper class="col-12 col-lg-11 col-xl-9 px-md-4"><aside id=related-posts aria-labelledby=related-label><h3 class=mb-4 id=related-label>相关文章</h3><nav class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4"><article class=col><a href=/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/ class="post-preview card h-100"><div class=card-body><time data-ts=1565244600 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">撰写新文章</h4><div class=text-muted><p>本教程将指导您如何在 Chirpy 模板中撰写文章，即使您以前使用过 Hugo，也值得阅读，因为许多功能需要设置特定变量。 &lt;span class=&quot;me-2&quot;&gt;命名和路径&lt;/span&gt; &lt;a href=&quot;#%e5%91%bd%e5%90%8d%e5%92%8c%e8%b7%af%e5%be%84&quot; …</p></div></div></a></article><article class=col><a href=/chirpy-starter/zh-cn/post/2019-08-09-getting-started/ class="post-preview card h-100"><div class=card-body><time data-ts=1565355300 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">开始使用</h4><div class=text-muted><p>通过这个全面概述开始学习Chirpy的基础知识。 您将学习如何安装、配置和使用您的第一个基于Chirpy的网站，以及如何将其部署到网络服务器。</p></div></div></a></article><article class=col><a href=/chirpy-starter/zh-cn/post/2019-08-11-customize-the-favicon/ class="post-preview card h-100"><div class=card-body><time data-ts=1565454840 data-df=YYYY/MM/DD>%Y/%m/%d</time><h4 class="pt-0 my-2">自定义网站图标</h4><div class=text-muted><p>通过这个全面概述开始学习 Chirpy 的基础知识。 您将学习如何安装、配置和使用您的第一个基于 Chirpy 的网站，以及如何将其部署到网络服务器。</p></div></div></a></article></nav></aside><nav class="post-navigation d-flex justify-content-between" aria-label="Post Navigation"><div class="btn btn-outline-primary disabled" aria-label=上一篇><p>-</p></div><a href=/chirpy-starter/zh-cn/post/2019-08-08-write-a-new-post/ class="btn btn-outline-primary" aria-label=下一篇><p>撰写新文章</p></a></nav><footer aria-label="Site Info" class="d-flex flex-column justify-content-center text-muted
|
||
flex-lg-row justify-content-lg-between align-items-lg-center pb-lg-3"><p>©
|
||
<time>2025</time>
|
||
<a href=https://github.com/geekifan>Yifan</a>.
|
||
<span data-bs-toggle=tooltip data-bs-placement=top title="除非另有说明，本网站上的博客文章均由作者按照知识共享署名 4.0 国际 (CC BY 4.0) 许可协议进行授权。">保留部分权利。</span></p><p>本站采用 <a href=https://gohugo.io/ target=_blank rel=noopener>Hugo</a> 主题 <a data-bs-toggle=tooltip data-bs-placement=top title=v1.0.2 href=https://github.com/geekifan/hugo-theme-chirpy target=_blank rel=noopener>Chirpy</a></p></footer></div></div><div id=search-result-wrapper class="d-flex justify-content-center d-none"><div class="col-11 content"><div id=search-hints><section><h2 class=panel-heading>热门标签</h2><div class="d-flex flex-wrap mt-3 mb-1 me-3"><a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E6%8E%92%E7%89%88/>排版</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97/>入门指南</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E7%BD%91%E7%AB%99%E5%9B%BE%E6%A0%87/>网站图标</a>
|
||
<a class="post-tag btn btn-outline-primary" href=https://geekifan.github.io/chirpy-starter/zh-cn/tags/%E5%86%99%E4%BD%9C/>写作</a></div></section></div><div id=search-results class="d-flex flex-wrap justify-content-center text-muted mt-3"></div></div></div><script>const DEFAULT_CONFIG={search:{minChars:1,maxResults:5,fields:{title:!0,description:!0,section:!0,contents:!0},strictMode:!0}};class FastSearch{constructor({searchInput:e,resultsContainer:t,json:n,searchResultTemplate:s=null,noResultsText:o=null}){this.searchInput=e,this.resultsContainer=t,this.json=n,this.searchResultTemplate=s,this.noResultsText=o,this.init()}init(){this.loadSearchIndex(),this.searchInput.addEventListener("input",e=>{if(!this.searchIndex){this.resultsContainer.innerHTML='<li class="search-message">Loading search index...</li>';return}this.performSearch(this.searchInput.value)})}async loadSearchIndex(){try{const e=await fetch(this.json);if(!e.ok)throw new Error("Failed to load search index");const t=await e.json();this.searchIndex=t.map(e=>({...e,searchableTitle:e.title?.toLowerCase()||"",searchableDesc:e.desc?.toLowerCase()||"",searchableSection:e.section?.toLowerCase()||"",searchableContents:e.contents?.toLowerCase()||""}))}catch(e){console.error("Error loading search index:",e),this.resultsContainer.innerHTML='<li class="search-message">Error loading search index...</li>'}}escapeHtml(e){return e?e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"):""}containsTerm(e,t){return!!e&&!!t&&e.includes(t)}performSearch(e){if(e=e.toLowerCase().trim(),!e||!this.searchIndex||e.length<DEFAULT_CONFIG.search.minChars){this.resultsContainer.innerHTML="";return}const s=[e,...e.split(/\s+/).filter(e=>e.length>0)],t=[...new Set(s)],o=DEFAULT_CONFIG.search.strictMode,n=this.searchIndex.map(e=>{const s=this.checkFieldsForMatch(e,t[0]);if(o&&!s)return{item:e,score:0,matched:!1};let n=0,i=0,a=!1;t.forEach((t,s)=>{const r=s===0,o=this.checkFieldsForMatch(e,t);o&&(i++,o.inTitle&&(n+=r?10:5,a=!0),o.inDesc&&(n+=r?8:4),o.inSection&&(n+=r?6:3),o.inContents&&(n+=r?4:2))});const r=i/t.length,c=n*r*(a?1.5:1);return{item:e,score:c,matched:s}}).filter(e=>e.matched).sort((e,t)=>t.score-e.score).slice(0,DEFAULT_CONFIG.search.maxResults).map(e=>e.item);if(n.length===0){this.resultsContainer.innerHTML='<p class="mt-5">搜索结果为空</p>';return}const i=n.map(e=>{let t="",n="";return e.categories&&(t=e.categories.join(", "),t=`<div class="me-sm-4"><i class="far fa-folder fa-fw"></i>${t}</div>`),e.tags&&(n=e.tags.join(", "),n=`<div><i class="fa fa-tag fa-fw"></i>${n}</div>`),`
|
||
<article class="px-1 px-sm-2 px-lg-4 px-xl-0">
|
||
<header>
|
||
<h2><a href="${this.escapeHtml(e.permalink)}">${this.escapeHtml(e.title)}</a></h2>
|
||
<div class="post-meta d-flex flex-column flex-sm-row text-muted mt-1 mb-1">
|
||
${t}
|
||
${n}
|
||
</div>
|
||
</header>
|
||
<p>${this.escapeHtml(e.contents)}</p>
|
||
</article>
|
||
`}).join("");this.resultsContainer.innerHTML=i}checkFieldsForMatch(e,t){const n={inTitle:!1,inDesc:!1,inSection:!1,inContents:!1};return DEFAULT_CONFIG.search.fields.title&&this.containsTerm(e.searchableTitle,t)&&(n.inTitle=!0),DEFAULT_CONFIG.search.fields.description&&this.containsTerm(e.searchableDesc,t)&&(n.inDesc=!0),DEFAULT_CONFIG.search.fields.section&&this.containsTerm(e.searchableSection,t)&&(n.inSection=!0),DEFAULT_CONFIG.search.fields.contents&&this.containsTerm(e.searchableContents,t)&&(n.inContents=!0),!!(n.inTitle||n.inDesc||n.inSection||n.inContents)&&n}}const search=new FastSearch({searchInput:document.getElementById("search-input"),resultsContainer:document.getElementById("search-results"),json:`/chirpy-starter/zh-cn/index.json`})</script></div><aside aria-label="Scroll to Top"><button id=back-to-top type=button class="btn btn-lg btn-box-shadow">
|
||
<i class="fas fa-angle-up"></i></button></aside></div><div id=mask class="d-none position-fixed w-100 h-100 z-1"></div></body></html> |