{"id":13929493,"url":"https://github.com/huangyuzhang/Fizzy-Theme","last_synced_at":"2025-07-19T11:32:08.170Z","repository":{"id":41403777,"uuid":"181012646","full_name":"huangyuzhang/Fizzy-Theme","owner":"huangyuzhang","description":"🥤A tasty blogging theme for Ghost.","archived":false,"fork":false,"pushed_at":"2023-06-20T22:33:43.000Z","size":6338,"stargazers_count":283,"open_issues_count":18,"forks_count":68,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-08-08T18:23:29.800Z","etag":null,"topics":["blog","blog-theme","carousel","ghost","ghost-blog","ghost-blog-theme","ghost-theme","ghost-themes","responsive-theme","theme"],"latest_commit_sha":null,"homepage":"https://fizzy.cc","language":"Handlebars","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huangyuzhang.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":"huangyuzhang","patreon":"huangyuzhang"}},"created_at":"2019-04-12T13:22:00.000Z","updated_at":"2024-07-25T04:37:10.000Z","dependencies_parsed_at":"2024-01-14T18:09:38.120Z","dependency_job_id":null,"html_url":"https://github.com/huangyuzhang/Fizzy-Theme","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangyuzhang%2FFizzy-Theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangyuzhang%2FFizzy-Theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangyuzhang%2FFizzy-Theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huangyuzhang%2FFizzy-Theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huangyuzhang","download_url":"https://codeload.github.com/huangyuzhang/Fizzy-Theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226597724,"owners_count":17657202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blog","blog-theme","carousel","ghost","ghost-blog","ghost-blog-theme","ghost-theme","ghost-themes","responsive-theme","theme"],"created_at":"2024-08-07T18:02:22.706Z","updated_at":"2024-11-26T18:30:49.500Z","avatar_url":"https://github.com/huangyuzhang.png","language":"Handlebars","funding_links":["https://github.com/sponsors/huangyuzhang","https://patreon.com/huangyuzhang"],"categories":["others"],"sub_categories":[],"readme":"# The Fizzy Theme 汽水主题\n\n[![demo](https://img.shields.io/badge/Demo-online-yellow.svg)](https://fizzy.cc/)\n[![Ghost version](https://img.shields.io/badge/Ghost-\u003e=3.x-brightgreen.svg)](https://github.com/TryGhost/Ghost)\n[![Release](https://img.shields.io/github/release/huangyuzhang/Fizzy-Theme.svg)](https://github.com/huangyuzhang/Fizzy-Theme/)\n[![GitHub forks](https://img.shields.io/github/forks/huangyuzhang/Fizzy-Theme.svg)](https://github.com/huangyuzhang/Fizzy-Theme/network)\n[![GitHub stars](https://img.shields.io/github/stars/huangyuzhang/Fizzy-Theme.svg?style=social\u0026label=Star)](https://github.com/huangyuzhang/Fizzy-Theme/stargazers)\n\n一个有滋味的 Ghost :ghost:博客主题\n\n感谢所有给本项目小星星的朋友。要充分使用本主题支持的功能，请仔细阅读本文档哦。\n\n[English Doc](./README.md)\n\n![](https://user-images.githubusercontent.com/40261916/60045241-3e045480-96bc-11e9-9382-03789cd8a637.jpg)\n\n## 🔧 安装\n\n- [稳定版本](https://github.com/huangyuzhang/Fizzy-Theme/releases/latest/)\n- [开发版本](https://github.com/huangyuzhang/Fizzy-Theme/tags/)\n\n下载对应版本 `.zip` 压缩包后在 Ghost 后台 Setting \u003e Design 处上传。\n\n## 🎥 演示站点\n\n我的博客 [fizzy.cc](https://fizzy.cc) 正在使用本主题哦.\n\n如果你也在使用Fizzy主题，欢迎通过此[issue](https://github.com/huangyuzhang/Fizzy-Theme/issues/20)来添加你的站点。\n\n## 🍹 特性及使用介绍\n\n### Logo\n如果你只上传了 **site icon**，网站的导航栏会展示：**site icon** + 网站名称 + 一个**main color** 为颜色的点，比如：\n\u003cimg src=\"https://user-images.githubusercontent.com/40261916/58709309-cd666280-83b1-11e9-8253-1a2ceeca56d1.png\" height=\"36px\"\u003e \u003cimg src=\"https://user-images.githubusercontent.com/40261916/58709326-d6573400-83b1-11e9-9c69-71274926322b.png\" height=\"36px\"/\u003e\n\n如果上传了**网站logo**，那么导航栏只会展示**网站logo**。\n\n\u003e 注意：由于导航栏是浅色背景，因此建议使用深色或彩色的logo。\n\n### :earth_africa: 多语言支持\n你可以在 Ghost 后台 -\u003e General -\u003e \"Publication Language\" 更换主题展示的语言。简体中文已经翻译，直接配置里写`zh_CN`即可。\n\n|  代码   |       语言       | 翻译状态 |                       译者                        |\n| :-----: | :--------------: | :------: | :-----------------------------------------------: |\n|  `de`   |       德语       |    ✅    |   [Marek Schmidt](https://github.com/MSDev201)    |\n|  `en`   |       英语       |    ✅    |                                                   |\n|  `fr`   |       法语       |    ✅    |        [Lourys](https://github.com/Lourys)        |\n|  `it`   |     意大利语     |    ✅    |        [Pyrox](https://github.com/Pyr0x1)         |\n| `pt_BR` | 葡萄牙语（巴西） |    ✅    | [matheusvanzan](https://github.com/matheusvanzan) |\n|  `ta`   |     泰米尔语     |    ✅    |   [MC Naveen](https://github.com/the-mcnaveen)    |\n|  `th`   |       泰语       |    ✅    |         [atbee](https://github.com/atbee)         |\n|  `tr`   |     土耳其语     |    ✅    |         [talut](https://github.com/talut)         |\n| `zh_CN` |     简体中文     |    ✅    |                                                   |\n\n请帮助我们翻译主题语言。首先请fork本项目，然后复制`locales`文件夹中的`en.json`并重命名为目标语言, 如西班牙语：`es.json`，并打开文件翻译内容。测试之后请提交 Pull Request 到 `dev` 分支。\n\n### 资源本地化\n你可以修改CSS以及js文件的CDN来针对特定地区进行优化。可修改的文件有：\n- `./default.hbs`\n- `./partials/post/post_footer.hbs`\n- `./partials/post/post_toc.hbs`\n\n\u003e 使用的 Google Fonts 已经做了本地化支持，在 `./default.hbs` 20行左右进行修改以启用。\n\n### 内部标签\n内部标签以`#`开头，添加后将自动显示为内部标签。内部标签不会在前台显示，目前本主题支持的内部标签有：\n- **首页幻灯片**: 为文章加入 `#carousel`(slug:`hash-carousel`) 来添加到首页顶部的幻灯片中（见：[展示橱窗](#展示橱窗)）。\n- **不在列表展示**: 包含 `#noindex`(slug:`hash-noindex`) 标签的文章将不在首页的文章列表中展示。 \n\u003e 限制: 使用 `#noindex` 隐藏一篇文章后，首页的文章展示数量也会因此减少一个。\n\n### 展示橱窗\n展示橱窗可以用作文章的展示。橱窗仅在首页显示。在Ghost后台 Code injection -\u003e `Site Header` 中加入以下代码来启用展示橱窗：\n\n```javascript\n\u003cscript\u003e\n  var show_showcase = true; //default: false\n\u003c/script\u003e\n```\n\n橱窗左侧的幻灯片自动抓取内部标签 `#carousel`。右侧自动抓取两篇推荐文章（featured post）。\n\n![showcase](https://user-images.githubusercontent.com/40261916/60126667-65bfef00-9786-11e9-94e8-eaa4c2a4559f.jpg)\n\n### 作者页面\n你可以在Ghost后台 -\u003e **Profile** 编辑作者的详情，如： **姓名**、**头像**、**背景图片**、**社交账号**、**地址**和**签名**。作者页面([demo](https://fizzy.cc/author/simon/))\n\n### 标签页面\n你可以在Ghost后台 -\u003e **tags** 编辑标签的详情，如：**图片**和**描述**。标签页面([demo](https://fizzy.cc/tag/blogging/))\n\n### 自定义模板\n在编辑文章或页面时，点击右上角齿轮图标⚙，在底部找到 `Template` 来更换模板。\n- **标签目录**：使用模板 `Tag Archive` 来为标签添加一个目录页。([demo](https://fizzy.cc/tag/))。\n- **文章归档**：使用模板 `Post Archive` 来为所有文章按照时间添加一个归档目录。([demo](https://fizzy.cc/archive/))\n- **全宽**：使用模板 `Full Width` 来使用全宽的文章模板。([demo](https://fizzy.cc/fizzy-theme/))。\n- **启用目录**：使用模板 `Post With Toc` 来启用文章的目录抓取功能，详见[#内页目录](#内页目录)。 ([demo](https://fizzy.cc/fizzy-theme/))\n- **推荐文章列表**：使用模板`Featured Posts Archive` 来使用推荐文章列表页面，页面标题和内容会被展示在顶部位置。 ([demo](https://fizzy.cc/featured/))\n\n### 合集 Collection\n若要使用 Ghost 的合集（Collection）功能，编辑 `routes.yaml`。之后修改 `home.hbs` 来自定义首页。完整配置请参阅：[Ghost文档 - Collections](https://docs.ghost.org/api/handlebars-themes/routing/collections/)\n\n```yaml\nroutes:\n  /: home # 首页模板：`home.hbs`\n\ncollections:\n  /movie/: # 电影合集\n    permalink: /movie/{slug}/\n    template: movie # 使用模板 `movie.hbs`\n    filter: tag:movie # 抓取标签为 movie 的文章\n    data: tag.movie # 获取 movie 标签的内容以及meta数据\n  /music/: # 音乐合集\n    permalink: /music/{slug}/\n    template: music # 使用模板 `music.hbs`\n    filter: primary_tag:music # 抓取主标签为 music 的文章\n    data: tag.music # 获取 music 标签的内容以及meta数据\n```\n\n\u003e **注意**: 合集有一些已知的问题，如：[Ghost #10082](https://github.com/TryGhost/Ghost/issues/10082)。\n\n### 自定义CSS变量\n下载主题压缩文件并解压，修改 `assets/css/custom.css` 文件中的 CSS 变量来修改主题的颜色。之后将解压的所有文件打包成一个 `.zip` 压缩文件，上传到你的网站后台。\n\n### 自定义底部文字\n默认情况下网站底部会显示**站点描述**（Ghost后台 -\u003e General）。如果你想要自定义底部文字，在 Ghost后台 -\u003e Code injection -\u003e `Site Header` 中添加以下代码并自定义：\n\n```javascript\n\u003cscript\u003e\n  var footer_text = \"修改成你的自定义底部文字，可以包含HTML代码，但需要注意引号的使用\";\n\u003c/script\u003e\n```\n\u003e 你可以在 `footer_text` 中插入HTML内容，但是所有的引号都应该是单引号。例如：\n\u003e `var footer_text = \"这是一个很\u003cspan style='color:red;font-weigh'\u003e有趣\u003c/span\u003e的网站 \u003ci class='iconfont icon-heart'\u003e\u003c/i\u003e\";`\n\n### 评论系统\n因为 Ghost 目前不包含评论系统，我们需要通过第三方工具或库来实现评论系统。\n\n推荐的解决方案有：[DISQUS][disqus]（海外友好）, [Gitalk][gitalk]（基于GitHub Issues）以及 [Valine][valine]（基于LeanCloud）。目前Fizzy 内置了 Gitalk 和 DISQUS 的支持。\n\n**评论功能默认是被禁用的**。如果你想要启用评论功能，首先在 Ghost后台的 Code injection -\u003e `Site Header` 处添加以下代码来启用评论功能。另外，你可以在特定的文章页面 Code injection -\u003e `Post Header` 处添加以下代码来单独控制该文章的评论功能。完成后在下方提供的评论系统中选择一种按照教程进行配置。\n\n```javascript\n\u003cscript\u003e\n  var show_comment = true; //default: false\n\u003c/script\u003e\n```\n\n#### Gitalk 设置 (推荐)\nGitalk 是一个基于 Github issue 来管理评论的工具。默认根据用户浏览器的语言来展示界面语言。\n1. 注册一个新的 **GitHub Application**\n2. 为你的网站创建一个新的 **Github Repository**\n3. 在Ghost后台 -\u003e Code injection: `Site Footer` 中插入以下代码，并修改为你的信息（来自上面两步）：\n\n```javascript\n\u003cscript\u003e\nconst gitalk = new Gitalk({\n  clientID: 'GitHub Application Client ID',\n  clientSecret: 'GitHub Application Client Secret',\n  repo: 'GitHub repo',\n  owner: 'GitHub repo owner',\n  admin: ['GitHub repo owner and collaborators, only these guys can initialize github issues'],\n  id: location.pathname,      // Ensure uniqueness and length less than 50\n  distractionFreeMode: false  // Facebook-like distraction free mode\n});\ngitalk.render('gitalk-container');\n\u003c/script\u003e\n```\n\u003e 更多配置请参考[这里](https://github.com/gitalk/gitalk/blob/master/readme-cn.md#%E4%BD%BF%E7%94%A8).\n\n\n#### DISQUS 设置\n在Ghost后台 -\u003e Code injection: `Site Header` 中插入以下代码，并修改为你的js路径。\n```javascript\n\u003cscript\u003e\n    var disqus_link = 'https://YOURLINK.disqus.com/embed.js';\n\u003c/script\u003e\n```\n\n如果你想要更换到其他的评论系统，则需要修改 `partial/post/post_comment.hbs` 中的代码。\n\n\n### 代码高亮\nFizzy 主题使用了 Prism.js 作为代码高亮解决方案，Fizzy主题默认使用的语言和插件有：\n  - **支持的语言**: 标记语言（如 HTML）, CSS, C-like, JavasScript, Bash, Nginx, Ruby, Git, JSON, Markdown, SQL, Python, R\n  - **使用的插件**: line-numbers, toolbar, show-language.\n\n访问 [自定义Prismjs][custom-prism] 来勾选你需要的语言。然后下载 js 和 css 文件以替换 `assets` 目录中的对应文件： `prism.js` 和 `prism.css`。\n\n#### 显示行号\n![image](https://user-images.githubusercontent.com/40261916/60731259-0e1c4300-9f3f-11e9-93c8-a83fe5a878e8.png)\n代码块默认不显示行号。在  `Post Header`（单篇文章） 或者 `Site Header`（全站） 中插入如下代码来让代码块显示行号:\n```js\n\u003cscript\u003e\n  var line_numbers = true; //默认: false\n\u003c/script\u003e\n```\n\n### 内页目录\n目前 Fizzy 主题支持两种控制文章内章节目录的方法：\n1. 在  `Post Header`（单篇文章） 或者 `Site Header`（全站） 中插入如下代码（Code injection）：\n    ```javascript\n    \u003cscript\u003e\n        var show_toc = true; // 启用 TOC (默认: false)\n    \u003c/script\u003e\n    ```\n2. 使用自定义模板 `Post With Toc` 来启用章节目录。\n\u003e **优先级**: 自定义模板 \u003e 文章 `Post Header` \u003e 站点 `Site Header`\n\n\u003e **注意**： 默认情况下会展示文章中的 h2 和 h3 标题。如果你想要展示其他标题（比如 h1 或 h4），你需要修改 `partials/post/post_toc.hbs` 文件中的 `selectors`。 但是，一个页面应当只有一个 h1 标题， 即文章标题。\n\n### 即时搜索\n搜索功能使用 Ghost Content API。如果需要开启即时搜索，首先在Ghost后台添加一个自定义 Integration，并记录下 **Content API Key** 和 **API URL**。\n然后在 Code injection -\u003e `Site Header`中加入以下代码并自定义：\n```javascript\n\u003cscript\u003e\n  var show_search = true; // 默认:false\n  var search_key = '引号内填写刚才获得的 Content API Key';\n  var search_url = '引号内填写刚才获得的 API URL'; // 一般情况下这个就是你的站点url\n\u003c/script\u003e\n```\n\n### LaTeX公式\n使用 `$`（行内公式）或 `$$` 来包裹LaTeX公式以便主题渲染成公式。 ([示例](https://fizzy.cc/latex/))\n\n### 链接页面\n你可以通过添加页面来展示与网站相关的站外链接，如“我的站点”、“友情链接”。Ghost于v2.30版本后支持了**书签卡**功能，可以在Ghost编辑器中输入 `/bookmark` 来插入书签链接。你可以用此方式为页面添加链接。（[示例](https://fizzy.cc/links/)）\n\n### 其他设置\n- **导航**：修改 `partials/navigation.hbs` 来自定义下来菜单，如果不需要也可以将相应代码删除。\n- **徽章**：使用 `class=\"badge \u003ccolor\u003e\"` 来使用徽章 (仅支持 HTML 块).([示例](https://fizzy.cc/fizzy-theme/#badge))\n  - 支持的颜色: 黑白、红色、黄色、绿色、蓝色、紫色\n![image](https://user-images.githubusercontent.com/40261916/64512639-70b40580-d319-11e9-9218-b1937c2e4b4f.png)\n    \u003e 注意: 使用 `class=\"badge\"`来表示无色。\n- **每页文章数**：在 `package.json` 中修改 `\"posts_per_page\": 8` 的数字来修改每页展示的文章数量。\n- **表格**：若要让一个单元格中的内容不换行，取消 `assets/css/main.css` 中大约703行左右的注释 `/* white-space: nowrap; */`。\n- **文章列表摘要**：由于中英文字数统计方式不同，如果网站语言为类中文语言，文章列表页面的摘要可能过长。有两种方法解决：\n  1. 修改 `partials/list_card.hbs`约第56行，将`{{excerpt words=\"40\"}}`改成`{{excerpt characters=\"30\"}}`，数字为显示的字数。\n  2. 编辑文章时为每篇文章自定义Excerpt，则会忽略截取的 word 或 character。\n\n### 鸣谢按钮\n如果你想要关闭导航栏右上角的 \"Get Fizzy Theme\" 按钮，请在站点 `Code Injection` 的 `Site Header` 中加入以下代码：\n\n```javascript\n\u003cscript\u003e\n  var fizzy_credit = false; // 默认:true\n\u003c/script\u003e\n```\n\u003e 请勿移除页面底部的 \"Using The Fizzy Theme\" 及其链接。感谢支持！\n---\n## 📝 版本更新日志\n\n查看完整版本更新日志： [CHANGELOG.md](./CHANGELOG.md)\n\n## 🍻 贡献者\n\n查看[贡献者列表][contributors]\n\n## 🔋 依赖\n\n- [Bulma][bulma] - CSS 框架\n- [Prismjs][prismjs] - 一个轻量的代码高亮工具\n- [JQuery][jquery] - 一个知名的 JavaScript 库 (因为使用 tocify 引入)\n- [jQuery.tocify.js][tocify] - 一个根据文章内标题生成目录的工具 (引入 JQuery-UI)\n- [KaTeX][katex] - 一个渲染非常快速的 LaTeX 数学公式显示引擎 (since v0.3.0)\n- [Gitalk][gitalk] - 一个基于 Github issued 的评论系统 (since v0.3.0)\n- [ghost-search][ghost-search] - 一个基于 Ghost Content API 的搜索引擎 (since v1.0.0)\n- [iconfont][iconfont] - 一个免费的图标解决方案 (since v1.2.3)\n\n## 📍 开发路线图\n请访问我们的[路线图][roadmap]来了解本项目的未来开发计划。\n\n## :bug: 报告问题 \u0026 :dart: 改进建议\n如果各位在使用过程中发现BUG，有功能或节目的修改建议或者想要主题支持一些新的功能，请前往issue页面提交并正确选择label。\n\n或者，你也可以直接对此项目贡献代码。 \n\n## :bulb: 贡献代码\n\n1. Fork 本项目（请大佬点个赞支持作者）\n2. 创建新的功能分支，如 `git checkout -b feature-fooBar`\n3. 提交并注释修改，如 `git commit -m 'Add something'`\n4. 同步到远程仓库，如 `git push origin feature-fooBar`\n5. 创建一个 Pull Request 到本项目的 `dev` 分支\n6. 等待代码检查，在某些情况下可能需要进行修改\n\n\n## :lock_with_ink_pen: 开源协议\n\n本项目使用 MIT 开源协议。\n\n[bulma]: https://bulma.io/\n[prismjs]: https://prismjs.com/\n[jquery]: https://jquery.com/\n[tocify]: http://gregfranko.com/jquery.tocify.js/\n[mathjax]: https://www.mathjax.org/\n[katex]: https://katex.org/\n[disqus]: https://disqus.com/\n[gitalk]: https://github.com/gitalk/gitalk\n[valine]: https://github.com/xCss/Valine\n[custom-prism]: https://prismjs.com/download.html#themes=prism-tomorrow\u0026languages=markup+css+clike+javascript+bash+ruby+git+json+markdown+nginx+sql+python+r\u0026plugins=line-numbers+toolbar+show-language\n[ghost-search]: https://github.com/HauntedThemes/ghost-search\n[iconfont]:https://www.iconfont.cn\n[contributors]: https://github.com/huangyuzhang/Fizzy-Theme/graphs/contributors\n[roadmap]: https://github.com/huangyuzhang/Fizzy-Theme/projects/3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangyuzhang%2FFizzy-Theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuangyuzhang%2FFizzy-Theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuangyuzhang%2FFizzy-Theme/lists"}