在Github Pages（一）：一个最基本的个人网站中，我们已经介绍了如何使用Github Pages来制作网站框架，例如完全重复HTML5 UP网站上的某个模板。 熟悉模板后，您已经可以编辑博客页面（html）并链接到主页。 甚至可以有出色的排版和插图。
但对于博客网站来说，这还不够。 许多交互功能也需要自动添加和单独理解，包括评论框、搜索栏、点击计数、分享按钮、网站导航、网页布局和图像滚动。
这篇文章是一个大合集，总结了我一开始看到的个人网站的交互功能，以及各个方案的优缺点。
注：虽然列出了这么多插件，但这些只是技术储备。 如果你是网站菜鸟，建议阅读Github Pages（三）：使用Hexo博客生成工具。
搜索功能
搜索功能包括两部分。 一是可以快速找到网站上的博客，方便网站的使用； 另一种是在站外的搜索引擎上找到你的博客，这对网站的推广很有帮助。 然而，当我选择搜索工具时，我发现很难为静态网站编写站内引擎，所以我暂时使用了第三方（Google）来实现搜索功能。
注：这篇文章是之前写的，然后我在Github Pages中完成了站内搜索（四）：Hexo进阶-NexT本地搜索引擎移植
尝试在 php 站点内搜索失败
在网站上搜索一个文件，直接写一段PHP来遍历这个网站上的文件是最靠谱的，于是找到了一个高手写的代码（月光软件文章）。 但这段代码有两个函数（eregi 和 split）在 PHP7 中已经过时了。 所以我对此文件 search.php 做了一些更改（使用 preg_match 和explode）。
使用时只需在网页中调用这个search.php即可，例如
目前这个搜索引擎的效果就是简单的列出所有搜索到的文件链接，足以美化这个效果了。
测试PHP文件时，必须打开本地Web服务。 启动方法（Mac）请参见本文“网页编辑后预览”部分。
失败的原因是Github Pages是静态的，无法运行php程序。 但这是一次有趣的学习经历。
谷歌自定义搜索
介绍微软的自定义搜索有两个任务，一是构建自定义引擎（Google Custom Search），二是向微软提供网站信息（Google Search Console）。
单击“Microsoft 自定义搜索”，创建搜索引擎，然后在“外观”选项卡中找到“保存并获取代码”按钮。 只需将此代码添加到要显示结果的网页即可。
谷歌定制引擎的搜索框有点丑，十有八九和你的主题不一样。 幸运的是，这个引擎还支持分页。 本站的搜索功能是通过分页的形式实现的：首先选择一个分页引擎主题，然后单独建一个Search.html，添加刚才提到的自定义引擎代码，然后在其他网页需要的地方输入一个搜索框添加了本机主题搜索框。
这样每次搜索都会跳转到搜索结果页面。 当然，你也可以使用“弹出”主题，将动作直接放在这个页面上，就可以达到直接在这个页面上显示结果的效果。
向 Microsoft 提供网站信息也很重要，这决定了 Microsoft 对您网站的搜索结果的质量。 我先在Google Search Console中注册了一个帐户，添加了这个网站，然后在管理界面的“抓取”和“站点地图”中添加了一个sitemap.txt文件，里面有这个网站的所有网页地址，这样微软就知道了这个站点 网站和各个网页的位置（只添加站点而不提交地图也是可以的html评论框，这关系到微软抓取网页的效率）。
目前搜索“博客”的效果如下（广告是不可避免的，毕竟是免费版本）。 当我频繁更换网站时，Google 的滞后就很明显。
使用我的自定义引擎搜索“博客”
其实为了增强疗效，可以向微软提交更多的信息，包括一些关键词，这个我没有考虑过。
百度自定义搜索
百度自定义搜索似乎和微软类似，包括两个步骤：自定义一个引擎添加网页（百度自定义搜索），为百度提供网站信息（百度站长工具）。 我这里就不详细说了。
然而，Baidu 和 Github Pages 之间的兼容性实际上是有问题的。 百度抓取github.io的效率明显比微软低很多（搜索同一个Github Pages页面就知道，我把github.io网址提交给百度没有任何效果）。 所以我的第三方搜索引擎还是选择了微软。
评论功能
评论功能是博客的重要交互功能，但评论是动态的，而Github Pages是静态的html评论框，需要使用第三方服务来实现。
新浪评论框的尝试失败
在网上搜索之后，我第一个想到的解决方案是微博开放平台，因为几乎每个人都有微博。 从演示的效果来看，评论功能采用了微博评论框，结合微博分享、微博博赞按钮两个插件，和微博中评论是一样的（甚至还有微博评论等功能）显示直接显示微博个人页面），相当于将个人博客和微博社区结合起来。
新浪官方提供的各种插件
作为官方插件，需要先申请Appkey。 这件事有两个步骤，一是在微博开放平台申请账号，然后提交身份验证。 二是在微博上开放平台：网站访问访问您的网站，然后提交初审。
Github Pages其实是海外网站，不需要提供备案信息。 只需选择海外网站的验证，在您的网站上进行域名和IP查询（很多网站都可以查询），然后将结果上传到图片上即可。
在网页中添加评论框并不复杂，只需点击微博开放平台：评论框，然后在网页中添加顶部代码即可。 其他插件也是如此，本地预览可以很快看到效果。
但微博插件在Github Pages中无法正常使用。 一开始我并不知道原因，但是当我用Chrome浏览器打开网页时，我发现这种插件居然被浏览器安全新政策禁止了。 这对于个人网站来说当然是不可接受的，因为您不能要求访问者更改其浏览器设置才能访问您的网站。
进一步排查这个插件不安全的原因，发现微博插件不支持https，现在Github Pages使用https域名。 进入Github Pages库的设置，你会发现这样一个很难修改的选项。
强制执行 HTTPS
— 您的网站必需的，因为您使用的是默认域 (hans2936.github.io)
也就是说，除非我自己购买域名，否则这个选项无法更改。 而且，评论系统好像没有必要把网站从https改成http，这个计划就搁浅了。
拉皮利
第二个解决办法就是找一些提供评论服务的网站。 我找到了现在比较流行的来比利。
加入这项服务比新浪评论框简单得多。 先注册一个账号，然后点击“体验”、“管理中心”，就可以看到代码，如图：
最近流行的评论系统来比利
这个服务的好处是可以登录所有国外的社交网站（QQ、微信、微博），而且界面也很好看。
但来比利有一个缺陷，那就是加载速度太慢。 看了博客前两段感觉插件还没有加载。 一开始我以为这没什么害处，直到我发现导航栏要等到评论框加载完之后才会弹出。 这有点影响体验，所以不使用这个方案。
git
最后终于找到了一个比较合适的评论系统：Tutorial: Gitment。
这个教程已经很详细了，唯一需要注意的是，和search.php一样，必须打开本地web服务器才能查看效果。
这个评论系统是直接把Github问题迁移到自己的网页上。 它有三个用途，第一个是连接Github页面和Github问题，这样就连评论和网站都在同一个库上； 第二个用途是Gitment是一个优秀的评论框，支持markdown语句，并且自带Like it； 第三个用途是加载速度快。 唯一的好处就是只能使用Github账号评论，不过我觉得还可以接受，因为本来就是技术博客，提高评论门槛或许也不是坏事。
这就是我的评论系统解决方案。
Gitment，好用又不受欢迎
分享按钮
分享也是博客网站重要的互动功能。 国外更重要的是支持陌陌和微博的分享，尤其是陌陌。
我使用的分享按钮来自Github：share.js。 这个Github文件夹的Readme中有一个教程，但我下载了整个包，仔细查看了演示页面，然后将其移至我的网站。
现在这个分享按钮并不是腾讯或者新浪提供的原生插件。 对于微博和QQ，则跳转到分享页面。 对于Momo来说，它在Momo中打开这个网站，然后实现共享。 因为有微博评论框的经验，所以不坚持原生插件，效果也还不错。
数数
统计博客列表中的评论数、点击数和点赞数，可以让访问者快速找到热门文章。 也可以为进一步排序提供依据。 统计数据也是动态的，使用第三方服务。
我用的柜台是蒜子的。 教程就是教程：不用大惊小怪，很简单，粘贴上面的代码，进入网页即可。 该统计数据分为本网站的点击次数、本网站的访问次数和本页面的点击次数。
但现在点击统计仅限于本页面，没有传递到博客列表。 另外，评论和点赞的统计比点击数更有意义。 Gitment 应该可以做到，但是官方还没有解决方案。 我们稍后再开发这些。
网页设计使用 Markdown 编辑网络博客
写博客的时候，如果直接敲html的话，体验不好。因为要不停的敲一些
, , 此格式的开头和结尾。 虽然习惯了之后乳胶写作并没有什么问题，但是写个人博客还有一个更简单的方法，那就是使用Markdown编辑器。
Markdown句型是特别适合写日志的句型。 我直接从App Store搜索了一个编辑器，叫MWeb，还是蛮好用的。 写完后可以直接导入为html格式，然后将文字取出来粘贴到博客页面。 这个过程只需要注意图片、列表等特殊部分与网站模板的兼容性即可。
App Store 中随机发现的 MWeb
例如，该工具支持物理方程的编辑和导入，这是通过MathJax实现的。 编辑工具在导入html时会手动转换格式，但此时要注意检测网页的引用：
MathJax.Hub.Config({TeX: {equationNumbers: { autoNumber: "AMS" } }});
使用Hexo等博客发布工具更简单，省去了导入html、直接编辑Markdown、添加hexo g命令制作网页的麻烦。
编辑网页后预览
网页预览有四种形式：
一、直接用浏览器打开html，这绝对是最快的。 但有些插件无法显示。 例如，我的网站无法使用这些方法来测试Gitment和search.php。 但大部分工作还是要靠工作完成。
其次，使用Adobe Dreamweaver这样的专业工具来检测，功能我没有开发过，但是检测网页错误以及批量查找/替换某些单词是非常重要的。
三、打开本地Web服务器。 这是运行网站上所有插件甚至测试动态模块的完美方式。 具体步骤请参见简书博客：Mac OS X Web Server。 比较重要的命令是apachectl：
sudo apachectl start
sudo apachectl stop
启动 apachectl 后，将网站文件夹复制到 /Library/WebServer/Documents，然后打开网站文件夹。 博客上也写了一些中间功能，比如如何修改路径和配置。
第四，如果你使用Hexo博客工具，一个hexo s命令就可以了。
返回底部按钮
当页面很长时，“返回底部”按钮非常有用。 这需要一段javascript代码来实现。 我在Google上随机找到了一个，改变了图标和大小，也可以看到back.js这个文件。 确认按钮图片位置正确后，引用即可。
图像滚动 图像滚动插件
这个功能对于博客来说可有可无，但是对于普通网站来说，对于宣传新闻、销售产品还是很有用的。 我觉得很有趣，就留在首页循环播放日志。 这应该是我网站唯一不那么简单的功能了。
我用的插件叫Nivo Slider，用起来比较舒服，因为图片和图例是分开的，设置也很多。 我尝试了素材网站上的几个插件，但没有一个能正常工作。 不过Nivo Slider有一个问题就是图片的规格要一样，而且不能太方（我都是1920x960），不然在笔记本端还好，但在上面就会出现显示问题移动端。
单击 Github：Nivo Slider，下载并学习演示并将其添加到您的网页。
手机滑动的实现
Nivo Slider本身并不支持手机，所以要找到那两个小按钮确实很麻烦。 所以我找到了一位博主威尔·里斯(Will Rees)。 他讲述了如何使用一段支持手机滑动命令的Hammer.js代码来实现Nivo Slider的左右滑动。
你用手机打开我的网站就可以看到疗效。 不过，由于我刚刚对 Nivo Slider 做了一点改动，所以我只能在手机上左右滑动，而无法用中指悬停。 完美的解决方案可能是为手机找到一个单独的插件。
关于，版权
考虑到如今无署名转载现象比比皆是，因此也有必要在某个地方声明网站内容的版权。 在网页上添加版权声明其实非常简单。 只需转到版权页面 Creative Commons，单击页面底部的“在您自己的作品中使用此许可合同”即可找到代码，或者也直接单击此处的链接。
该证书是可更改签名的非商业用途证书。 如果您需要其他新政策，还可以前往 Google 查找其他证书名称。 基本上，首先出现的就是这个创意共享合同。
总结
至此，我总结了学习过程中遇到的各种功能插件。 我是一个业余爱好者，我还在学习很多细节。 我相信会有更好的解决方案。
