Ecool

little home

建站日志

Posted on In Valine:

忙里偷闲把博客升级一下，结果发现NexT主题都到7.1版本了，原先的方案不再适用，就从头建立了一个新的版本，一点一点修改。

感谢小丁的个人博客给予我的指导，否则就没法完成这次升级了。

安装Hexo

Hexo官网

安装Hexo所需环境

安装Hexo

$ npm install -g hexo-cli

建站初始化

初始化Hexo文件夹

1
2
3
$ hexo init <folder>  
$ cd <folder>  
$ npm install --save

对站点配置文件进行修改

_config.yml是整个博客的站点配置文件，我们需要对其进行修改，满足自己的需要。例如我的博客是这样的：

1
2
3
4
5
6
7
8
9
...
title: Ecool
subtitle: 'little home'
description: 'What I like'
keywords:
author: Zyc
language: zh-CN
timezone: 'Asia/Shanghai'
...

这是我博客配置文件的一部分，当然大家可以根据自己的需要进行修改。

安装NexT主题

本部分及以下“NexT主题配置”相关内容可以参考NexT官方文档

下载主题

1
2
$ cd your-hexo-site  
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

启用主题

在站点配置文件启用主题
theme: next

至此，基础的配置已经完成，执行以下命令即可看到结果：

1
2
3
hexo clean
hexo g
hexo s

NexT主题配置

相册效果实现

为了实现相册的效果，我借鉴了之前的相册文件，这里感谢asdfv1929大佬和hexo-tag-cloud提供的思路，关于插件hexo-next-photos可以参考这篇文章。

为了保证照片的传输速度，我对原始照片进行了压缩，对原始相片的压缩和处理文件参照文件引用备份。

参考链接

评论系统

我在这里使用的是valine，个人感觉这个更简洁一点。我主要参考了hexo+next使用Valine评论系统建立评论系统。

注册应用

注册LeanCloud并创建一个开发版应用（免费）
链接：https://www.leancloud.cn/

创建Class

进入你创建的应用后，点击存储-> 创建Class，将Class的名称命名为Comment。

将Class访问权限和默认ACL权限全部设置为所有用户。

服务设置

在设置-> 安全中心中，关闭除数据存储以外的全部开关。

修改下方Web安全域名为：自己的域名：端口号，以我的博客为例：

1
https://jygzyc.github.io:443

修改主题配置文件

在/source/_data/next.yml下修改自己的appid和appkey：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: true # 邮件通知开关
  verify: false # Verification code
  placeholder: 欢迎评论呀！ # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: false # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

开启邮件通知

  • 修改LeanCloud中，设置->邮件模版->用于重置密码的邮件主题：

    1
    你在{{appname}}的评论中收到了新的回复

  • 修改内容：

    1
    2
    3
    4
    5
    <p>Hi, {{username}}</p>
    <p>
    你在{{appname}}的评论中收到了新的回复
    </p>
    <p><a href="你的博客主页" style="display: inline-block; padding: 10px 20px; border-radius: 4px; background-color: #3090e4; color: #fff; text-decoration: none;">马上查看</a></p>

保存即可。

网页效果修改

在新版Hexo中，引入了数据文件这个概念，简单来说就是将个人的配置文件放在/source/_data/目录下，而不修改主题文件夹中的文件。这样做能够更方便地使用git pull升级主题，不用解决冲突的问题。

归档页面时间轴效果

我也想不起来当时我参考的文章了，如果原作者看见的话请联系我，我会把参考链接补上。

效果可以参考我的归档界面，将如下代码添加到/source/_data/styles.styl：

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
48
// 时间轴样式
.posts-collapse {
    margin: 50px 0px;
}
@media (max-width: 1023px) {
    .posts-collapse {
        margin: 50px 20px;
    }
}
// 时间轴左边线条
.posts-collapse::before{
    margin-left: -2px;
    background-image: linear-gradient(180deg,#f79533 0,#f37055 15%,#ef4e7b 30%,#a166ab 44%,#5073b8 58%,#1098ad 72%,#07b39b 86%,#6dba82 100%);
}
// 时间轴左边线条圆点颜色
.posts-collapse .collection-title::before {
    background-color: rgb(250, 250, 250);
}
// 时间轴文章标题左边圆点颜色
.posts-collapse .post-header::before {
    background-color: rgb(161, 102, 171);
}
// 时间轴年份
.posts-collapse .collection-year .collection-header {
    color: #000000;
}
// 时间轴文章标题
.posts-collapse .post-header a {
    color: rgb(80, 115, 184);
}
.posts-collapse .post-header a:hover {
    color: rgb(161, 102, 171);
}
// 时间轴文章标题底部虚线
.posts-collapse .post-header:hover {
    border-bottom-color: rgb(161, 102, 171);
}
// archives页面顶部文字
.page-archive .collection-year .collection-header {
    color: rgb(0, 0, 0);
}
// archives页面时间轴左边线条第一个圆点颜色
.page-archive .posts-collapse .collection-title:before {
    top: 10px;
    opacity: 1;
    background-color: rgb(250, 250, 250);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.9);
}

近期文章

参考Hexo-NexT 版本更新记录，将如下代码添加到/source/_data/sidebar.swig：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{# 近期文章 #}
{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">

        {% set posts = site.posts.sort('-date').toArray() %}
        {% for post in posts.slice('0', '4') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

除此以外，可以参考小丁的个人博客，大神记录了很多效果，因为杂项太多，我就不一一叙述了，如果之后有比较重要的，我会持续更新。

文件引用备份

已启用hexo-next-photos进行照片处理

这一部分主要实现文件的备份和处理，主要功能如下：

  • 处理原照片
  • 备份_posts中的图片
  • 通过git进行推送

代码如下：

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
# -*- coding:utf8 -*-
# %%
from PIL import Image
from glob import glob
import os
import math
import shutil
import re
# %%
threshold = 2 * 1024 * 1024
blog_file_dir = os.path.dirname(os.path.abspath(__file__))
source_photos_dir = os.path.join(blog_file_dir, "originPhotos")
target_photos_dir = os.path.join(blog_file_dir, "photos")
blog_dir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# %%
class ImageProcess:

    """
    This class is used to read photos and compress them
    """

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def resize_images(self, source_dir, target_dir, threshold):

        '''
        以2M为阈值压缩图片，并放入新的文件夹中 \n
        threshold: 阈值
        '''
        filenames = glob('{}/*'.format(source_dir))
        if not os.path.exists(target_dir):
            os.makedirs(target_dir)
        for filename in filenames:
            filesize = os.path.getsize(filename)
            if filesize >= threshold: 
                with Image.open(filename) as im:
                    width, height = im.size
                    if width >= height:
                        new_width = int(math.sqrt(threshold/2))
                        new_height = int(new_width * height * 1.0 / width)
                    else:
                        new_height = int(math.sqrt(threshold/2))
                        new_width = int(new_height * width * 1.0 / height)
                    resized_im = im.resize((new_width, new_height))
                    output_filename = filename.replace(source_dir, target_dir)
                    resized_im.save(output_filename)
            else:
                with Image.open(filename) as im:
                    output_filename = filename.replace(source_dir, target_dir)
                    im.save(output_filename)


class Copy_posts:
    """
    This class is used to copy `_posts` to blog_file_dir
    """

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

    def copy_posts(self, source_dir, target_dir):
        for files in os.listdir(source_dir):
            srcFile = os.path.join(source_dir, files)
            tarFile = os.path.join(target_dir, files)
            if os.path.isfile(srcFile) and os.path.splitext(srcFile)[1] != '.md':
                shutil.copy(srcFile, tarFile)
            if os.path.isdir(srcFile):
                if os.path.exists(tarFile) == False:
                    os.makedirs(tarFile)
                    self.copy_posts(srcFile, tarFile)
    def remove_posts(self, workdir):
        if os.path.exists(workdir):
            shutil.rmtree(workdir)

def changeDir(target_dir):
    '''
    change work dir
    '''
    os.chdir(target_dir)
    print(os.getcwd())

def git_operation():
    '''
    git 命令行函数，将仓库提交

    ----------
    git add . \n
    git commit -m "update" \n
    git push origin master \n
    '''
    os.system('git add .')
    os.system('git commit -m "update"')
    os.system('git push origin master')

# %%
if __name__ == "__main__":
    print("---- Image Process Start----")
    imm = ImageProcess()
    imm.resize_images(source_photos_dir, target_photos_dir, threshold)
    print("---- Image Process Over----")
    print("---- _posts Process Start----")
    copyPosts = Copy_posts()
    postsDir = os.path.join(blog_dir, 'source\\_posts')
    tarPostsDir = os.path.join(blog_file_dir, '_posts')
    copyPosts.remove_posts(tarPostsDir)
    copyPosts.copy_posts(postsDir, tarPostsDir)
    print("---- _posts Process Over----")
    changeDir(blog_file_dir)
    git_operation()

目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
blog/
│  .gitignore
│  package.json
│  _config.yml
│
├─blog_file
│  │  .gitignore
│  │  photos.py         # python文件
│  │  requirements.txt
│  ├─downloads
│  │      ...
│  ├─originPhotos
│  │      ...
│  ├─photos
│  │      ...
│  └─_posts
│      ├─1/
│      │      ...
│      ├─2/
│      │      ...
│ ...

运行python脚本后，就可以进行处理了。

一杯咖啡