Skip to content
我的博客地址:https://haoqchen.site/
CSS HTML JavaScript
Branch: master
Clone or download
Latest commit 7a48f3a Mar 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_includes add map-server and move-base-code Nov 28, 2018
_layouts delete # before title Nov 21, 2018
_posts delete some file Mar 11, 2019
css change catalog size Nov 22, 2018
fonts add huxpre style Nov 20, 2018
img add gallery Mar 10, 2019
js add mouse line Nov 21, 2018
less add huxpre style Nov 20, 2018
pwa add huxpre style Nov 20, 2018
search add search Nov 21, 2018
.gitignore add huxpre style Nov 20, 2018
404.html add huxpre style Nov 20, 2018
CNAME Create CNAME Nov 29, 2018
Gruntfile.js add huxpre style Nov 20, 2018
LICENSE add huxpre style Nov 20, 2018
README.html update link to local Nov 29, 2018
README.md add add_new_article.sh Jan 1, 2019
_config.yml update gitalk clientID Nov 29, 2018
about.html add blog go-through-binary-tree Nov 22, 2018
archive.html add post date Nov 22, 2018
feed.xml add huxpre style Nov 20, 2018
googlee401be1e0c26d50b.html add google search console Nov 23, 2018
index.html change intro page Nov 20, 2018
offline.html add huxpre style Nov 20, 2018
package.json add huxpre style Nov 20, 2018
sw.js change icon Nov 20, 2018
url.txt add map-server and move-base-code Nov 28, 2018

README.md

最终效果:https://haoqchen.site
如果喜欢可以直接使用我修改后的主题。

但是请一定要将我的信息替换成你自己的,另外请不要保留我的博客。

主体来源于:Hux Blog
跟着这个博客教程走:如何快速搭建自己的github.io博客
同时受到了这个博客的很大帮助:利用 GitHub Pages 快速搭建个人博客

以下部分借鉴GJXS1980

动态鼠标曲线

添加模块canvas-nest.min.js到js目录下 修改layouts/post.html文件在开始添加下面代码

 <!-- canvas-nest.min.js -->
<script type="text/javascript" src="../../../../js/canvas-nest.min.js"></script>

返回顶部

把在rocket.css、signature.css和toc.css下载到css的目录下,然后在 include目录下的head.html文件的头部添加下面代码:

<link rel="stylesheet" href="/css/rocket.css">
<link rel="stylesheet" href="/css/signature.css">
<link rel="stylesheet" href="/css/toc.css">

把在totop.js和toc.js下载到js的目录下,然后在include目录下的footer.html的最后添加下面代码:

<a id="rocket" href="#top" class=""></a>
<script type="text/javascript" src="/js/totop.js?v=1.0.0" async=""></script>
<script type="text/javascript" src="/js/toc.js?v=1.0.0" async=""></script>

显示站点访问总量

具体教程参考:不蒜子

添加CSDN博客

在_config.yml用户名那里添加一栏:CSDN_username: u013834525
_includes/sns-links.html中对应位置(其他网站账户附近)添加

{% if site.CSDN_username %}
    <li>
      <a target="_blank" href="http://blog.csdn.net/{{ site.CSDN_username }}">
        <span class="fa-stack fa-lg">
          <i class="fa fa-circle fa-stack-2x"></i>
          <i class="fa fa-CSDN fa-stack-1x fa-inverse">C</i>
        </span>
      </a>
    </li>
{% endif %}

以下部分借鉴利用 GitHub Pages 快速搭建个人博客

百度统计

直接申请,然后在_config.yml中填写码就行。

删除friend

直接将_config.yml中的friend注释了就好。

修改网站图标

在博客img目录下找到并替换favicon.ico这个图标即可,图标尺寸为32x32。

增加Gitalk评论功能

参考为博客添加 Gitalk 评论插件
以及官网Gitalk

以下是我自己的一些更改

删除portolio

根据Jekyll官网的说法,只要直接删除文件夹即可

增加搜索栏

https://github.com/HaoQChen/jekyll-search
另外我修改了搜索栏的位置,放到了右上方。只需要修改增加到_includes/footer.html中设置位置的px值即可。

<div style="position: fixed; right: 16px; top: 62px;">
    <img src="/search/img/cb-search.png"  id="cb-search-btn"  title="双击ctrl试一下"/>
</div>

删除标题前的#

只需要删除_layouts/post.html中189行的icon中的#即可,应该可以修改成任意值。

修改文章列表中的排序

原来只是按照年份排序的,我增加了月份。修改archive.html中59行为

{%- assign _currentdate = _article.date | date: '%Y-%m' -%}

并且每篇文章我也增加了日期,在副标题下添加这一句

<h4 class="post-date">
    {{ _article.date | date: '%Y-%m-%d' }}
</h4>

导航栏分级标题

根据#116来修改的。找到css目录下的hux-blog.min.css,不知道为什么我的sublime显示这个文件只有一行,很长的一行。我尝试过在一些网站恢复格式,但是保存后导致网页显示有问题。最后就只能在这个只有很长一行的文件中搜索到相应位置修改。
这里需要注意的是,如果想h1、h2等都不同,需要删除逗号,要注意格式~~~

更改最底下的作者链接

貌似链接到作者的github获取star数,加载网页会比较花时间,我就直接删除了,并修改了一下下。主要修改都在_includes/footer.html

修改About中只留下中文自我介绍

主要修改about.html。删除了<!-- Language Selector --><!-- English Version -->。最主要要将multilingual: false

在谷歌、百度搜索引擎中登记自己的网站

自己刚建的网站别人是搜索不到的,搜索引擎的爬虫不会这么快爬到你的网站,但是你可以在谷歌和百度中进行登记,这样可以加快进程(也要等几天)。
要查看自己的网站是否已经被某个搜索引擎收录,可以在搜索框中输入:site:https://haoqchen.github.io/
登记方法:

  • Google网站站长Google Search Console。在这里添加资源,并按要求验证即可。我是选择了第一个,下载html文件,然后放在主目录下(跟archive同一目录)。我不会用什么sitemap,就很蠢地一篇篇博客提交给Google去抓取,地址在旧版Search Console->抓取>Google抓取工具。添加每一篇的地址,然后点抓取,然后点请求编入索引(最好抓取一篇请求一篇,而且一次不要提交太多,隔天吧,我的请求到后面出现错误,不知道为什么)。这样你的博客就能出现在site:https://haoqchen.github.io/中了,也可以直接在Google中搜索到了。
  • 百度链接提交。百度也有要验证网站的~~~我忘了当时是怎么进去的了。(github禁止了百度的爬虫,所以怎么设置,百度都不可能搜索到博客的。需要另外搞。)

安装本地调试

gem版本太低,更新步骤太复杂,放弃了。

域名

尝试买了一个域名,想让百度搜索引擎能爬到,然后在coding.me上也弄一个类似github pages的,将百度或者国内的重定向到coding.me,最后放弃。目前域名全部重定向到给github pages,但github.io的域名就不能用了~~~~而且登记搜索引擎等等这些又要重新弄,很烦。

  • 2018-11-29决定放弃coding.me。百度搜索引擎太垃圾,coding.me连本ReadMe显示都有问题,不想浪费时间了,让它去抓取CSDN吧,在CSDN上发布一篇好了。

谷歌分析

在官网创建账号和地址什么的,然后将ID填到_config.yml的ga_track_id:就好。

自动化脚本

增加了一个add_new_article.sh脚本,只要add_new_article.sh article_title就可以自动完成img中模板文件夹的复制,模板md文件的复制、重命名以及模板文件中一些基本信息的替换

@TODO

  • 专栏
  • 能不能将给博客的点赞重定向到给github点赞

建议

  • 多看github中的issue,很多问题其实别人都遇到过了,有些甚至给出了解决方法。
  • 域名建议去阿里云的万网买。。。。百度的解析只有自己的百度搜索引擎,真的坑。
  • 如果更新了域名,记得重新申请一下Gitalk的ClientID,不然无法评论
You can’t perform that action at this time.