hexo插件及优化


hexo常用插件及优化

这里使用的主题为matery,闪烁之狐,matery主题的github仓库,作者提供的文档里已经给出了像代码高亮,拼音转换等插件,所以本文介绍的是除了作者提供的之外的其他简约插件。

matery使用需知

背景粒子和彩带设置

matery的主题提供了这几项功能,但是默认是没有开启的,因此使用该主题需要手动开启,在themes/hexo-theme-matery目录下的_config.yml配置文件中修改以下几项。

#背景canvas-nest
canvas_nest:
  enable: true
  color: 0,0,255 # 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分$
  pointColor: 0,0,255 # 交点颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意$
  opacity: 0.7 # 线条透明度(0~1), 默认: 0.5
  zIndex: -1 # 背景的 z-index 属性,css 属性用于控制所在层的位置, 默认: -1.
  count: 99 # 线条的总数量, 默认: 99
  
# 背景静止彩带.
ribbon:
  enable: true
  size: 150 # 彩带大小, 默认: 90.
  alpha: 0.6 # 彩带透明度 (0 ~ 1), 默认: 0.6.
  zIndex: -1 # 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1.
  clickChange: false  # 设置是否每次点击都更换彩带.

# 背景动态彩带.
ribbon_dynamic:
  enable: true

enable选项设置为true即可。

因为我这里的hexo博客是放在我的阿里云服务器上的,因此如果要修改内容我推荐smartty软件进行远程并修改文件相对方便。

导航栏以及底部的配色修改

matery的自带的导航栏鲜艳的配色有点问题,所以这里可以自己修改一下。

在主题下source下的css目录下,修改matery.css。分别修改第268和280行。

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

.progress-bar {
    height: 4px;
    position: fixed;
    bottom: 0;
    z-index: 300;
    background: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
    opacity: 0.8;
}

我这里修改为#4cbf30 0%, #0f9d58 100%

你也可以修改为自己看着好看的颜色,我这里放上几个配色的网站,可以由自己选择。

https://coolors.co/

http://www.materialpalette.com/

轮播图和笔记展示图

如果你在写笔记的时候不想自己上传封面的话而使用默认的图片的话,这里可以对封面的图片进行重新上传,选择好看的即可。

分别替换掉主题下source下medias中的banner和featureimages这两个文件夹下的图片即可。

同时如果想要增加featureimages下的图片,还需同步更改主题下_config.yml配置文件里的featureImages模块

# The post featured images that needs to be displayed when there is no image.
# 无文章特色图片时需要显示的文章特色图片.
featureImages:
- /medias/featureimages/0.jpg
- /medias/featureimages/1.jpg
- /medias/featureimages/2.jpg
- /medias/featureimages/3.jpg
- /medias/featureimages/4.jpg
- /medias/featureimages/5.jpg
- /medias/featureimages/6.jpg
- /medias/featureimages/7.jpg
- /medias/featureimages/8.jpg
- /medias/featureimages/9.jpg
- /medias/featureimages/10.jpg
- /medias/featureimages/11.jpg
- /medias/featureimages/12.jpg
- /medias/featureimages/13.jpg
- /medias/featureimages/14.jpg
- /medias/featureimages/15.jpg
- /medias/featureimages/16.jpg
- /medias/featureimages/17.jpg
- /medias/featureimages/18.jpg
- /medias/featureimages/19.jpg
- /medias/featureimages/20.jpg
- /medias/featureimages/21.jpg
- /medias/featureimages/22.jpg
- /medias/featureimages/23.jpg

同样,这里提供几个图片网站。替换图片时,图片的分辨率无需修改。

https://wallhaven.cc/(超棒)

https://konachan.net/post

看板娘插件

注:如果你使用了matery的卜算子来统计数据的话,官方的helper-live的看板娘插件会使卜算子失效,同时官方提供的插件功能也较少,我这里推荐使用该插件

如果是新手可以直接使用作者提供的js即可。

https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js

如果使用这个插件,会覆盖原matery主题的吸底模式的音乐播放插件。这里提供两种方式解决。

fork新的仓库

通过fork作者新的仓库,修改对应的css和js文件,这里在作者的github仓库下有对应的介绍,因此不再赘述。

修改适合自己的css和js文件后,发布新的版本,使用github的cdn加速获取js即可。

src=“https://cdn.jsdelivr.net/gh/username/live2d-widget@latest/autoload.js

将这里的用户名替换自己的即可。若直接访问js文件访问失败403的话,因为缓存的原因可能不能显示,但是在自己的博客使用没有问题。

修改吸底模式的音乐插件。

因为修改看板娘的文件之后还要修改回到顶端插件,如果你设置了在线聊天也要修改。如果你这里不想麻烦的话,直接将音乐插件的吸底模式取消即可。

在主题下的_config.yml配置文件中,修改music模块。将吸底模式关闭即可。

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: true
  title: #非吸底模式有效
    enable: true
    show: 听听音乐
  autoHide: true    # hide automaticaly
  server: netease   #require	music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    #require song, playlist, album, search, artist
  id: 503838841     #require	song id / playlist id / album id / search keyword
  fixed: false       # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载,可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量,请注意播放器会记忆用户设置,用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
  hideLrc: true     # 隐藏歌词

小地球插件

小地球插件的地址
https://www.revolvermaps.com/?target=setupgl

复制上面的srcipt标签放在自己的博客中合适的位置即可。

天气插件

生成js地址

https://cj.weather.com.cn/plugin/index

根据自己的需求选择对应的插件即可,我这里选择的是简约插件,UI比较漂亮

选择对应的选项,在下方生成对应的js文件即可。

复制你的js文件放到你的主题下的相应的文件里即可,这里不对主题的文件进行介绍了,有一些vue基础就可以看懂了。

阿里云部署博客

如果使用github来部署的话访问较慢,所以我这里推荐阿里云服务器部署,学生机10块钱一个月很便宜。如果是上班族的话,找个亲戚或朋友家的大学生不是计算机专业的认证一下就好。

安装node(以ubuntu16.04为例)

更新一下服务器的源

apt-get update
apt-get install -y python-software-properties software-properties-common
add-apt-repository ppa:chris-lea/node.js
apt-get update

node安装

apt-get install nodejs
apt install nodejs-legacy
apt install npm

将npm的源设置为淘宝源,下载加速。

npm config set registry https://registry.npm.taobao.org
npm config list

安装版本管理器

npm install n -g

安装git

apt-get install git

配置用户名和邮箱

git config --global user.name "你的用户名"
git config --global user.email "你的注册邮箱"

安装nginx

apt-get install nginx

安装完nginx后,这里以ubuntu16.04为例,nginx的目录为/ect/nginx。我们修改配置文件只需要修改sites-available下的default即可。我这里在之前学习的时候都是不一样的路径,所以我这里以ubuntu为例。

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        listen 443 ssl;
        ssl off;
        ssl_certificate cert/4287626_www.dingdm.club.pem;
        ssl_certificate_key cert/4287626_www.dingdm.club.key;
        ssl_session_timeout 5m;
        #ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aN$
        ssl_ciphers ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;

        root /home/www/hexo;

        server_name dingdm.club;
}

server_name为你的域名,root为你的静态网站所在的路径,可以自己创建,注意这里的路径不是你的hexo博客的路径,如果你在服务器上创建博客的话

ssl的配置为开启https的配置,这里先不赘述,不需要的话可以将ssl相关的配置注释掉即可。

初始化git仓库

添加git用户,使用root账户也可以。

adduser git

修改文件内容赋予权限

chmod 740 /etc/sudoers
nano /etc/sudoers

找到root用户那,在下方添加一条

git ALL=(ALL) ALL

将文件权限恢复

chmod 400 /etc/sudoers

切换到git用户,并创建ssh文件夹

su git
cd ~
mkdir .ssh
cd .ssh

生成密钥公钥并配置

ssh-keygen
cp id_rsa.pub authorized_keys
chmod 600 ~/.ssh/authorized_keys
chmod 700 ~/.ssh

配置完成之后可以使用ssh -v git@ip连接测试

新建仓库并设置钩子脚本

cd ~
git init --bare blog.git
nano ~/blog.git/hooks/post-receive

输入以下内容

git --work-tree=/home/www/hexo --git-dir=/home/git/blog.git checkout -f

/home/www/hexo为你刚刚在nginx的配置文件里的root路径,/home/git/blog.git为你的仓库地址

hexo部署

在你的hexo博客下的_config.yml配置文件中修改deploy模块

deploy:
  type: git
  repo: git@公网IP:/home/git/blog.git    

修改完成之后运行hexo clean && hexo deploy部署你的hexo博客即可。

部署完成之后,使用/etc/init.d/nginx configtest检查一下nginx的配置是否有问题,如果没问题,运行/etc/init.d/nginx restart重启nginx服务即可。


文章作者: dinggc
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 dinggc !
评论
 上一篇
红黑树 红黑树
为什么要使用红黑树 当冲突的链表长度超过8个时,链表结构就会转为红黑树结构,这样做的好处是避免在极端条件的情况下冲突链表过长而导致查询效率非常慢 红黑树是一种近似平衡的二叉查找树,其主要的优点就是平衡,即左右子树高度几乎一致,以此来防止树退
2020-08-01
下一篇 
一次steam个人资料动态设置 一次steam个人资料动态设置
首先放上预览图 https://steamcommunity.com/profiles/76561198366411843 资料背景设置 需要steam等级到达十级,拥有自己的艺术展柜。 首先需要在steam的社区-市场购买自己想要的个人资
  目录