请选择 进入手机版 | 继续访问电脑版

搭建博客hexo 安装hexo、配置hexo、hexo主题美化和添加live2d看板娘--详细

[复制链接]
暖男先生 发表于 2021-1-3 11:19:00 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、安装hexo

1、下载安装软件
     git:https://git-scm.com/downloads
     node:https://nodejs.org/en/
2、安装好两个工具之后,以管理员身份打开下令提示符,查察node和npm的版本号
  1. node -v                // 查察node的版本号npm -v                 // 查察npm的版本号
复制代码
3、安装npm ,输入下令:
  1. npm install -g hexo-cli
复制代码
4、安装hexo,输入下令:
  1. hexo init blog
复制代码
5、摆设静态网站,先打开一下博客,输入下令:
  1. hexo s
复制代码

6、在欣赏器中打开下令中给我们提供的网址:http://localhost:4000

7、我们就可以在自己的安装hexo的磁盘中,找到blog > source > _posts,比方我的hexo安装在D盘, D:\blog\source_posts,这样我们缩写的blog文章就可以存放在这个文件夹内里。

二、设置博客:

8、下载主题,我下载的是GitHub上面的matery主题。
     主题毗连:https://github.com/blinkfox/hexo-theme-matery
9、使用下令将主题下载到自己的blog\themes文件加中。可用下令:
  1. git clone https://github.com/blinkfox/hexo-theme-matery.git
复制代码

10、下载好之后我们就可以切换主题了,打开blog的设置文件:

11、切换主题,将设置文件中的theme: landscape修改为:theme: hexo-theme-matery 生存修改

12、重新启动博客,输入下令:
  1. hexo s
复制代码
13、然后我们再打开博客,主题就切换过来了
三、hexo主题美化

14、此时,我们的主题虽然切换了,但是我们的blog还没有内容,只是一个模板,我们可以新建个分类页并对它举行编辑,(也可以添加更多的页面,丰富内容~)可用下令:
  1. hexo new page "categories"
复制代码

15、更多的主题美化可以参考一下几个网址
GitHub:
     https://github.com/blinkfox/hexo-theme-matery
大佬的博客:
     https://cungudafa.blog.csdn.net/article/details/106305840
     https://blog.csdn.net/victoryxa/article/details/105841440
四、 Live2D看板娘

16、安装live2d,输入下令:
  1. npm install --save hexo-helper-live2d
复制代码
17、安装想要的模子,输入下令:
  1. npm install live2d-widget-model-koharu
复制代码
18、复制如下内容到hexo的_config.yml大概theme的_config.yml,也可以修改这段代码中的position,width,height等来控制显示位置以及巨细
  1. live2d:  enable: true  #enable: false  scriptFrom: local # 默认  pluginRootPath: live2dw/ # 插件在站点上的根目次(相对路径)  pluginJsPath: lib/ # 脚本文件相对与插件根目次路径  pluginModelPath: assets/ # 模子文件相对与插件根目次路径  # scriptFrom: jsdelivr # jsdelivr CDN  # scriptFrom: unpkg # unpkg CDN  # scriptFrom: https://cdn.jsdelivr.net/npm/live2d-widget@3.x/lib/L2Dwidget.min.js # 你的自界说 url  tagMode: false # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中  debug: false # 调试, 是否在控制台输出日志  model:    use: live2d-widget-model-koharu    # use: live2d-widget-model-wanko # npm-module package name    # use: wanko # 博客根目次/live2d_models/ 下的目次名    # use: ./wives/wanko # 相对于博客根目次的路径    # use: https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json # 你的自界说 url  display:    position: right    width: 145    height: 315  mobile:    show: true # 是否在移动设备上显示    scale: 0.5 # 移动设备上的缩放         react:    opacityDefault: 0.7    opacityOnHover: 0.8
复制代码
19、重新启动blog,输入下令:hexo s ,当我们再次打开blog时,我们就可以瞥见我们的模子了


来源:https://blog.csdn.net/weixin_46622106/article/details/112059798
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )