index.json

[{"content":"示例项目 这是一个示例项目页面，你可以在这里添加你的项目介绍。\n项目特点 特点 1 特点 2 特点 3 技术栈 iOS Swift UIKit 链接 GitHub 演示视频 ","permalink":"https://jonyfang.github.io/projects/example-project/","summary":"\u003ch1 id=\"示例项目\"\u003e示例项目\u003c/h1\u003e\n\u003cp\u003e这是一个示例项目页面，你可以在这里添加你的项目介绍。\u003c/p\u003e\n\u003ch2 id=\"项目特点\"\u003e项目特点\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e特点 1\u003c/li\u003e\n\u003cli\u003e特点 2\u003c/li\u003e\n\u003cli\u003e特点 3\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"技术栈\"\u003e技术栈\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eiOS\u003c/li\u003e\n\u003cli\u003eSwift\u003c/li\u003e\n\u003cli\u003eUIKit\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"链接\"\u003e链接\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://github.com/jonyfang\"\u003eGitHub\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"#\"\u003e演示视频\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","title":"示例项目"},{"content":"搭建流程 本博客使用 Hugo + GitHub Pages + GitHub Actions 搭建的技术博客。博客搭建流程如下：\nMarkdown 功能汇总 本节汇总了 Hugo PaperMod 主题支持的各种 Markdown 功能和特性及自己添加的一些工具脚本。\n1. Emoji 表情支持 Hugo 项目可以通过多种方式启用 Emoji 表情。\n启用方法 方法一：全局配置。在站点配置文件 hugo.toml 中设置：\n1 enableEmoji = true 启用后，即可在内容文件中直接使用 Emoji 短代码：\n🙈 :see_no_evil: 🙉 :hear_no_evil: 🙊 :speak_no_evil:\n方法二：模板函数。可以在模板或内联短代码中直接调用 emojify 函数。\n在 Emoji 速查表 - 查找合适的 Emoji 短代码\n样式优化 实际的字形渲染取决于浏览器和平台。为确保样式一致，可以使用自定义 CSS：\n1 2 3 4 .emoji { font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols; } 2. 数学公式排版 Hugo 可以使用第三方 JavaScript 库（如 KaTeX）来实现数学符号渲染。\n设置步骤 在 /layouts/partials/math.html 创建部分模板文件 引用 Auto-render Extension 或将脚本托管到本地 在模板中使用条件逻辑引入 在配置或页面 Front Matter 中设置 math: true 模板示例 1 2 3 {{ if or .Params.math .Site.Params.math }} {{ partial \u0026#34;math.html\u0026#34; . }} {{ end }} 公式示例 行内公式：黄金比例 $\\varphi = \\frac{1+\\sqrt{5}}{2} \\approx 1.6180339887\\ldots$\n块级公式：\n$$\\varphi = 1 + \\cfrac{1}{1 + \\cfrac{1}{1 + \\cfrac{1}{1 + \\cdots}}}$$\n参考资源：KaTeX 支持的函数\n3. 富媒体内容与短代码 Hugo 内置了多个短代码用于富媒体内容嵌入。\nFigure 图片短代码 PaperMod 增强的图片展示功能：\n1 {{\u0026lt; figure src=\u0026#34;/images/example.jpg\u0026#34; alt=\u0026#34;示例图片\u0026#34; caption=\u0026#34;图片说明\u0026#34; \u0026gt;}} Photo by Aditya Telange on Unsplash\nYouTube 视频 1 {{\u0026lt; youtube VIDEO_ID \u0026gt;}} Twitter/X 推文 1 {{\u0026lt; twitter user=\u0026#34;username\u0026#34; id=\u0026#34;tweet_id\u0026#34; \u0026gt;}} Grok Code just hit #1 on the OpenRouter leaderboard, beating Claude Sonnet pic.twitter.com/OfCExoTQUh\n\u0026mdash; Elon Musk (@elonmusk) August 30, 2025 Vimeo 视频 1 {{\u0026lt; vimeo VIDEO_ID \u0026gt;}} Bilibili 视频 注意：这是自定义实现的 shortcode，PaperMod 主题原生不支持 Bilibili 视频嵌入。\n实现方式：在 layouts/shortcodes/bilibili.html 创建自定义 shortcode，使用 Bilibili 官方嵌入式播放器 API (https://player.bilibili.com/player.html)，通过 iframe 嵌入视频。支持响应式布局（16:9）、分P视频、弹幕控制等参数。\n1 {{\u0026lt; bilibili BV_ID \u0026gt;}} 基础用法：\n分P视频（指定第2集）：\n1 {{\u0026lt; bilibili BV_ID 2 \u0026gt;}} 关闭弹幕：\n1 {{\u0026lt; bilibili id=\u0026#34;BV_ID\u0026#34; danmaku=\u0026#34;0\u0026#34; \u0026gt;}} 支持的参数：\nid / 位置参数1 - BV号（必需） page / 位置参数2 - 分P页码（默认：1） danmaku - 弹幕开关（1开启/0关闭，默认：1） autoplay - 自动播放（1开启/0关闭，默认：0） 4. 代码语法高亮 Hugo 支持多种代码展示方式和语法高亮。\n配置代码高亮 在 hugo.toml 中配置：\n1 2 3 4 5 [markup] [markup.highlight] style = \u0026#34;monokai\u0026#34; lineNos = true noClasses = false 代码块示例 Python\n1 2 3 4 5 6 def fibonacci(n): if n \u0026lt;= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(fibonacci(10)) Swift\n1 2 3 4 5 func greet(name: String) { print(\u0026#34;Hello, \\(name)!\u0026#34;) } greet(name: \u0026#34;JonyFang\u0026#34;) Objective-C\n1 2 3 4 5 - (void)greetWithName:(NSString *)name { NSLog(@\u0026#34;Hello, %@!\u0026#34;, name); } [self greetWithName:@\u0026#34;JonyFang\u0026#34;]; TypeScript\n1 2 3 4 5 6 7 8 9 10 interface Person { name: string; age: number; } function greet(person: Person): void { console.log(`Hello, ${person.name}!`); } greet({ name: \u0026#34;JonyFang\u0026#34;, age: 25 }); 行号选项 linenos=inline - 内联行号 linenos=table - 表格行号（更适合复制代码） 5. Markdown 基础语法 标题 1 2 3 4 5 6 # H1 一级标题 ## H2 二级标题 ### H3 三级标题 #### H4 四级标题 ##### H5 五级标题 ###### H6 六级标题 文本样式 粗体：**粗体文本** 或 __粗体文本__ 斜体：*斜体文本* 或 _斜体文本_ 删除线：~~删除线文本~~ 行内代码：`代码` 引用 1 2 3 4 \u0026gt; 这是一段引用文字。 \u0026gt; 可以包含多行内容。 \u0026gt; \u0026gt; — 作者名 效果：\n简约是最终的复杂。\n— 莱昂纳多·达·芬奇\n列表 无序列表\n1 2 3 4 5 - 项目 1 - 项目 2 - 子项目 2.1 - 子项目 2.2 - 项目 3 有序列表\n1 2 3 1. 第一项 2. 第二项 3. 第三项 表格 1 2 3 4 | 姓名 | 年龄 | 职业 | | ---- | ---- | -------- | | 张三 | 25 | 工程师 | | 李四 | 28 | 设计师 | 效果：\n姓名 年龄 职业 张三 25 工程师 李四 28 设计师 链接和图片 1 2 [链接文本](https://example.com) ![图片描述](/images/example.jpg) 其他元素 缩写：HTML 下标：H2O 上标：X2 键盘按键：Ctrl + C 高亮文本：高亮内容 6. Front Matter 变量配置 Front Matter 是文章开头的 YAML 配置区域，用于设置文章元数据。\n基本变量 1 2 3 4 5 6 7 8 9 --- title: \u0026#34;文章标题\u0026#34; date: 2025-06-20T10:00:00+08:00 draft: false author: \u0026#34;JonyFang\u0026#34; description: \u0026#34;文章描述\u0026#34; tags: [\u0026#34;标签1\u0026#34;, \u0026#34;标签2\u0026#34;] categories: [\u0026#34;分类\u0026#34;] --- 显示控制 1 2 3 4 showtoc: true # 显示目录 tocopen: true # 默认展开目录 hidemeta: false # 隐藏元信息 showbreadcrumbs: true # 显示面包屑导航 封面图片 1 2 3 4 5 6 cover: image: \u0026#34;/images/cover.jpg\u0026#34; alt: \u0026#34;封面图片描述\u0026#34; caption: \u0026#34;图片说明\u0026#34; relative: false hidden: false 权重和置顶 1 weight: 1 # 数字越小越靠前，用于置顶文章 7. 社交图标与分享功能 社交图标配置 在 hugo.toml 中配置：\n1 2 3 4 5 6 7 8 9 10 params: socialIcons: - name: \u0026#34;github\u0026#34; url: \u0026#34;https://github.com/jonyfang\u0026#34; - name: \u0026#34;twitter\u0026#34; url: \u0026#34;https://twitter.com/jony_chunfang\u0026#34; - name: \u0026#34;email\u0026#34; url: \u0026#34;mailto:jony.chunfang@gmail.com\u0026#34; - name: \u0026#34;rss\u0026#34; url: \u0026#34;/index.xml\u0026#34; 支持的图标 常用平台：github, twitter, linkedin, youtube, instagram, facebook, telegram, discord, reddit, medium, mastodon\n开发平台：stackoverflow, gitlab, bitbucket, codepen, dev, hashnode\n其他：kofi, buymeacoffee, patreon, rss, email\n1 2 3 4 5 socialIcons: - name: \u0026#34;kofi\u0026#34; url: \u0026#34;https://kofi.com\u0026#34; - name: \u0026#34;x\u0026#34; url: \u0026#34;https://x.com\u0026#34; 分享按钮 启用所有分享按钮：\n1 2 params: ShowShareButtons: true 指定特定按钮：\n1 2 params: ShareButtons: [\u0026#39;linkedin\u0026#39;, \u0026#39;twitter\u0026#39;, \u0026#39;reddit\u0026#39;, \u0026#39;facebook\u0026#39;] 支持的平台：X (Twitter), LinkedIn, Reddit, Facebook, WhatsApp, Telegram\n8. 常见问题与技巧 自定义主题模板 将主题文件复制到本地 layouts/ 目录即可覆盖：\n1 cp themes/PaperMod/layouts/partials/header.html layouts/partials/ 启用 SEO 和社交元数据 在配置中设置：\n1 2 params: env: production 这会启用 OpenGraph、Twitter Cards 和 Schema 标记。\n自定义 CSS 将自定义 CSS 文件放在：\n1 assets/css/extended/custom.css 文件会自动与主题资源打包。\n自定义 Head/Footer 创建以下文件注入自定义内容：\nlayouts/partials/extend_head.html layouts/partials/extend_footer.html 图片居中 使用 #center 锚点：\n1 ![图片](/images/example.jpg#center) 或在 figure 短代码中使用 align=center。\n置顶文章 在文章 Front Matter 中添加：\n1 weight: 1 数字越小越靠前。\n自定义 Favicon 将 favicon 文件放在 /static 目录：\n1 2 3 4 5 static/ ├── favicon.ico ├── favicon-16x16.png ├── favicon-32x32.png └── apple-touch-icon.png 或在配置中引用外部 URL：\n1 2 3 4 5 params: assets: favicon: \u0026#34;/favicon.ico\u0026#34; favicon16x16: \u0026#34;/favicon-16x16.png\u0026#34; favicon32x32: \u0026#34;/favicon-32x32.png\u0026#34; 9. 配置文件示例 (config.yml) 示例站点完整结构参考: exampleSite\n请根据实际需求适当调整\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 baseURL: \u0026#34;https://examplesite.com/\u0026#34; title: ExampleSite paginate: 5 theme: PaperMod enableRobotsTXT: true buildDrafts: false buildFuture: false buildExpired: false googleAnalytics: UA-123-45 minify: disableXML: true minifyOutput: true params: env: production # 启用 google analytics, opengraph, twitter-cards 和 schema title: ExampleSite description: \u0026#34;ExampleSite description\u0026#34; keywords: [Blog, Portfolio, PaperMod] author: Me # author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] # 多个作者 images: [\u0026#34;\u0026lt;link or path of image for opengraph, twitter-cards\u0026gt;\u0026#34;] DateFormat: \u0026#34;January 2, 2006\u0026#34; defaultTheme: auto # dark, light disableThemeToggle: false ShowReadingTime: true ShowShareButtons: true ShowPostNavLinks: true ShowBreadCrumbs: true ShowCodeCopyButtons: false ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true disableSpecial1stPost: false disableScrollToTop: false comments: false hidemeta: false hideSummary: false showtoc: false tocopen: false assets: # disableHLJS: true # 禁用 highlight.js # disableFingerprinting: true favicon: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; favicon16x16: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; favicon32x32: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; apple_touch_icon: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; safari_pinned_tab: \u0026#34;\u0026lt;link / abs url\u0026gt;\u0026#34; label: text: \u0026#34;Home\u0026#34; icon: /apple-touch-icon.png iconHeight: 35 # 个人资料模式 profileMode: enabled: false # 需要显式设置 title: ExampleSite subtitle: \u0026#34;This is subtitle\u0026#34; imageUrl: \u0026#34;\u0026lt;img location\u0026gt;\u0026#34; imageWidth: 120 imageHeight: 120 imageTitle: my image buttons: - name: Posts url: posts - name: Tags url: tags # 主页信息模式 homeInfoParams: Title: \u0026#34;Hi there \\U0001F44B\u0026#34; Content: Welcome to my blog socialIcons: - name: x url: \u0026#34;https://x.com/\u0026#34; - name: stackoverflow url: \u0026#34;https://stackoverflow.com\u0026#34; - name: github url: \u0026#34;https://github.com/\u0026#34; analytics: google: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; bing: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; yandex: SiteVerificationTag: \u0026#34;XYZabc\u0026#34; cover: hidden: true # 在所有地方隐藏，但保留在结构化数据中 hiddenInList: true # 在列表页和首页隐藏 hiddenInSingle: true # 在单页隐藏 editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # 编辑按钮文本 appendFilePath: true # 将文件路径附加到编辑链接 # 搜索配置 # https://fusejs.io/api/options.html fuseOpts: isCaseSensitive: false shouldSort: true location: 0 distance: 1000 threshold: 0.4 minMatchCharLength: 0 limit: 10 # 参考: https://www.fusejs.io/api/methods.html#search keys: [\u0026#34;title\u0026#34;, \u0026#34;permalink\u0026#34;, \u0026#34;summary\u0026#34;, \u0026#34;content\u0026#34;] menu: main: - identifier: categories name: categories url: /categories/ weight: 10 - identifier: tags name: tags url: /tags/ weight: 20 - identifier: example name: example.org url: https://example.org weight: 30 # 参考: https://github.com/adityatelange/hugo-PaperMod/wiki/FAQs#using-hugos-syntax-highlighter-chroma pygmentsUseClasses: true markup: highlight: noClasses: false # anchorLineNos: true # codeFences: true # guessSyntax: true # lineNos: true # style: monokai 10. 文章模板示例 (Page.md) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 --- title: \u0026#34;My 1st post\u0026#34; date: 2020-09-15T11:30:03+00:00 # weight: 1 # aliases: [\u0026#34;/first\u0026#34;] tags: [\u0026#34;first\u0026#34;] author: \u0026#34;Me\u0026#34; # author: [\u0026#34;Me\u0026#34;, \u0026#34;You\u0026#34;] # 多个作者 showToc: true TocOpen: false draft: false hidemeta: false comments: false description: \u0026#34;Desc Text.\u0026#34; canonicalURL: \u0026#34;https://canonical.url/to/page\u0026#34; disableHLJS: true # 禁用 highlightjs disableShare: false disableHLJS: false hideSummary: false searchHidden: true ShowReadingTime: true ShowBreadCrumbs: true ShowPostNavLinks: true ShowWordCount: true ShowRssButtonInSectionTermList: true UseHugoToc: true cover: image: \u0026#34;\u0026lt;image path/url\u0026gt;\u0026#34; # 图片路径/URL alt: \u0026#34;\u0026lt;alt text\u0026gt;\u0026#34; # 替代文本 caption: \u0026#34;\u0026lt;text\u0026gt;\u0026#34; # 封面下方显示的说明文字 relative: false # 使用 page bundles 时设置为 true hidden: true # 仅在当前单页隐藏 editPost: URL: \u0026#34;https://github.com/\u0026lt;path_to_repo\u0026gt;/content\u0026#34; Text: \u0026#34;Suggest Changes\u0026#34; # 编辑按钮文本 appendFilePath: true # 将文件路径附加到编辑链接 --- 可以通过创建 archetypes/post.md 来使用此模板：\n1 hugo new --kind post \u0026lt;name\u0026gt; 11. PaperMod 主题特性 核心功能 性能优化\n资源自动压缩、打包 资源指纹识别 响应式设计 主题切换\n亮色/暗色/自动模式 用户偏好保存 归档与搜索\n按年份分组归档 Fuse.js 站内搜索 支持快捷键 / 首页布局\n常规模式（文章列表） Home-Info 模式 Profile 模式 内容功能 文章增强\n封面图片（支持响应式） 阅读时间估算 字数统计 目录（TOC） 上一篇/下一篇导航 代码功能\n语法高亮（100+ 语言） 代码复制按钮 行号显示 协作功能\nGitHub 编辑链接 草稿指示器 多作者支持 SEO 与社交 以下功能在 env: production 时启用：\nRich Snippets 支持 Twitter Cards 元数据 OpenGraph 支持 结构化数据 无障碍访问 快捷键：\nc - 跳转到目录 g - 返回顶部 h - 返回首页 t - 切换主题 / - 打开搜索 其他：\n平滑滚动 返回顶部按钮 语义化 HTML ARIA 标签 技术特性 多语言支持 RSS 订阅 Google Analytics 集成 评论系统集成 JSON 搜索索引 自己加的一些工具脚本 新文章创建脚本 使用 scripts/new-post.sh 快速创建文章：\n1 2 3 4 5 6 7 # 基础用法 ./scripts/new-post.sh \u0026#34;article-name\u0026#34; \u0026#34;文章标题\u0026#34; # 指定日期和标签 ./scripts/new-post.sh \u0026#34;hugo-guide\u0026#34; \u0026#34;Hugo 指南\u0026#34; \\ -d 2025-06-20 \\ -t \u0026#34;Hugo,教程\u0026#34; 图片压缩脚本 使用 scripts/compress-images.sh 优化图片：\n1 2 3 4 5 6 7 8 # 压缩所有图片 ./scripts/compress-images.sh # 指定质量 ./scripts/compress-images.sh -q 80 # 转换为 WebP ./scripts/compress-images.sh --to-webp 总结 本博客基于 Hugo + PaperMod 主题构建，具有以下特点：\n简洁 - 专注于内容呈现 功能全 - 完整的博客功能 易维护 - Markdown 写作，自动化部署 性能靠谱 - 静态站点，加载快速 相关资源 Hugo 官方文档 PaperMod 主题文档 Markdown 语法指南 GitHub Pages 文档 欢迎阅读本博客的技术文章！\n","permalink":"https://jonyfang.github.io/posts/2025-06-20-blog-setup-guide/","summary":"\u003ch2 id=\"搭建流程\"\u003e搭建流程\u003c/h2\u003e\n\u003cp\u003e本博客使用 \u003cstrong\u003eHugo + GitHub Pages + GitHub Actions\u003c/strong\u003e 搭建的技术博客。博客搭建流程如下：\u003c/p\u003e\n\u003cp\u003e\u003cimg alt=\"博客搭建流程\" loading=\"lazy\" src=\"/images/2025-06-20-blog-setup-guide/blog-architecture.svg\"\u003e\u003c/p\u003e\n\u003chr\u003e\n\u003ch2 id=\"markdown-功能汇总\"\u003eMarkdown 功能汇总\u003c/h2\u003e\n\u003cp\u003e本节汇总了 Hugo PaperMod 主题支持的各种 Markdown 功能和特性及自己添加的一些工具脚本。\u003c/p\u003e\n\u003ch3 id=\"1-emoji-表情支持\"\u003e1. Emoji 表情支持\u003c/h3\u003e\n\u003cp\u003eHugo 项目可以通过多种方式启用 Emoji 表情。\u003c/p\u003e\n\u003ch4 id=\"启用方法\"\u003e启用方法\u003c/h4\u003e\n\u003cp\u003e方法一：全局配置。在站点配置文件 \u003ccode\u003ehugo.toml\u003c/code\u003e 中设置：\u003c/p\u003e\n\u003cdiv class=\"highlight\" data-lang=\"toml\"\u003e\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-toml\" data-lang=\"toml\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nx\"\u003eenableEmoji\u003c/span\u003e \u003cspan class=\"p\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003etrue\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003c/div\u003e\n\u003cp\u003e启用后，即可在内容文件中直接使用 Emoji 短代码：\u003c/p\u003e\n\u003cp\u003e🙈 \u003ccode\u003e:see_no_evil:\u003c/code\u003e 🙉 \u003ccode\u003e:hear_no_evil:\u003c/code\u003e 🙊 \u003ccode\u003e:speak_no_evil:\u003c/code\u003e\u003c/p\u003e\n\u003cp\u003e方法二：模板函数。可以在模板或内联短代码中直接调用 \u003ccode\u003eemojify\u003c/code\u003e 函数。\u003c/p\u003e\n\u003cp\u003e在 \u003ca href=\"https://www.webfx.com/tools/emoji-cheat-sheet/\"\u003eEmoji 速查表\u003c/a\u003e - 查找合适的 Emoji 短代码\u003c/p\u003e\n\u003ch4 id=\"样式优化\"\u003e样式优化\u003c/h4\u003e\n\u003cp\u003e实际的字形渲染取决于浏览器和平台。为确保样式一致，可以使用自定义 CSS：\u003c/p\u003e\n\u003cdiv class=\"highlight\" data-lang=\"css\"\u003e\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e4\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-css\" data-lang=\"css\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nc\"\u003eemoji\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e  \u003cspan class=\"k\"\u003efont-family\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e \u003cspan class=\"n\"\u003eApple\u003c/span\u003e \u003cspan class=\"n\"\u003eColor\u003c/span\u003e \u003cspan class=\"n\"\u003eEmoji\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"n\"\u003eSegoe\u003c/span\u003e \u003cspan class=\"n\"\u003eUI\u003c/span\u003e \u003cspan class=\"n\"\u003eEmoji\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"n\"\u003eNotoColorEmoji\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e               \u003cspan class=\"n\"\u003eSegoe\u003c/span\u003e \u003cspan class=\"n\"\u003eUI\u003c/span\u003e \u003cspan class=\"n\"\u003eSymbol\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"n\"\u003eAndroid\u003c/span\u003e \u003cspan class=\"n\"\u003eEmoji\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"n\"\u003eEmojiSymbols\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003c/div\u003e\n\u003chr\u003e\n\u003ch3 id=\"2-数学公式排版\"\u003e2. 数学公式排版\u003c/h3\u003e\n\u003cp\u003eHugo 可以使用第三方 JavaScript 库（如 KaTeX）来实现数学符号渲染。\u003c/p\u003e","title":"新博客搭建流程及 Markdown 功能汇总"},{"content":"👋 Hi, 我是 JonyFang\n如果你想与我交流，可以通过以下方式：\n📧 Email: jony.chunfang@gmail.com 🐙 GitHub: @jonyfang 🐦 Twitter: @jony_chunfang 感谢你的访问！如果你喜欢我的文章，欢迎订阅 RSS 或在 GitHub 上给我 Star ⭐\n","permalink":"https://jonyfang.github.io/about/","summary":"\u003cp\u003e👋 Hi, 我是 \u003cstrong\u003eJonyFang\u003c/strong\u003e\u003c/p\u003e\n\u003cp\u003e如果你想与我交流，可以通过以下方式：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e📧 \u003cstrong\u003eEmail\u003c/strong\u003e: \u003ca href=\"mailto:jony.chunfang@gmail.com\"\u003ejony.chunfang@gmail.com\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e🐙 \u003cstrong\u003eGitHub\u003c/strong\u003e: \u003ca href=\"https://github.com/jonyfang\"\u003e@jonyfang\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e🐦 \u003cstrong\u003eTwitter\u003c/strong\u003e: \u003ca href=\"https://x.com/jony_chunfang\"\u003e@jony_chunfang\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003cp\u003e感谢你的访问！如果你喜欢我的文章，欢迎订阅 \u003ca href=\"/index.xml\"\u003eRSS\u003c/a\u003e 或在 GitHub 上给我 Star ⭐\u003c/p\u003e","title":"关于我"}]