生命不息,折腾不止
Part.1 Hexo的安装
这很酷,就像本站用的这个框架一样酷😎
Hexo有三个必须环境
1.python和npm包管理(或者yarn),直接官网下就好了,推荐python3及以上
2.git,官网也有,下载安装最新的即可
3.nodejs,这很重要,很多(99%)hexo的插件都依赖于这个东西,推荐版本v18以上
需要注意的是ubuntu等使用apt包管理的,他们的node版本比较落后,需要自己手动折腾,不过我的建议是直接用Windows
以上软件安装完成后记得检查一下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| python -v Python 3.10.2 (tags/v3.10.2:a58ebcc, Jan 17 2022, 14:12:15) [MSC v.1929 64 bit (AMD64)] on win32 #检查python版本,无视可能出现的一大串,重点观察是否有上面的几行
npm -v 9.8.1 #检查npm版本
git -v git version 2.41.0.windows.2 #检查git版本
node --v v18.16.1 #检查node版本,注意nodejs的关键词是node而非nodejs
|
检查无误?接下来直接一键安装hexo
解决网络问题后耐心等待进度条走完即可
最后找个地方创建任意一个空文件夹
并在那个地方打开命令行
hexo init #初始化你的hexo文件夹
此时文件夹内就会出现数个文件或文件夹,具体应该如下
1 2 3 4 5 6 7 8 9 10 11
| D:------ |____node_modules #存放插件的文件夹 |____scaffolds #模板文件夹 |____source #存放博客文章的地方 |____themes #站点的主题 _config.lanscape.yml _config.yml package.json package-lock.json db.json
|
随后在该位置hexo s即可启动服务
使用浏览器访问127.0.0.1:4000即可看到站点成功启动
part.2 hexo主题
默认主题很有感觉,但是作为自己的站点应该更加符合自己的个性
hexo官方也提供了官方的主题网站,这里我选择Kratos-Rebirth,为什么?,因为足够二次元!
从gayhub中拷贝项目并放入站点的hexo文件夹内,就像这样
然后编辑站点根目录的_config.yml文件
将theme: landspace改为theme: kratos-rebirth
重启服务,就能看到主题成功配置
(下面都是针对kratos-rebirth主题说明)
虽然这个主题已经很不错了,但是二次元的浓度依然不够,我们可以通过对主题进行小小的修改
下面是一些可选的配置,代码不连续
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
| site_logo: '' #站点标签页上的logo
ustomStyles: images: # 图片相关设置 banner: /images/banner.webp # 首页的最大的图片 background: /images/bg.webp # 站点整体的背景图片
# Top Menu 顶部导航栏配置 (具体格式请参照官方文档) menu: index: / archives: /archives/ label: index: <i class="fa fa-home"></i>首页 archives: <i class="fa fa-file"></i>档案馆 #我比较喜欢简单,都删干净了,就留了两个
# APlayer 左下角音乐播放器 aplayer: enabled: true playlist: meting: server: netease type: playlist id: 8034586413 order: random #id来自网易云音乐网页版,网页登陆后查看歌单,url栏中最后的几个数字就是这里填的id,需要注意的是,共享歌单应该设置为公开而非私密
avatarUri: /images/avatar.webp #网站侧栏的头像
|
part.3为站点添加live2d二刺螈浓度+++
live2d需要借助hexo-helper-live2d这个插件来实现,直接安装就好,命令如下
1
| npm install --save hexo-helper-live2d
|
然后直接安装模型即可
1
| npm install --save live2d-widget-model-wanko
|
为你的_config.yml添加live2d相关配置
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
| # live2d # https://github.com/EYHN/hexo-helper-live2d live2d: enable: true # 是否启用看板娘 scriptFrom: local # 默认 pluginRootPath: live2dw/ # 插件在站点上的根目录(相对路径),自动生成 pluginJsPath: lib/ # 脚本文件相对与插件根目录路径 pluginModelPath: assets/ # 模型文件相对与插件根目录路径 tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中,具体见项目github描述 debug: false # 调试, 是否在控制台输出日志 model: use: ./live2d_models/live2d-widget-model-moca-lostone # live2d模型的名字 scale: 1.4 hHeadPos: 0.5 vHeadPos: 0.618 display: superSample: 4 width: 200 height: 400 position: right # 左侧还是右侧 hOffset: 20 vOffset: -50 # 距底部距离 mobile: show: false # 手机端是否可见 scale: 0.5 react: opacityDefault: 0.7 opacityOnHover: 0.2
|
如果你是一个有追求的二刺螈,想用自定义的live2d,应该怎么办?
很简单,在hexo站点的根目录下新建一个名为live2d_models的文件夹,里面再新建一个文件夹,这个是你的模型文件夹,模型文件存在这里,例如
hexo/live2d_models/live2d-widget-model-moca-lostone
最终路径应该如图
live2d-widget-model-moca-lostone这个文件夹里应该是你的live2d模型文件,通常包括
1 2 3 4
| xxxx.json xxxx.moc xxxx.physics 一张模型贴图或者在文件夹里的模型贴图.jpg
|
一部分情况下,你的模型可能会没有json文件,此时你就需要准备一个live2d软件了,例如(在steam上的Live2dViewEX)
创建项目,将相关文件都拖进去即可,软件会帮你生产json文件
如果还是没有的话,就自己新建一个文本文档并填入以下内容,修改后缀为json
1 2 3 4 5 6 7 8 9
| { "type": 0, "model": "moca_miku_lostone.moc", "textures": [ "moca_miku_lostone.1024/texture_00.png" ], "physics":"moca_miku_lostone.physics", "physics_v2": {} }
|
然后依照之前的配置填写即可
hexo s
不出意外的话live2d应该会成功启动