{"id":16552642,"url":"https://github.com/xukimseven/hardcandy-jekyll","last_synced_at":"2025-04-06T18:17:44.353Z","repository":{"id":33508398,"uuid":"135155983","full_name":"xukimseven/HardCandy-Jekyll","owner":"xukimseven","description":"一款清新 糖果色🍬 的 ‘Jekyll’ 主题。A candy-colored 🍬 ‘Jekyll’ theme.","archived":false,"fork":false,"pushed_at":"2023-09-23T13:16:49.000Z","size":38020,"stargazers_count":223,"open_issues_count":16,"forks_count":133,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-30T17:09:02.125Z","etag":null,"topics":["css3","html","html5","javascript","jekyll","jekyll-theme"],"latest_commit_sha":null,"homepage":"http://xseven.me","language":"CSS","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/xukimseven.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-28T12:09:01.000Z","updated_at":"2025-03-01T14:55:36.000Z","dependencies_parsed_at":"2024-11-17T02:12:28.337Z","dependency_job_id":null,"html_url":"https://github.com/xukimseven/HardCandy-Jekyll","commit_stats":{"total_commits":21,"total_committers":3,"mean_commits":7.0,"dds":"0.33333333333333337","last_synced_commit":"12b11aa67b3057ea3555dbcd8db99dc4546dbd4d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xukimseven%2FHardCandy-Jekyll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xukimseven%2FHardCandy-Jekyll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xukimseven%2FHardCandy-Jekyll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xukimseven%2FHardCandy-Jekyll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xukimseven","download_url":"https://codeload.github.com/xukimseven/HardCandy-Jekyll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247526768,"owners_count":20953143,"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":["css3","html","html5","javascript","jekyll","jekyll-theme"],"created_at":"2024-10-11T19:45:36.315Z","updated_at":"2025-04-06T18:17:44.333Z","avatar_url":"https://github.com/xukimseven.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"## HardCandy-Jekyll\n\n\n\n### Preview\n\n[在线预览 view demo →](http://xseven.me/)\n\n![1](/screenshot/1.png)\n\n![2](/screenshot/2.png)\n\n![3](/screenshot/3.png)\n\n想要查看手机端显示效果，扫描下方二维码浏览器打开即可\n\n![4](/screenshot/4.png)\n\n\n\n### 主题特性\n\n- 主题基于 `jekyll 3.8.1` 开发\n- 响应式布局\n- 文章标签索引\n- 文章时间线索引\n- 博主个人信息展示\n- 支持9种代码高亮主题色\n- 支持 `dispus` 、 `来必力` 、 `Gitment` 三种评论系统\n- 支持 `百度统计` 、`谷歌分析` 两种网站追踪系统\n- 支持13款不同社交平台图标及链接地址指向\n- 支持11个不同平台的文章分享路口\n\n\n\n### 开始使用\n\n#### 线上部署\n\n​\t首先在 `github` 上开启一个仓库起名为 `你的github用户名.github.io` 。并 `clone` 你的仓库到本地。 然后下载 `HardCandy-Jekyll` 的 [源码](https://github.com/xukimseven/HardCandy-Jekyll) 到本地之后，将 `_config.yml` 文件更改为自己的配置（下面会介绍）。之后，将所有文件拷贝至自己的本地仓库根目录下，再上传至自己的 `github` 线上仓库，即可通过域名 `https://你的github用户名.github.io` 访问看到自己的博客页面。\n\n#### 本地部署\n\n​\t首先在本地安装 `Jekyll` [详情请戳](https://www.jekyll.com.cn/docs/quickstart/)\n\n​\t安装完成之后，使用命令 `jekyll -v` 查看 **jekyll版本号** ，若低于 `jekyll 3.x.x` 则需要升级至 `jekyll 3.x.x` 。 \n\n​\t使用 `gem install jekyll-paginate` 或 `sudo gem install jekyll-paginate` 安装Jekyll的分页插件。\n\n​\t将源码 `clone` 到本地后，在终端进入 `HardCandy-Jekyll` 根目录，运行 `jekyll server` 或 `bundle exec jekyll serve` ，即可开启jekyll的服务。通过浏览器访问 [http://localhost:4000](http://localhost:4000) ，即可看到本地部署的 `HardCandy-Jekyll` 博客了。\n\n\u003e warning！值得注意的地方：\n\u003e\n\u003e ​\t由于本主题是基于 `jekyll 3.8.1` 开发 ，jekyll的版本差异也许会导致相关显示效果的差异。详情请参考官方文档：[news](https://jekyllrb.com/news/)\n\n\n\n### 配置文档\n\n- 开始\n  - [关于博客](#关于博客)\n  - [写文章](#写文章)\n- 组件\n  - [博主个人信息](#博主个人信息)\n  - [社交媒体](#社交媒体)\n  - [首页显示信息](#首页显示信息)\n  - [导航栏](#导航栏)\n  - [分页](#分页)\n  - [代码高亮主题](#代码高亮主题)\n  - [友情链接](#友情链接)\n  - [页脚](#页脚)\n- 第三方服务\n  - [评论系统的切换](#评论系统的切换)\n  - [文章分享的路口](#文章分享的路口)\n  - [网站流量追综的配置](#网站流量追综的配置)\n\n\n\n\u003e ​\t通用修改 `_config.yml` 文件，你便可以轻松搭建属于你自己的个人博客。\n\u003e\n\u003e ​\t一部分配置，默认已经是配置好的，你只需要修改下面列出的内容即可完成搭建。\n\n\n\n#### 关于博客\n\n```yaml\n---\n# Site settings 配置站点\ntitle: 'your awesome title'\ndescription: 'your web description'\nkeywords: 'your web keywords, another keywords'\nurl: 'https://abc.github.io' # your host\n---\n```\n\n`title` ：用于页面的 title 标签的显示内容\n\n`description` ：网站的简介\n\n`keywords` ：网站的关键词\n\n`url` ：网站域名\n\n\n\n#### 写文章\n\n​\t博客通过解析 `markdown` 文件来部署文章页面的，所以用户写文章只需要写一篇markdown，并放置在站点根目录下的 `_post` 文件夹即可。具体的markdown语法自行上网搜索学习，或使用markdown编辑器进行写作。推荐一款 markdown编辑器：[typora](https://www.typora.io) 。支持 windows 、mac OSX 、Linux 。\n\n关于文章 YAML头信息：\n\n```yaml\nlayout: post\ntitle:  \"post title\"\nsubtitle: 'post subtitle'\ndate:   2018-05-29 08:44:13\ntags: html js css\ndescription: ''\ncolor: 'rgb(154,133,255)'\ncover: ''\n```\n\n关于color：\n\n​\t此处的color用于post页面的顶部位置的背景色。如上面展示图所示为 `rgb(154,133,255)` 色。\n\n​\t对于color的书写，如果颜色代码为 `rgb` 或 `rgba` 又或是 `英文单词` 的话，可以不用引号包裹，但如果颜色代码为 `#123456` 这种16进制码的话，就必须使用引号包裹。所以，在使用中，推荐一致都使用引号，以免错误使用。\n\n​\t当然，如果你在书写文章时，忘记写color的值的话，主题默认会为你填写 `rgb(154,133,255)` 色。就是上图显示的颜色。虽然不影响页面的显示，但如果想要更多彩的页面效果的话，建议在每一篇的头信息里写上 color 值。\n\n关于cover：\n\n​\t此处需填写某一张图片的 `url` ，`url` 值可以是线上的某张图片，也可以是博客目录下的图片。关键是要书写正确。这张图片用于在首页下博客列表里显示，如下图。\n\n![5](/screenshot/5.png)\n\n\n\n#### 博主个人信息\n\n```yaml\n# 博主\nauthor: true\nname: 'your awesome name'\nNickName: 'your awesome nickname'\nwebtitle: 'your awesome webtitle'\nbio: 'your awesome bio'\nabout: true\naboutyou: 'your introduction'\nportraits: '/assets/profile.jpeg' # your portraits image file path\n```\n\n​\t该部分显示在 `关于博主` 页面，与 `社交媒体` 一同在下图显示。\n\n![6](/screenshot/6.png)\n\n关于author：\n\n​\t使用 `true` 或者 `false` 来打开或关闭博主信息卡片，默认 true ，最佳体验也是 true 。\n\n关于about：\n\n​\t使用 `true` 或者 `false` 来打开或关闭博主关于信息，即是否显示 aboutyou 部分的信息。默认 true ，该部分需要在 aboutyou 中输入相关信息，支持在此填写html代码。\n\n\n\n#### 社交媒体\n\n```yaml\n# SNS\nSNS: true\nSNS-icon: #['Facebook', 'weibo', 'qq', 'github', 'Dribbble', 'Twitter', 'instagram', 'weixin', 'Codepen']\n  mail: 'mailto:abc@gmail.com'\n  weixin: '' # 你的微信二维码存放的地址\n  qq: '' # 你的qq二维码存放的地址 or http://wpa.qq.com/msgrd?v=3\u0026uin='你的QQ号'\u0026site=qq\u0026menu=yes\n  github: ''\n  Codepen: ''\n  weibo: ''\n  instagram: ''\n  Twitter: ''\n  Dribbble: ''\n  Facebook: ''\n  Google: ''\n  zhihu: ''\n  juejin: ''\n  twitch: ''\n```\n\n​\t~~主题一共配置了 13种 社交媒体的图标，只要在需要开启的社交账号的名字后填写你的个人主页链接即可，不需要开启的就在那一行的头部用 `#` 注释这一行即可。同样的，如果需要更换每个图标的排列位置，只需要改变他们的每一行排列的顺序即可。~~\n\n​\t在 `SNS` 后填写  `true` 或者 `false` 来打开或者关闭这一部分。\n\n2018/09/28 更新：\n\n![7](/screenshot/sns-icon.png)\n\n- 更新社交图标为 线上地址 ，便于管理与修改。\n- 添加 **Codepen** 图标\n- 修改原来的圆形图标为不规则图标\n\n\n\n#### 首页显示信息\n\n```yaml\n---\nlayout: default\ntitle: your awesome title\npage-title: awesome page-title.\nhome-title: awesome home-title.\ndescription: description\n---\n```\n\n​\t该部分位于 `index.html` 页面，修改 `title` 、`page-title` 、`home-title`  、`description`为个人想要的信息，默认配置的显示效果如下图。\n\n![7](/screenshot/7.png)\n\n\n\n#### 导航栏\n\n```yaml\n# nav 中文字符空格：\u0026emsp;\nnav: # 最佳体验 六个标签 且最好每个标签不超过4中文字\n  首页: '/'\n  标签: '/tags.html'\n  时间线: '/timeline.html'\n  关于博主: '/about.html'\n  友情链接: '/friendLink.html'\n```\n\n​\t默认全部开启他们，当然如果想要自己添加，按照格式填在下方即可，当然页面显示顺序与每一行的位置有关。\n\n\n\n#### 分页\n\n```yaml\n# 分页\npaginate: 2\npaginatepath: ['page:num']\n```\n\n​\t随个人爱好在，在上面填写你需要的在首页一页最多显示多少篇博客的数字。\n\n​\t本地部署的需要使用 `gem install jekyll-paginate` 或 `sudo gem install jekyll-paginate` 安装Jekyll的分页插件。\n\n\n\n#### 代码高亮主题\n\n```yaml\n# 代码高亮 使用rouge\nhighlighter: rouge\n# 代码高亮主题使用pygments主题: autumn\\ default\\ emacs\\ friendly\\ manni\\ murphy\\ pastie\\ perldoc\\ tango 任选一个你喜欢的主题名称填在下面的单引号中\npygmentsTheme: 'default'\n```\n\n​\t代码高亮使用 jekyll3.0 之后的默认高亮引擎 `rouge` 。关于主题，只需要在 `pygmentsTheme` 后填写喜欢的主题名称即可。共有9款主题可选，主题名见上文。\n\n​\t代码高亮的写法：\n\n~~~markdown\n``` css\n*{\n margin:0;\n padding:0;\n}\n```\n~~~\n\n2018/09/28 更新：\n\n![7](/screenshot/博客代码高亮例子.png)\n\n上图为 **代码高亮试例图** ，仅以 html 作为参考例子，其他代码参考 上图，或自行切换测试选择自己喜欢的代码高亮主题\n\n\n\n#### 友情链接\n\n```yaml\n# 友情链接\nfriends:\n  jekyll: 'https://www.jekyll.com.cn/'\n```\n\n​\t按格式填写即可，排序与配置文件里的排序有关。\n\n\n\n#### 页脚\n\n```yaml\n# since\nfooter:\n  since: 2018\n```\n\n​\t用于页脚显示时间。\n\n\n\n#### 评论系统的切换\n\n```yaml\n# 评论 最佳体验 在disqus、livere和Gitment之间三选一\n# disqus 评论\ndisqus: false\ndisqus_url: '' # https://abc.disqus.com/embed.js\n# 来必力评论\nlivere: true\nlivere_uid: 'MTAyMC8zNDI2OS8xMDgwNg==' # MTAyMC8zNDI2OS8xMDgwNg==\n# Gitment评论 OAuth Application\nGitment: false\nGitment_owner: ''  # github用户名\nGitment_repo: ''  # github博客存放的仓库名\nclient_id: ''  # 注册 OAuth Application 后获得的 client_id\nclient_secret: ''  # 注册 OAuth Application 后获得的 client_secret\n```\n\n​\t按申请第三方评论是获取的相关信息在配置文件中进行填写即可。\n\n​\t共有三款评论可供选择，使用 `true` 或者 `false` 开启或关闭某个评论系统。可开启多个甚至全开。当然，最佳体验，开一个即可。\n\n​\t三款评论的样式如下图：\n\ndispus：\n\n![8](/screenshot/8.png)\n\n来必力：\n\n![9](/screenshot/9.png)\n\nGitment评论：\n\n![10](/screenshot/10.png)\n\n​\t三款评论各有各的优势与坏处。出于显示样式与中国大陆网络环境考虑，主题默认开启 `来必力` 评论为最佳体验。当然需要填写好相关的 `livere_uid` 代码。\n\n\n\n#### 文章分享的路口\n\n```yaml\n# Share : weibo, qq, wechat, tencent, douban, qzone, linkedin, diandian, facebook, twitter, google\nsocial-share: true\nsocial-share-items: ['qq', 'wechat', 'weibo', 'twitter', 'facebook']\n```\n\n​\t为了让文章更方便地分享，使用了第三方分享插件[Share.js](http://overtrue.github.io/share.js/)，支持一键分享到微博、QQ空间、QQ好友、微信、腾讯微博、豆瓣、Facebook、Twitter、Linkedin、Google+、点点等社交网站。\n\n​\t只需要填写相关的名称在 `social-share-items` 后即可，显示顺序与书写顺序有关。\n\n\n\n#### 网站流量追综的配置\n\n```yaml\n# 百度统计 在baidu-url里填写自己相关的url代码\nbaidu: true\nbaidu-url: ''\n# 谷歌分析 在google-ID里填写自己在谷歌分析获得的追踪ID\ngoogle: false\ngoogle-ID: ''\n```\n\n​\t在 `baidu-url` 和 `google-ID` 分别填上注册获取的相关信息。使用 `true` 或者 `false` 开启或关闭他们。出于中国大陆网络环境，默认开启 百度统计 ，当然可以多开。\n\n\n\n### License 许可证\n\nHardCandy-Jekyll is licensed under [MIT](https://github.com/xukimseven/HardCandy-Jekyll/blob/master/LICENSE).\n\n\n\n### 求Star 求关注\n\n看到这里，如果你喜欢我的小项目，欢迎下载使用他，也请你为我点个小星星 😜 ，多谢。","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxukimseven%2Fhardcandy-jekyll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxukimseven%2Fhardcandy-jekyll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxukimseven%2Fhardcandy-jekyll/lists"}