hexo+Gitee博客踩坑

最近由于是在忍受不了Github的乌龟网速,下定决心将Github上的项目全都转移到Gitee上了。转移后突发奇想能否用hexo+Github搭建一个博客呢?(之前在Github上搭建的太卡了就放弃了)然后就开始了新一轮的折腾。下面记录一些自己在搭建博客时所踩的坑。

language设置

在next主题的文档中告诉我们设置中文的方法是在站点配置文件中设置:

language: zh-Hans

然而我设置完成后网站却并没有显示成中文。原因是next的主题的language文件中并没有zh-Hans.yml文件只有zh-CN.yml文件。所以应当设置为zh-CN才行。

archive归档页面

这个页面是不需要用hexo new page archive来创建的,并且如果不使用hexo g而直接使用hexo s的话是无法来浏览这个页面的。404页面是需要部署到Gitee上才有用的。

使用百度统计

在按照next文档设置完成后发现百度统计上显示代码未生效,经过几次的检查与重做发现仍是代码未生效。原来百度统计会在代码设置完成后的3个小时内生效,并不是立即生效的。

在使用了百度统计后博客也不会发生任何变化,只是可以再百度统计网站里可以看到博客的浏览数据。而且百度统计的账号与普通百度账号是不通用的(我还登了好几次)。

next的背景动画

在设置next主题的动画背景时,我将主题配置文件canvas_nest设置为true,可是却没有产生任何效果。原因是next主题文件中还没有相应的库,需要自己手动安装。

在主题的source/lib文件夹下运行:

git clone https://github.com/theme-next/theme-next-canvas-nest

之后再在主题配置文件中将动画设置为true即可。

修改博客样式

博客顶部去黑线

next主题顶部的黑线让我看着实在是不舒服,去掉它的办法就是将next/layout/_layout.swig文件中的这句话注释掉就可以了。

自定义样式

next主题提供了一个可以自定义页面样式的地方,就是主题文件夹中的css/_custom/custom.styl文件。我们可以在博客网页中找到需要修改的地方的CSS属性,再在custom.styl文件中作出相应修改。

另一种方法就是在source/CSS文件夹下找到对应的CSS样式文件,然后直接在文件中作出修改,缺点就是如果修改的地方过多,可能不容易知道自己那些地方做出过修改。

自定义字体

使用本地字体设置

由于我个人比较喜欢手写类型的字体,所以我想将网站的页面字体改为手写字体。

首先将本地的字体文件放到next主题的source/fonts文件夹下,然后在css/_custom/custom.styl文件中添加:

@font-face {
  font-family: 'fontname';
  src: url('/fonts/fontname.woff2');
}

最后在主题配置文件中的font部分进行设置即可,例如

global:
  external: false
  family: yourfontname
  size:

减小中文字体文件体积

由于中文字体的文件较大,会拖慢博客页面的加载速度。只有尽可能的减少字体文件的体积从而提高网页的加载速度。

首先我们可以使用FontCreator这个软件来对我们的字体文件进行处理,删除字体文件中不需要的部分。如罗马字母、日文平片假名和中文繁体及不常用字等。之后再使用transfonter网站将文件转为woff2格式可进一步减小字体文件体积。

虽然我做过之后感觉网页的加载速度还是有点慢,但还勉强可以接受。希望之后能找到一个更优的处理方法。

你可能感兴趣的:(hexo+Gitee博客踩坑)