0%

Hexo+Github/coding搭建博客

想要拥有一个属于自己的博客嘛?

利用 Hexo 就可以实现

Hexo 是一个快速,简单和强大的博客框架。使用 Markdown(或其他语言)撰写帖子,Hexo会在几秒钟内生成具有漂亮主题的静态文件

不定期更新

安装环境

首先要在电脑上下载 GitNode

git下载地址
node下载地址

下载后安装方法百度遍地都有,不过不熟悉的话最好按照教程来,不然出意外就不好了

开始

安装完后,在桌面右键 git bash 然后输入

1
2
3
4
5
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后

cnpm install hexo-cli -g

在某个盘下新建一个文件夹,取名随意
然后在这个文件夹下右键 git bash ,然后

1
hexo init

再执行

1
cnpm install    <-- 意思是安装必备的 hexo 组件

你会看到在文件夹里出现以下目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
.
├── _config.yml #网站的配置信息,您可以在此配置参数
├── node_modules #npm安装的所有程序包
├── package.json #npm安装的应用程序的信息
├── package-lock.json #针对和package.json中的应用程序提供更多详细信息
├── scaffolds #文章模版文件夹
├── source #资源文件夹,以下划线开头的文件/文件夹会被忽略
| ├── _drafts
| └── _posts
├── themes #主题文件夹,Hexo会根据主题来生成网页
| └── landscape #原始的hexo默认主题
├── yarn-error.log #日志文件
└── .gitignore #忽略文件,用于配置忽略条件

到这里前期工作基本完成,在根目录下打开 git bash 执行 hexo g && hexo s 命令,就会生成一个网址,复制到浏览器打开就看的到了

选择主题

HEXO默认的主题没怎么好看,但是我们可以更换不同的主题,具体的可以自行去查找心仪的主题

这里提供两个主题和安装方法

next 主题,也就是我现在用的这个主题 安装方法和配置

replica 主题 安装方法和配置

关于问题

因为我用的是 next 主题,不过上面那个方法对于的是 6.0 版本的配置,和现在下载的最新版主题有些方面是不一样的,如果在配置过程遇到问题可以看看这里

头像圆形而且旋转

可能是样式不支持吧,以前的 next 倒是支持

hhh,是因为换了位置了

找到下面的代码,并修改成如下样子

1
2
3
4
# If true, the avatar will be dispalyed in circle.
rounded: true
# If true, the avatar will be rotated with the cursor.
rotated: true

live2d

可以引用官方的 live2d 链接

不过官方的没有什么特别,如果想实现更多的功能,建议自行查找并配置 高级版

天气预报

首先打开

中国天气网:https://cj.weather.com.cn/plugin/pc

选择自定义插件—>自定义样式——>生成代码

把生成的代码放到博客根目录的 themes/next/layout/_layout.swig

保存退出就行

打赏功能

next 主题的配置文件 _config.yml 里查找

1
2
3
4
5
6
7
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
# If true, reward will be displayed in every article by default.
enable: true <-- 把这里改成 true
animation: true
#comment:

接着在下面
wechatpayalipay 前面的 # 去掉,后面加上图片链接,就可以了

1
2
3
4
reward:    	
wechatpay: /images/wechatplay.png
alipay: /images/play.jpg
#bitcoin: /images/bitcoin.png

valine评论

就是我博客下面的评论

valine是LeanCloud的一款极简的评论系统,并且还支持markdown功能

打开 LeanCloud官网 ,注册并登陆

注册完以后需要创建一个应用,名字可以随便起,然后 进入应用->设置->应用key

获取你的 appidappkey

然后打开主题配置文件 _config.yml,查找

1
2
3
4
5
6
7
8
9
valine:
enable: true
appid: your app id <-- 填入appid
appkey: your app key <-- 填入appkey
notify: false # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: ヾノ≧∀≦)o来啊,快活啊! <-- 这里添加评论区出现的话
guest_info: nick,mail,link
pageSize: 10

而且还要在Leancloud -> 设置 -> 安全中心 -> Web安全域名
把你的域名加进去,但是注意如果添加的是 http 协议的话,建议再添加一个 https 协议的,不然可能会被拒绝访问

音乐播放器

插件地址

具体使用在官方文档有详细说明,这里说一下添加网易云歌单并且同步

之前请确认在 next/layout/_partials/head/head.swig 里引用了

1
<script src="//cdn.jsdelivr.net/npm/jquery@v3.4.1/dist/jquery.min.js"></script>

然后打开 music.js 里面内容修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
var ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: false,
autoplay: false,
volume: 1.0,
listFolded: true,
lrcType: 3,
});
$.getJSON("https://api.fczbl.vip/163/?type=playlist&id= 注意这里填你的歌单的id ", function(data) {
ap.list.add(data)
});
})

保存退出,然后就可以了,播放器的目录会同步你的网易云歌单目录

视频播放器

在博客添加视频播放器的办法

在博客里的文章有提到,可以去查看

Daovoice

有时候你看到一些博客的右下角不是有个会话吗,点一下就可以和作者交流

就是这个实现的

使用方法

不过有可能添加后,博客页面空白情况发生

iconfont使用

next 主题可以自行添加社交图标(就是侧边栏那些),不过有很多图标在库里是没有的

这里推荐阿里巴巴矢量图,基本你想到的图标那里都有

阿里巴巴矢量图

进去后添加你想要的图标,然后点击这里,再点击添加到项目

image

然后就会出现一段引用代码,就是打马赛克的地方

image

打开主题文件夹的 layout/_partials/head/head.swig 里面添加

1
<link rel="stylesheet" type="text/css" href="里面放引用代码">

再打开 _partials/sidebar/site-overview.swig 把其中一段代码改成

1
2
{%- if theme.social_icons.enable %}
{%- set sidebarIcon = '<i class="fa fa-fw iconfont ' + link.split('||')[1] | trim + '"></i>' %}

然后在主题文件夹的配置文件 _config.yml 里修改

1
2
3
4
5
bilibili: https://space.bilibili.com/166385809 || icons-bilibili

|| 后面的就是图标代码

代码在 阿里 里面复制

image

然后就可以了!

链接持久化

Hexo 默认的文章链接是“年/月/日/标题”。

之所以要做链接持久化是因为,中文 url 不利于 SEO,另外如果标题修改了,会导致链接发生变化,不利于文章的推广。

所以我们要做的就是把标题转成唯一的英文或数字字符串

hexo-abbrlink

使用方法在里面也很详细了

部署博客

这个相当简单,看你要部署到那个地方了 Github / coding / 码云

先复制链接,如果是 ssh 链接的话,请做好相关配置

修改博客配置文件 根目录下的 _config.yml

1
2
3
4
5
6
# Deployment       
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: 这里填链接
branch: master 上传的分支

保存退出,然后再 git bash 里执行 hexo d 命令就可以上传了!

注意:上传前一定要先执行 hexo g (生成)

修改透明度

你应该发现了,我的页面是接近半透明的

NexT 主题的各版块是纯白色的,这样给站点加上背景特效后,一些板块是不会显示特效的

因为被白色覆盖了,但可以通过修改板块的背景样式为透明来让它显示特效

内容板块透明

博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件

content-wrap标签下 background: white 修改为:

1
background: rgba(255,255,255,0.5); //0.5是透明度

菜单栏背景

博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl文件

header-inner 标签下 background: white 修改为

1
background: rgba(255,255,255,0.5);

站点概况背景

博客根目录 themes\next\source\css\_schemes\Pisces\_sidebar.styl文件

sidebar-inner 标签下 background: white 修改为

1
background: rgba(255,255,255,0.5);

然后修改博客根目录 themes\next\source\css\_schemes\Pisces\_layout.styl 文件

sidebar 标签下 background: $body-bg-color修改为

1
background: rgba(255,255,255,0.5);

页数导航背景

博客根目录 themes\next\source\css\_schemes\Gemini\index.styl

搜索 pagination,修改此标签下 background 属性

1
background: rgba(255,255,255,0.5);

pjax

这个是什么大家可以自行百度,因为这也不是什么新奇的东西了

next 主题的配置文件里,查找 pjax 找到如下代码

1
2
3
# Easily enable fast Ajax navigation on your website.
# Dependencies: https://github.com/theme-next/theme-next-pjax
pjax: true 这里修改成true

当然不止这样,还需要修改一个地方

1
2
3
# Internal version: 0.2.8
# pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js
pjax: //cdn.jsdelivr.net/gh/theme-next/theme-next-pjax@0/pjax.min.js

然后保存退出就行了

----------------本文结束感谢阅读----------------
如果觉得文章好的话,就打个赏吧!
隐藏