建站日志

忙里偷闲把博客升级一下,结果发现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下修改自己的appidappkey

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
# -*- 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
blog/
│ .gitignore
│ package.json
│ _config.yml

├─blog_file
│ │ .gitignore
│ │ photos.py # python文件
│ │ requirements.txt
│ ├─downloads
│ │ ...
│ ├─originPhotos
│ │ ...
│ ├─photos
│ │ ...
│ └─_posts
│ ├─1/
│ │ ...
│ ├─2/
│ │ ...
│ ...

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

一杯咖啡