忙里偷闲把博客升级一下,结果发现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: Ecoolsubtitle: 'little home' description: 'What I like' keywords: author: Zyclanguage: zh-CNtimezone: '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: appkey: notify: true verify: false placeholder: 欢迎评论呀! avatar: mm guest_info: nick,mail,link pageSize: 10 language: visitor: false comment_count: true recordIP: false serverURLs:
开启邮件通知
保存即可。
网页效果修改
在新版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 ); } .page-archive .collection-year .collection-header { color : rgb(0 , 0 , 0 ); } .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 from PIL import Imagefrom glob import globimport osimport mathimport shutilimport rethreshold = 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脚本后,就可以进行处理了。