SakuraTears的博客

越努力越幸运

搭建自己的Hexo博客（3）

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 9.2k 阅读时长 ≈ 8 分钟

前言

接 搭建自己的Hexo博客（2） 这篇文章，时隔一段时间，我对自己的博客陆陆续续又进行了部分优化，特地总结了下。

正文

图片存储问题

原来blog的图片也随静态页面托管在Github Pages 上的，后来页面访问加载速度很慢，而且图片本来较大，上传至Github上也是比较费劲的。

就考虑到将其存储到OSS服务上，由于我的域名没有经过网络备案，因此无法开启CDN服务，开启CDN服务后可以进一步提高图片加载速度。

我的域名在阿里云申请的，进而选择了阿里云的OSS服务。

PS：当然，对于阿里云，CDN服务和OSS服务都是要收取一定费用的。

我们登陆阿里云，选择对象存储OSS服务，如未开通请选择开通，而后新建一个我们blog的Bucket，找到文件管理选项，选择上传文件，上传我们的blog图片，上传成功后，可以通过复制图片URL的方式拿到图片地址，将博文中的图片地址指向此路径即可。

upload successful

upload successful

因为上传到OSS图片并在blog中使用后，图片的地址会被暴露在网页上，为了防止图片地址被盗用，我们可以设置只允许我们的域名可以访问图片，以进一步确保安全，如下：

upload successful

添加相册功能

我们为blog添加相册功能，进一步美化blog。

我们可以为相册增加一个标签，如图所示，点击进入到相册页面。

upload successful

在 next 主题的config文件里添加相册(photos)标签，如下：

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  support: /support/ || support
  photos: /photos/ || photo

PS: 如果不显示中文（相册），只显示photos，需要在next主题里的languages/zh-Hans.yml 里配置 photos: 相册。

添加完标签后，回到hexo的source文件夹，在里面新建photos文件夹，并在该文件夹里新建index.md 文件，内容如下：

1
2
3
4
5
6
7
title: 相册
comments: false
type: photos
noDate: true
---

<div class="ImageGrid"></div>

ImageGrid的div即用来存放相册的一个div。

我们在博客的根目录下新建photosTool.js，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
"use strict";
const fs = require("fs");
const sizeOf = require('image-size');
const path = "source/images_backup/photos";
const output = "source/photos/photos.json";
var dimensions;
fs.readdir(path, function(err, files) {
    if (err) {
        return;
    }
    let arr = [];
    (function iterator(index) {
        if (index == files.length) {
            fs.writeFile(output, JSON.stringify(arr, null, "\t"));
            return;
        }
        fs.stat(path + "/" + files[index], function(err, stats) {
            if (!files[index].endsWith(".jpg") || files[index].endsWith(".jpeg")) {

            }
            if (err) {
                return;
            }
            if (stats.isFile()) {
                if (files[index].endsWith(".jpg") || files[index].endsWith(".jpeg") ||
                    files[index].endsWith(".mp4") || files[index].endsWith(".png") || files[index].endsWith(".gif")) {
                    dimensions = sizeOf(path + "/" + files[index]);
                    console.log(dimensions.width, dimensions.height);
                    arr.push(dimensions.width + '.' + dimensions.height + ' ' + files[index]);
                }

            }
            iterator(index + 1);
        })
    }(0));
});

这个js用于获取图片的长和宽，以便可以获得更好的展示效果，同时，她会生成一个photos.json的文件，里面保存这图片的长和宽，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[
	photo-1-1.jpg,
	"3200.2000 photo-10.jpg",
	"1920.1200 photo-11.jpg",
	"1920.1080 photo-12.jpg",
	"1920.1200 photo-13.jpg",
	"1920.1080 photo-14.jpg",
	"1920.1080 photo-15.jpg",
	"1920.1200 photo-16.jpg",
	"1920.1080 photo-17.jpg",
	"1920.1186 photo-18.jpg",
	"1920.1080 photo-19.jpg",
	"1024.610 photo-2.jpg",
	"2200.1400 photo-3.jpg",
	"1200.750 photo-4.jpg",
	"3500.1898 photo-5.jpg",
	"1080.1920 photo-6.jpg",
	"1600.1120 photo-7.jpg",
	"1728.1080 photo-8.jpg",
	"1920.1080 photo-9.jpg"
]

这个文件我生成在了photos文件夹下。

可以看到它们的图片是从source/images_backup/photos路径下获取的。

为提高相应速度，需要将这些图片放到阿里云OSS上，存放到上面后，我们需要一个photos.js来解析图片并展示。

找到themes/next/source/js/src文件夹，新建photos.js文件，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
photo = {
    page: 1,
    offset: 20,
    init: function() {
        var that = this;
        $.getJSON("/photos/photos.json", function(data) {
            that.render(that.page, data);
            //that.scroll(data);
        });
    },
    render: function(page, data) {
        var begin = (page - 1) * this.offset;
        var end = page * this.offset;
        if (begin >= data.length) return;
        var html, imgNameWithPattern, imgName, imageSize, imageX, imageY, li = "";
        for (var i = begin; i < end && i < data.length; i++) {
            imgNameWithPattern = data[i].split(' ')[1];
            imgName = imgNameWithPattern.split('.')[0]
            imageSize = data[i].split(' ')[0];
            imageX = imageSize.split('.')[0];
            imageY = imageSize.split('.')[1];
            li += '<div class="card" style="width:330px">' +
                '<div class="ImageInCard" style="height:' + 330 * imageY / imageX + 'px">' +
                '<a data-fancybox="gallery" href="http://sakuratears.oss-cn-beijing.aliyuncs.com/blog/photos/' + imgNameWithPattern + '?raw=true" data-caption="' + imgName + '">' +
                '<img src="http://sakuratears.oss-cn-beijing.aliyuncs.com/blog/photos/' + imgNameWithPattern + '?raw=true"/>' +
                '</a>' +
                '</div>' +
                // '<div class="TextInCard">' + imgName + '</div>' +
                '</div>'
        }
        $(".ImageGrid").append(li);
        $(".ImageGrid").lazyload();
        this.minigrid();
    },
    minigrid: function() {
        var grid = new Minigrid({
            container: '.ImageGrid',
            item: '.card',
            gutter: 12
        });
        grid.mount();
        $(window).resize(function() {
            grid.mount();
        });
    }
}
photo.init();

可以看到，我们主要是解析原来生成的photos.json文件，获得长和宽，并将其放到card框里，同时图片是通过OSS获取的。

要使该js生效，需要被引用并加载，打开themes/next/layout/_scripts/commons.swig文件，添加photos.js的引用，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{% if page.type ==='photos' %}
{%
  set js_commons = [
    'src/utils.js',
    'src/motion.js',
    'src/minigrid.min.js',
    'src/photos.js'
  ]
%}
{% else %}
{%
  set js_commons = [
    'src/utils.js',
    'src/motion.js'
  ]
%}
{% endif %}

{% for common in js_commons %}
  <script type="text/javascript" src="{{ url_for(theme.js) }}/{{ common }}?v={{ theme.version }}"></script>
{% endfor %}

PS:一些自己想实现的其它功能，如果有新的js文件，也可以做如下的添加方式，另使photos.js生效不仅仅只可以添加到这儿，也可以通过其它的地方引入，考虑到以后维护的方便，我们可以统一添加到了这里。

可以为相册相框添加缩放效果及一些其它效果，我的相框的css样式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//图片鼠标靠近放大效果
.fancybox img {
	display: block;
	border: 0;
	width: 100%;
	transform: scale(1);
	transition: all 1s ease 0s;
	-webkit-transform: scale(1);
	-webkit-transform: all 1s ease 0s;
}		
.fancybox:hover img {
	transform: scale(1.1);
	transition: all 1s ease 0s;
	-webkit-transform: scale(1.1);
	-webkit-transform: all 1s ease 0s;
}

.ImageGrid {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    text-align: center;
}

.card {
    overflow: hidden;
    transition: .3s ease-in-out;
    border-radius: 8px;
    background-color: #ddd;
}

.ImageInCard img {
    padding: 0 0 0 0;
}

.TextInCard {
    line-height: 54px;
    background-color: #ffffff;
    font-size: 24px;
}

这个css内容我们添加到themes/next/source/css/_custom/custom.styl文件夹里。

最终效果如下：

upload successful

upload successful

SEO 相关优化

这一块的优化还是蛮多的，我挑几个比较重要的说下。

我们知道，我们的blog有了域名后，相当于发布在了外网，为了提高blog阅读量，需要对blog或者其它方面做些工作，这都可以称谓博客的SEO优化。

编写质量高的原创博文

这一条基本不用多说，好的文章从不缺少流量。关键在于作者提高自身的写作水平。

更改博文生成结构

使用hexo生成博文时，博文的生成方式(permalink)为blog/:title:year:month:day/这种格式，这种是不便于搜索的，因为相当于四级目录，我们可以改为blog/:title.html这种格式。

在hexo 的 config.yml文件里进行修改，并重新运行命令生成博文。

1
2
3
4
url: https://www.sakuratears.top
root: /
permalink: blog/:title.html  ## SEO优化
permalink_defaults:

禁止外链

我们在写作博文时，有可能引用到其它博文的文章，会有指向其它博文的链接，这样是不便于SEO的，我们又不能去掉该外链而影响到博文功能。因此我们可以引入 hexo-autonofollow 插件，在package.json文件里配置并安装该插件后，在hexo的config.yml文件里添加如下配置。

1
2
3
4
5
## nofollow  SEO 优化
nofollow:
   enable: true
   exclude:  # 除外的链接
   - ‘https://www.sakuratears.top’

可以使网页爬虫更好的获取我们的页面数据，提高SEO。

人为发布博客外链

这个就比较简单了，我们可以在一些平台等地方发布我们的博客地址，提高曝光度，提高SEO。

使百度、谷歌、必应等网站收录你的网站

这项是一项漫长而又复杂的过程，但也是效果最明显的一个。

我们如果有百度账号的话，可以登陆百度站长平台，将我们的站点添加百度收录。

upload successful

如果网站已备案，添加备案号可以加快收录速度。

我们可以在链接提交-自动提交-sitemap里添加我们网站的sitemap.xml并提交，以加快百度对我们网站的收录。

upload successful

同时在自动推送里，我们看到我们可以使用js进行自动推送，由于hexo已经集成了该功能，我们简单设置下就行。

1
2
3
4
5
6
7
8
9
10
11
12
13
# ---------------------------------------------------------------
# SEO Settings
# ---------------------------------------------------------------

# Canonical, set a canonical link tag in your hexo, you could use it for your SEO of blog.
# See: https://support.google.com/webmasters/answer/139066
# Tips: Before you open this tag, remember set up your URL in hexo _config.yml ( ex. url: http://yourdomain.com )
canonical: true

# Change headers hierarchy on site-subtitle (will be main site description) and on all post/pages titles for better SEO-optimization.
seo: true
# Enable baidu push so that the blog will push the url to baidu automatically which is very helpful for SEO
baidu_push: true

可以看到hexo里面集成的baidu_push.swig内容和百度提供的js是一样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% if theme.baidu_push %}
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>
{% endif %}

我们可以使用手动抓取功能对我们的网站进行抓取，如下效果图。

upload successful

PS：由于网络等一些原因，有可能抓取失败。

弄好后，过一段时间，可以看到数据的变化。

upload successful

我们可以通过 site:www.sakuratears.top来检查百度是否收录了我们的网站，如图。

upload successful

PS:我在bing上进行测试，发现必应收录的比百度要快。

upload successful

后来查询了解得知Github屏蔽掉了百度爬虫，所以一些blog作者在国内托管到Coding或者Gitee上，在国外托管到GitHub上，以加快博客访问速度，提高SEO优化。

有关这一块内容，我准备后面在处理。

结语

今天差不多就这些了，关于博客的一些其它优化内容我会在整理一下。

一些其它的想法:

  • 原来blog的音乐播放器直接使用的网易云的，但是我们公司居然把网易云墙了，而且考虑到歌曲以后可能放在那边会404等情况，下阶段优化考虑使用Hexo的aplayer去处理，并将音乐放到OSS存储上。

  • 关于托管到Coding或者Gitee上的问题，也要研究下。

  • 每次看博客是都会出现live2D妹子，可能并不是所有人都喜欢，也有时候觉得碍事，可能考虑新增一个关闭按钮，可以主动开启或关闭live2D妹子。

  • 部分页面需要美化下，SEO的部分还要看看有没有需要总结的，毕竟SEO优化是条漫长的道路。

以上。




-------------文章结束啦 ~\(≧▽≦)/~ 感谢您的阅读-------------

您的支持就是我创作的动力！

欢迎关注我的其它发布渠道