Chic自定义案例-包含评论、阅读量、样式等

[KeepUpCode]

自己加了评论和阅读量。
连接

[YuanLiChenAi]

引入gitalk评论系统🎉
传送门

[Siricee]

作为 Chic 的作者
我有对自己作品的取舍，有些功能在我看来是非必要功能，不会集成到核心代码中所为官方功能提供。
但我本人支持使用者的自定义行为，如果你需要相关功能，可以看看使用者的案例和源码并自行添加。

之前有很多人问我关于以下几个功能实现的重复问题，这里可以看他的案例。
@YuanLiChenAi 的自定义效果
包含：

• 英文转中文
• 自定义css样式
• 主题字体
• 自定义首页链接图标
• 部署Gitalk评论系统
• 增加站点浏览统计
• 增加博客年份

感谢 @YuanLiChenAi 的总结。

[YuanLiChenAi]

自定义效果

[FoxerLee]

添加文章的字数统计和阅读时长
方法

[Zhou-Bill]

添加大图与添加额外页面
大图demo 可以看最后那张图

[pengxiaotg]

自定效果

• 中文
• url优化
• 评论
• 评论邮件提醒
• 菜单加入icon
• 访问量统计

[An-Jhon]

主题作者您好，我是您的主题使用者之一，我非常喜欢您开发的这款主题。我在使用主题过程中有一个小的bug想反馈给你😂
在博文中我有时候会写很长的推导公式，但是在Chic主题中，当公式过长时不会自动换行；但是在线下的markdown文档中显示没有问题。
如果您有空可以看看这个问题。
这是案例：https://anjhon1994.github.io/archives/
第一篇文章【sklearn - 逻辑斯蒂回归(Logistic)】中。

[Baileyswu]

主题作者您好，我是您的主题使用者之一，我非常喜欢您开发的这款主题。我在使用主题过程中有一个小的bug想反馈给你😂
在博文中我有时候会写很长的推导公式，但是在Chic主题中，当公式过长时不会自动换行；但是在线下的markdown文档中显示没有问题。
如果您有空可以看看这个问题。
这是案例：https://anjhon1994.github.io/archives/
第一篇文章【sklearn - 逻辑斯蒂回归(Logistic)】中。

能显示出来已经不错了，我的大段公式都显示不出来……不知道为啥不支持align的代码块……比如这里

[happy2h]

作为 Chic 的作者
我有对自己作品的取舍，有些功能在我看来是非必要功能，不会集成到核心代码中所为官方功能提供。
但我本人支持使用者的自定义行为，如果你需要相关功能，可以看看使用者的案例和源码并自行添加。

之前有很多人问我关于以下几个功能实现的重复问题，这里可以看他的案例。
@YuanLiChenAi 的自定义效果
包含：

• 英文转中文
• 自定义css样式
• 主题字体
• 自定义首页链接图标
• 部署Gitalk评论系统
• 增加站点浏览统计
• 增加博客年份

感谢 @YuanLiChenAi 的总结。

作者你好，你给出的这个案例已经不能访问了，我想请教一下怎么修改博文字体大小和设置博客首页右上角为中文样式，麻烦了

[yienxi]

引入gitalk评论系统🎉
传送门

兄弟，请问你博客中新增的导航栏 是如何操作的？期待（除了默认的四个导航外）

[Myoontyee]

• Chic实现过长博文名省略方案

教程传送门
效果查看

[Myoontyee]

引入gitalk评论系统🎉
传送门

兄弟，请问你博客中新增的导航栏 是如何操作的？期待（除了默认的四个导航外）

他那个是hexo new page + 新页面名，本质是新增了一个page

[Myoontyee]

• Chic在Link处添加自定义icon
  • 相较于已有教程修复1个BUG

Hexo + Chic如何添在link处加新的icon（svg）图标

[Myoontyee]

• Hexo + Chic内LaTeX的显示问题，复杂公式的显示问题，公式重复显示问题，解决方案见Hexo + Chic如何支持数学公式，特别是复杂LaTeX公式，公式会重复显示、LaTeX公式本地预览可以显示deploy上去无法显示解决办法

• 其他诸如icon设置、样式、置顶页面写法、类别页面、过长博文名省略、首页logo去除等，直接看教程归纳，见下

  • Hexo + Chic配置教程归纳

[Myoontyee]

• Hexo + Chic自定义<code>样式，见Hexo + Chic设置kbd样式，code、samp等样式亦可参考
• 效果如下图

[Myoontyee]

• = 实现CV简历页面的基础 =

  • Hexo + Chic 实现同一行 左中右分别布局（left-center-right in the same line），见Hexo + Chic 在同一行实现左中右内容布局，Markdown（Typora）与Obsidian亦可参考

  • 效果如下图

[Myoontyee]

• 点击查看目前已有教程归纳，也可以走下表
• 最后更新：2022年4月28日09:29:07

序号	备注	链接
基础操作	-	-
1	部署报错	Hexo部署的页面出现错误，一个debug思路与工具
2	推送GitHub	Hexo安装+个人网站建立+推送至GitHub
3	源码备份	GitHub+Hexo的个人博客，blog，GitHub Page如何实现一个分支作为博客源码，一个分支用于全部源码备份？
4	修改博客路径为.github.io	GitHub的个人博客，blog，GitHub Pages如何修改地址，如何修改published site？
5	检查图片路径	Hexo deploy部署后的页面图片引用路径如何检查？
6	安装插件报错处理	Hexo安装插件遇上5 vulnerabilities (2 moderate, 2 high, 1 critical)类似的报错，让使用npm fund寻求更多细节，如何解决
7	端口报错处理	Hexo生成时提示FATAL Permission denied. You can't use port 4000.解决办法
8	安装报错处理	安装Hexo，npm install -g hexo的npm ERR报错解决
9	443报错处理	Git-Bash，WSL2内GitHub无法访问、443 Operation timed out的解决办法
10	npm无法运行	npm无法在PowerShell运行解决办法
首页
1	①搜索	Hexo Chic模板添加搜索栏
2	②css样式	②样式引用参考Hexo + Chic，全局引用css样式，从标签、分类or打开文章第二面，icon无法正常显示解决办法 ②部署见Hexo + Chic如何在任意位置添加新的icon（svg）图标——以首页添加友链及其logo为例
3	③新建页面	Hexo如何新建一个新的页面，page，栏目？
4	④Chic去logo	Hexo + Chic 去除首页的圆形头像logo
5	⑤超链接	Hexo + Chic 首页实现带文字的超链接
6	⑥加icon	Hexo + Chic如何添在link处加新的icon（svg）图标
7	⑦加icon（任意位置）	⑦见Hexo + Chic如何在任意位置添加新的icon（svg）图标——以首页添加友链及其logo为例 若⑦涉及样式全局引用问题，见Hexo + Chic，全局引用css样式，从标签、分类or打开文章第二面，icon无法正常显示解决办法
8	⑧站点浏览统计	⑧见Hexo + Chic 增加站点浏览统计 ⑧数据未加载出来前样式见Hexo + Chic busuanzi未显示阅读字数、时长等情况下的等待图标添加（旋转菊花等）
分栏-文章
1	①	①见Hexo + Chic如何在任意位置添加新的icon（svg）图标——以首页添加友链及其logo为例 ①无法正常显示见Hexo + Chic，全局引用css样式，从标签、分类or打开文章第二面，icon无法正常显示解决办法
2	②	②见Hexo + Chic过长博文名如何实现省略，过长博文名，实现三个点省略方案
特殊页面-CV
1	CV简历页面	基础实现见Hexo + Chic 在同一行实现左中右内容布局，Markdown（Typora）与Obsidian亦可参考
特殊页面-类别
2	类别页面	类别页面过长博文名省略，见Hexo + Chic 类别category页面过长博文名的三个点省略方案
文章-文章头
1	①emoji	①见Hexo + Chic 添加emoji支持，并使用emoji
2	②字数、阅读时长	②见Hexo + Chic 添加文章字数和阅读时长
3	③浏览量	③见Hexo + Chic 增加单篇文章浏览统计
文章-文章中
1	①引用自己写的别的博文	①见Hexo如何实现对博客内，同一个文件夹下其他文章的引用？
2	②mermaid	②见Hexo + Chic + mermaid配置
文章-数学公式
1	LaTeX	见Hexo + Chic如何支持数学公式，特别是复杂LaTeX公式，公式会重复显示、LaTeX公式本地预览可以显示deploy上去无法显示解决办法
文章-kbd样式
1	kbd样式	见Hexo + Chic设置kbd样式，code、samp等样式亦可参考
文章-表格与文章尾
1	①表格+代码块	①见Hexo, Obsidian, Typora等如何制作包含代码在内的表格？如果需要有代码行数呢？
2	②表格+滚动条	②见Hexo + Chic 过长的表格使用滚动条
3	③插图片	③见Hexo + Chic + Typora如何实现便捷的文章插入图片方案？Hexo文章图片无法显示问题如何解决？
4	④修改Tags	④见Hexo + Chic修改Tag(s)前面的井号
5	⑤打赏按钮	⑤见Hexo + Chic实现打赏按钮，鼠标移动、浮过去会显示对应图片
6	⑥评论区	⑥见Chic配置Gitalk，添加评论区 ⑥常见错误见Hexo + Chic配置Gitalk显示error=redirect_uri_mismatch&，点击登录GitHub返回主页解决办法
功能-搜索
1	搜索	Hexo + Chic如何部署到搜索引擎如Google上使得其能被搜索到？提交到谷歌搜索（谷歌收录）解决办法 Hexo + Chic 如何上交网站地图sitemap.xml给Google？如果显示无法获取Couldn't Fetch应该怎么办？

[rtpacks]

表中chic自定义Icon都被删除了，这里提一下
问题：主页中自定义icon图标，在style.styl中@import "..." 加载失败，加载iconfont字体未404，还未找到原因。
解决方案：如果不嫌麻烦，直接在themes/Chic/Chic/layout/_partial/head.ejs中加入
<link rel="stylesheet" href="/fonts/custom/iconfont.css"> 直接加载即可，注意位置，themes/Chic/source/fonts会被编译加载到public目录下。