本博客利用hexo+github搭建,在此详细记录下我是如何利用hexo+github搭建静态博客以及一些配置相关问题,以免过后遗忘,且当备份之用,并希望可以为其他有需要的人提供前车之鉴,少走弯路。

开始搭建

安装node.js

下载node.js并安装(官网下载安装),默认会安装npm。打开cmd命令行,成功的标志如下:
node.js

安装git

下载安装git(官网下载安装),安装成功的象征就是在电脑上任何位置鼠标右键能够出现Git GUI Here和Git Bash here如下两个选择
git
注意:一般出于安全考虑,只有在Git Bash Here中才能进行Git的相关操作。如果需要在cmd命令行里调用Git,那么就要配置电脑的环境变量Path,或者在安装的时候选择use Git from the Windows Command Prompt。这个可有可无,影响不大

Github建立项目

Github账户注册和新建项目(new repository),项目必须要遵守格式:账户名.github.io,并且需要勾选Initialize this repository with a README。
github
在建好的项目右侧有个settings按钮,点击它,向下拉到GitHub Pages,你会看到那边有个网址,访问它,你将会惊奇的发现该项目已经被部署到网络上,能够通过外网来访问它。
setting

安装hexo

安装Hexo,在自己认为合适的地方建了一个blog文件夹。然后通过命令行进入到该文件夹里面
blog文件夹
为什么要新创建blog文件呢?因为hexo 初始化需要文件夹为null的,所以确保路径简单且路径中不要有中文
输入npm install hexo -g,开始安装Hexo
输入** hexo -v 查看是否安装成功,如果成功安装会显示出安装的版本信息
hexo
输入
hexo init,初始化该文件夹(有点漫长的等待。。。)
个人在这一步一直出现报错,先出现‘git’ is not recognized as an internal or external command错误,后来又出现Permission denied错误,耽误了好几个小时,后来发现使用hexo init 都可以解决
看到 Start blogging with Hexo! 则表明安装成功。
hexo安装成功
在cmd中输入
npm install,安装所需要的组件
输入
hexo g,首次体验Hexo
输入
hexo s,开启服务器,访问该网址(即提示中的http://localhost:4000/),正式体验Hexo
hexo s
如果页面一直无法跳转,那么可能端口被占用了。此时我们ctrl+c停止服务器,接着输入
hexo server -p 端口号**来改变端口号

连接Hexo与Github

将Hexo与Github page联系起来,设置Git的user name和email(如果是第一次的话)
首先在新建的blog文件夹里面鼠标右键,点击Git Bash Here。这里“06866”可以替换成自己的用户名,邮箱可以替换成自己的邮箱
git bash
输入cd ~/.ssh,检查是否由.ssh的文件夹 ls 查看
添加ssh
ssh 密钥生成
添加ssh
连续三个回车,生成密钥,最后得到了两个文件:id_rsa和id_rsa.pub
添加ssh
接着输入eval “$(ssh-agent -s)”,回车,添加密钥到ssh-agent
再输入ssh-add ~/.ssh/id_rsa,回车,添加生成的SSH key到ssh-agent
接着登录Github,点击头像下的settings,点击new ssh key
添加ssh
输入cat id_rsa.pub生成一个new ssh key,将生成后的内容复制到上一步的github中的new ssh key中
添加ssh
添加ssh
输入ssh -T git@github.com,测试添加ssh是否成功。如果看到Hi后面是你的用户名,就说明成功了

如果ssh-key配置失败,那么只要按照以下步骤就能完全解决

  • 首先,清除所有的key-pair,输入ssh-add -Drm -r ~/.ssh删除你在github中的public-key
  • 重新生成ssh密钥对,输入ssh-keygen -t rsa -C “xxx@xxx.com
  • 接下来正常操作在github上添加公钥public-key:
  • 1、首先在你的终端运行xclip -sel c ~/.ssh/id_rsa.pub将公钥内容复制到剪切板
  • 2、在github上添加公钥时,直接复制即可
  • 3、保存
  • 测试:在终端ssh -T git@github.com

修改Deployment值

在之前新建的blog文件夹中,找到_config.yml文件,修改Deployment值(在末尾),将

deploy:
  type:

更改为:

deploy:
  type: git
  repository: git@github.com:xxxx/xxxx.github.io.git
  branch: master

repository值是你在github项目里的ssh(右下角)
repository

完成建站并新建博客

新建一篇博客,在cmd执行命令:hexo new post “博客名”,就可以在blog/_posts/中找到已创建的文件。
在生成以及部署文章之前,需要安装一个扩展,在cmd中输入npm install hexo-deployer-git –save,并将刚刚生成的文件编辑好后cmd中输入命令hexo d -g即可生成部署文章

至此,一个具备基础功能的博客就完成了

绑定自己的域名

购买域名

国内的域名服务商有新网,腾讯云,还有阿里云的万网等。下面以阿里云的万网为例:
在万网购买了自己心仪的域名后,进入阿里云的管理控制台-域名与网站-域名就可以看到购买的域名此时的域名状态是未实名认证的,然后就是实名认证(一般需要2小时左右)。

域名解析

首先获取自己 github 的二级域名的 IP地址,windows 下直接在 cmd 里 Ping 一下自己的博客就会得到 IP 地址:
ping username.github.io,其中username为自己的github用户名

下面通过 DNS域名解析将购买的域名指向 github 的二级域名:username.github.io,进入阿里云的管理控制台-域名与网站-云解析 DNS,进入域名的解析设置,点击新手指导,将得到的 IP 地址填到记录值一栏,点击确定就 OK 了。填完以后的解析列表会出现:
域名解析

记录值就是自己 github 的二级域名的 IP地址。

设置CNAME

在 本地hexo 项目下,source 文件夹下面创建 CNAME 文件(没有后缀名的),在里面写上购买的域名。比如:
设置CNAME

在 github 上面,打开 username.github.io 项目的(Settings)设置,然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如:
设置CNAME
这样新域名配置完成,可以使用新的网名访问自己的博客了

更换主题

Hexo有许多的个性化主题可供选择,有兴趣的可以直接搜索hexo主题进入hexo的官网查看,我使用的是hexo sakura主题,github 地址为https://github.com/honjun/hexo-theme-sakura,在这里也能找到主题的大部分使用方法,这一部分主要是作者的教程+一些自己摸索出来的教程+其他搜索问题时的教程

主题下载安装

hexo-theme-sakura建议下载压缩包格式,因为除了主题内容还有些source的配置对新手来说比较太麻烦,直接下载解压就省去这些麻烦咯。
下载好后解压到博客根目录(不是主题目录哦,重复的选择替换)。接着在命令行(cmd、bash)运行npm i安装依赖。

主题配置

找到 /themes/sakura/config.yml 这个配置文件中修改,跟着作者的注释修改即可。注意一下所有的文件带有注释,所以最好找到自己的电脑中的文件对照改,以免出错。

站点

# Site
title: 你的站点名
subtitle:
description: 站点简介
keywords:
author: 作者名
language: zh-cn
timezone:

部署

deploy:
  type: git
  repo: 
    github: 你的github仓库地址
    # coding: 你的coding仓库地址
  branch: master

备份 (使用hexo b发布备份到远程仓库)

backup:
  type: git
  message: backup my blog of https://honjun.github.io/
  repository:
    # 你的github仓库地址,备份分支名  (建议新建backup分支)
    github: https://github.com/honjun/honjun.github.io.git,backup
    # coding: https://git.coding.net/hojun/hojun.git,backup

主题目录下的_config配置

其中标明【改】的是需要修改部门,标明【选】是可改可不改,标明【非】是不用改的部分

# site name
# 站点名,即网站的左上角的名称 【改】
prefixName: さくら荘その
siteName: hojun

# favicon and site master avatar
# 站点的favicon和头像 输入图片路径(下面的配置是都是cdn的相对路径,没有cdn请填写完整路径,建议使用jsdeliver搭建一个cdn啦,先去下载我的cdn替换下图片就行了,简单方便~)【改】
favicon: /images/favicon.ico
avatar: /img/custom/avatar.jpg

# 站点url 【改为自己的博客的网址】
url: https://sakura.hojun.cn

# 站点介绍(或者说是个人签名)【改】
description: Live your life with passion! With some drive!

# 站点cdn,没有就为空 【改】  若是cdn为空,一些图片地址就要填完整地址了,比如之前avatar就要填https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/custom/avatar.jpg
cdn: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6

# 开启pjax 【选】
pjax: 1

# 站点首页的公告信息 【改】
notice: hexo-Sakura主题已经开源,目前正在开发中...

# 懒加载的加载中图片 【选】
lazyloadImg: https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/loader/orange.progress-bar-stripe-loader.svg

# 站点菜单配置 【选】
menus:
  首页: { path: /, fa: fa-fort-awesome faa-shake }
  归档: { path: /archives, fa: fa-archive faa-shake, submenus: { 
    技术: {path: /categories/技术/, fa: fa-code }, 
    生活: {path: /categories/生活/, fa: fa-file-text-o }, 
    资源: {path: /categories/资源/, fa: fa-cloud-download }, 
    随想: {path: /categories/随想/, fa: fa-commenting-o },
    转载: {path: /categories/转载/, fa: fa-book }
  } }
  清单: { path: javascript:;, fa: fa-list-ul faa-vertical, submenus: { 
    书单: {path: /tags/悦读/, fa: fa-th-list faa-bounce }, 
    番组: {path: /bangumi/, fa: fa-film faa-vertical }, 
    歌单: {path: /music/, fa: fa-headphones },
    图集: {path: /tags/图集/, fa: fa-photo }
  } }
  留言板: { path: /comment/, fa: fa-pencil-square-o faa-tada }
  友人帐: { path: /links/, fa: fa-link faa-shake }
  赞赏: { path: /donate/, fa: fa-heart faa-pulse }
  关于: { path: /, fa: fa-leaf faa-wrench , submenus: { 
    我?: {path: /about/, fa: fa-meetup}, 
    主题: {path: /theme-sakura/, fa: iconfont icon-sakura },
    Lab: {path: /lab/, fa: fa-cogs },
  } }
  客户端: { path: /client/, fa: fa-android faa-vertical }
  RSS: { path: /atom.xml, fa: fa-rss faa-pulse }

# Home page sort type: -1: newer first,1: older first. 【非】
homePageSortType: -1

# Home page article shown number) 【非】
homeArticleShown: 10

# 背景图片 【选】
bgn: 8

# startdash面板 url, title, desc img 【改】
startdash: 
  - {url: /theme-sakura/, title: Sakura, desc: 本站 hexo 主题, img: /img/startdash/sakura.md.png}
  - {url: http://space.bilibili.com/271849279, title: Bilibili, desc: 博主的b站视频, img: /img/startdash/bilibili.jpg}
  - {url: /, title: hojun的万事屋, desc: 技术服务, img: /img/startdash/wangshiwu.jpg}


# your site build time or founded date
# 你的站点建立日期 【改】
siteBuildingTime: 07/17/2018


# 社交按钮(social)  url, img PC端配置 【改】
social:
  github: {url: http://github.com/honjun, img: /img/social/github.png}
  sina: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/sina.png}
  wangyiyun: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/wangyiyun.png}
  zhihu: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/zhihu.png}
  email: {url: http://weibo.com/mashirozx?is_all=1, img: /img/social/email.svg}
  wechat: {url: /#, qrcode: /img/custom/wechat.jpg, img: /img/social/wechat.png}

# 社交按钮(msocial)  url, img 移动端配置 【改】
msocial:
  github: {url: http://github.com/honjun, fa: fa-github, color: 333}
  weibo: {url: http://weibo.com/mashirozx?is_all=1, fa: fa-weibo, color: dd4b39}
  qq: {url: https://wpa.qq.com/msgrd?v=3&uin=954655431&site=qq&menu=yes, fa: fa-qq, color: 25c6fe}

# 赞赏二维码(其中wechatSQ是赞赏单页面的赞赏码图片)【改】
donate:
  alipay: /img/custom/donate/AliPayQR.jpg
  wechat: /img/custom/donate/WeChanQR.jpg
  wechatSQ: /img/custom/donate/WeChanSQ.jpg

# 首页视频地址为https://cdn.jsdelivr.net/gh/honjun/hojun@1.2/Unbroken.mp4,配置如下 【改】
movies:
  url: https://cdn.jsdelivr.net/gh/honjun/hojun@1.2
  # 多个视频用逗号隔开,随机获取。支持的格式目前已知MP4,Flv。其他的可以试下,不保证有用
  name: Unbroken.mp4

# 左下角aplayer播放器配置 主要改id和server这两项,修改详见[aplayer文档] 【改】
aplayer: 
  id: 2660651585
  server: netease
  type: playlist
  fixed: true
  mini: false
  autoplay: false
  loop: all
  order: random
  preload: auto
  volume: 0.7
  mutex: true

# Valine评论配置【改】
valine: true
v_appId: GyC3NzMvd0hT9Yyd2hYIC0MN-gzGzoHsz
v_appKey: mgOpfzbkHYqU92CV4IDlAUHQ

CDN搭建

这其中涉及到搭建cdn,可以直接去视屏地址看,直接看文字版如下:

国内加载github的资源比较慢,需要使用CDN加速来优化网站打开速度,于是使用jsDeliver+github搭建免费的cdn。jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源

什么是CDN

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

国内加载github的资源比较慢,需要使用CDN加速来优化网站打开速度,于是使用jsDeliver+github搭建免费的CDN,非常适合博客网站使用。

jsDelivr 是一个免费开源的 CDN 解决方案,用于帮助开发者和站长。包含 JavaScript 库、jQuery 插件、CSS 框架、字体等等 Web 上常用的静态资源。

NPM是JavaScript的包管理器,也是世界上最大的软件注册中心。发现可重用代码的包——并以强大的新方式组装它们。每星期大约有 30 亿次的下载量,包含超过 600000 个 包(package) (即,代码模块)。来自各大洲的开源软件开发者使用 npm 互相分享和借鉴。包的结构使您能够轻松跟踪依赖项和版本。

所以jsDeliver+npm就是把npm上的包当做cdn的存储。jsDeliver不支持加载超过20M的资源,所以一些视频最好压缩到20M以下

第一步:新建github仓库

第二步:克隆Github仓库到本地

$ git clone 你的仓库链接 # 本地克隆github仓库

第三步:上传需要的资源

在本地目录右键 Git Bash Here,复制需要的静态资源到本地git仓库中,提交到github仓库上。亦可以github直接上传文件
命令如下:

// 查看状态
git status
// 添加到库中
git add .
// 提交更新(引号内 为自定义信息说明)
git commit -m '第一次提交'
// 推送至远程仓库 
git push

第四步:发布仓库

点击release发布

发布版本号为1.0(自定义)

同时也可以直接在建立的仓库中直接上传文件,这一部分是github的操作,不多赘述

第五步:通过jsDeliver引用资源

使用方法:
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径
比如:
//加载图片
https://cdn.jsdelivr.net/gh/Zevs6/CDN/img/avatar.jpg

注意:版本号不是必需的,是为了区分新旧资源,如果不使用版本号,将会直接引用最新资源,除此之外还可以使用某个范围内的版本,查看所有资源等,具体使用方法如下:

子页面与其他细节修改

去掉prefixName

如果想去掉prefixName(网页左上角的网站名称前半部分),可在 /themes/sakura/source/css/style.css下修改了样式表去掉prefixName即可。大家如果想修改其相关的样式也可以去这个css文件中自定义,这个文件是主要的css文件,大部分的样式都是由这个文件定义的。

网页顶部导航栏

网页顶部导航栏可以在/themes/sakura/config.yml中的meuns:下修改,如果有需要,可以修改名称,也可以直接删除,生成的网页会随之变动
导航
前面的path是网页路径,这个不建议修改,但可以修改。后面的如: fa: fas fa-home fa-1x 这个就是对应的图标设置,关于这个图标大家可以去fontawesome看教程以及选择自己喜欢的图标,导航栏下拉下拉菜单的图标修改和导航栏相同。

社交栏样式

社交栏的样式在 /themes/sakura/source/css/style.css中可以修改, Ctrl+f 搜索 header-info即可,建议没有必要就不修改了

模块更名

startdash模块更改名称:在 /themes/sakura/layout/_partial/startdash.ejs中有:

<div class="top-feature-row">
  <h1 class="fes-title" style="font-family: 'Ubuntu', sans-serif;">
  <i class="fa fa-anchor" aria-hidden="true">
  </i>
  startdash</h1>
  <% for (dash in theme.startdash) { %>
  ....

更改其中的startdash即可
同样如果要更改discovery模块的名称,在/themes/sakura/layout/index.ejs中找到如下代码:

      <h1 class="main-title" style="font-family: 'Ubuntu', sans-serif;">
      <i class="fa fa-envira" aria-hidden="true"></i>
      Discovery</h1>
      <%- partial('_partial/archive', {pagination: 2, index: true}) %>
      <!-- 首页默认取最最新文章集 -->

修改discovery即可

文章的封面,归档设置

在你写博客时的md文件中可以自由设置,下面是示例:

title: Sakura美化教程#文章的标题
author: hojun#作者名称
avatar: https://wx1.sinaimg.cn/large/006bYVyvgy1ftand2qurdj303c03cdfv.jpg#文章标题下作者的图标,如果不加会导致图片缺失,比较丑
authorLink: https://yremp.club#作者链接
authorAbout: 
authorDesc: 
categories: 技术#对应网页顶部导航栏归档
date: 2019-5-26 12:16:01
comments: true
tags: 
 - web
keywords: Sakura主题自定义美化教程
description:  Sakura美化教程
photos: https://static.2heng.xin/wp-content/uploads//2019/02/wallhaven-672007-1-1024x576.png#封面的图片链接
---

归档子页面

归档子页面下的图片/封面设置在 /themes/sakura/language/zh-cn.yml,找到如下代码:

#category
技术:
    zh: 野生技术协会
    en: Technical Communication
    img: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(1).jpg.webp
生活:
    zh: 生活
    en: Live
    img: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(2).jpg.webp
......

这一个子页面同样是和之前设置的相关的,自己有几个归档分类就自己添加即可

悦读和图集

在 /themes/sakura/language/zh-cn.yml修改:

#tag
悦读:
    img: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(6).jpg.webp
图集:
    img: https://cdn.jsdelivr.net/gh/yremp/cdn@2.1.5/img/cover/(5).jpg.webp
web:
    img:  https://cdn.jsdelivr.net/gh/yremp/resource@1.0/img/pic.jpg

番组

注意:这个souce文件夹需要放在blog一级的文件夹下,如果没有的话在下载的sakura文件中复制粘贴
这个页面对应的配置是在 /source/bangumi/index.md中修改,其中代码如下,对照网页修改即可

---
layout: bangumi
title: bangumi
comments: false
date: 2019-02-10 21:32:48
keywords:
description:
bangumis:
  - img: http://pic.netbian.com/uploads/allimg/180413/121552-152359295246db.jpg
    title: 狐妖小红娘
    status: 追番中
    progress: 100
    jp: 狐妖小红娘
    time: 2019-05-24 SUN.
    desc: 白月初……
  - img: http://pic.netbian.com/uploads/allimg/170605/130458-149663909840b3.jpg
    title: 名侦探柯南
    status: 追番中
    progress: 1000
    jp: 名探偵コナン
    time: 2019-05-24 SUN.
    desc: 中生侦探工藤新一……
---

歌单

整个页面配置在 /source/music/index.md中:

---
title: music
date: 2018-12-20 23:14:28
keywords: 喜欢的音乐
description: 
comments: false
photos: http://pic.netbian.com/uploads/allimg/170911/233802-15051442827782.jpg
---
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=100% height=450 src="//music.163.com/outchain/player?type=0&id=762797776&auto=1&height=430"></iframe>

photos就是这个页面的顶部图片,id就是网易云音乐歌单id,登录网页版网易云音乐,打开歌单就可以在网址中找到

友链配置

友情链接内容配置具体在 /source/link/index.md中,界面背景及布局主要在/themes/sakura/layout/links.ejs

其他事项

  • 网页顶部导航栏归档如果某一个分类下没有添加文件,则会出现not foung页面,所以对应的上一步中的categories需要与_config文件中的对应

  • 注意所有的md文件中的:后都有一个空格(不知道改如何叫,键值对?)

  • 其他的后续问题,bug等归纳整理到Hexo Sakura主题遇到的问题汇总供参考

添加一个看板娘

就是右下角的卡通人物

基础版看板娘

项目地址

live2d模型

部分模型预览

首先进入Hexo博客根目录安装live2d插件

$ npm install --save hexo-helper-live2d

接着,修改根目录下的 *_config.yml *文件

添加自定义配置(下面提供我的配置做参考):

## live2d
live2d:
   enable: true
   scriptFrom: local
   pluginRootPath: live2dw/
   pluginJsPath: lib/
   pluginModelPath: assets/
   tagMode: false
   debug: false
   model:
       use: live2d-widget-model-z16
       scale: 1
       hHeadPos: 0.5
       vHeadPos: 0.618
   display:
       superSample: 2
       width: 150
       height: 300
       position: right
       hOffset: 0
       vOffset: -20
   mobile:
       show: true
       scale: 0.5
  react:
      opacityDefault: 0.7
      opacityOnHover: 0.2

细心一点肯定能发现 model.use 后的字符串就是看板娘模型的名字

现在你就可以进入模型预览 挑选自己喜欢的看板娘啦

现在假设你所挑选的看板娘也是z16

你有几种方式让看板娘进驻你的Hexo博客,这里只提供最方便的一种(命令安装)。

进入博客根目录输入以下命令:

$ npm install live2d-widget-model-z16

再将 *_config.yml *中 model.use检查 一遍确保与你安装的名称一致

到此处看板娘进驻成功

进阶版看板娘

如何安装看板娘
傻瓜式安装只需在网页中引入这三行代码即可

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

在 主题配置文件 中,新增如下内容:

live2d:
  enable: true

如果你想折腾一翻,请看下面
本插件需要jQuery和font-awesome支持,请确保它们已在页面中加载,例如在中加入:

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">

否则无法正常显示。(如果你的网页已经加载了jQuery,就不要重复加载了)

你可以直接这样使用:

<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget/autoload.js"></script>

将这一行代码加入或,即可看到效果。如果你的网站启用了PJAX,由于看板娘不必每页刷新,因此需要注意将相关脚本放到PJAX刷新区域之外。

换句话说,如果你是小白,或者只需要最基础的功能,就只需要:

把这一行代码,连同前面的两行代码,一起放到html的中即可;
如果页面是用各种模版引擎、php、asp生成的,也要自行修改,方法类似,只是可能略为麻烦。
但是!我们强烈推荐自己进行配置,否则很多功能是不完整的,并且可能产生问题!
如果你还有兴趣自己折腾的话,请看下面的详细说明。算了不搞你们了,如果搞不到,请使用傻瓜式安装

如果要自定义有关内容,可以把这个仓库Fork一份,然后进行修改。这时,使用方法对应地变为

<script src="https://cdn.jsdelivr.net/gh/username/live2d-widget/autoload.js"></script>

将username替换为你的GitHub用户名即可。

定制看板娘的语录
1.从github中下载项目: https://github.com/stevenjoezhang/live2d-widget
2.更改waifu-tip.json里面的内容详情
3.更改autoload.js的引入位置
将下载的文件解压到本地博客目录的themes/主题文件夹/source下,修改autoload.js文件,如下:

改成const live2d_path = “/live2d-widget/“;

想修改看板娘大小、位置、格式、文本内容等,可查看并修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css。

推荐一个 Live2D 模型资源收集站:https://mx-model.ga/