博客搭建记录 | Smilecoc's Blog

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

开始搭建

安装node.js

下载node.js并安装（官网下载安装），默认会安装npm。打开cmd命令行，成功的标志如下：

安装git

下载安装git（官网下载安装）,安装成功的象征就是在电脑上任何位置鼠标右键能够出现Git GUI Here和Git Bash here如下两个选择

注意：一般出于安全考虑，只有在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。

在建好的项目右侧有个settings按钮，点击它，向下拉到GitHub Pages，你会看到那边有个网址，访问它，你将会惊奇的发现该项目已经被部署到网络上，能够通过外网来访问它。

安装hexo

安装Hexo，在自己认为合适的地方建了一个blog文件夹。然后通过命令行进入到该文件夹里面

为什么要新创建blog文件呢？因为hexo 初始化需要文件夹为null的，所以确保路径简单且路径中不要有中文
输入npm install hexo -g，开始安装Hexo
输入 hexo -v 查看是否安装成功，如果成功安装会显示出安装的版本信息

输入hexo init，初始化该文件夹（有点漫长的等待。。。）
个人在这一步一直出现报错，先出现‘git’ is not recognized as an internal or external command错误，后来又出现Permission denied错误，耽误了好几个小时，后来发现使用hexo init 都可以解决
看到 Start blogging with Hexo！则表明安装成功。

在cmd中输入npm install，安装所需要的组件
输入hexo g，首次体验Hexo
输入hexo s，开启服务器，访问该网址（即提示中的http://localhost:4000/），正式体验Hexo

如果页面一直无法跳转，那么可能端口被占用了。此时我们ctrl+c停止服务器，接着输入hexo server -p 端口号来改变端口号

连接Hexo与Github

将Hexo与Github page联系起来，设置Git的user name和email（如果是第一次的话）
首先在新建的blog文件夹里面鼠标右键，点击Git Bash Here。这里“06866”可以替换成自己的用户名，邮箱可以替换成自己的邮箱

输入cd ~/.ssh，检查是否由.ssh的文件夹 ls 查看

ssh 密钥生成

连续三个回车，生成密钥，最后得到了两个文件：id_rsa和id_rsa.pub

接着输入eval “$(ssh-agent -s)”，回车，添加密钥到ssh-agent
再输入ssh-add ~/.ssh/id_rsa，回车，添加生成的SSH key到ssh-agent
接着登录Github，点击头像下的settings，点击new ssh key

输入cat id_rsa.pub生成一个new ssh key，将生成后的内容复制到上一步的github中的new ssh key中

输入ssh -T git@github.com，测试添加ssh是否成功。如果看到Hi后面是你的用户名，就说明成功了

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

首先，清除所有的key-pair，输入ssh-add -D和rm -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（右下角）

完成建站并新建博客

新建一篇博客，在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 文件（没有后缀名的），在里面写上购买的域名。比如：

在 github 上面，打开 username.github.io 项目的（Settings）设置，然后在 GitHub Pages的 Custom domain设置里填上购买的域名。比如：

这样新域名配置完成，可以使用新的网名访问自己的博客了

更换主题

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

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

// 加载任何Github发布、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file
// 加载 jQuery v3.2.1
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
// 使用版本范围而不是特定版本
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js
https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js
// 完全省略该版本以获取最新版本
https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js
// 将“.min”添加到任何JS/CSS文件中以获取缩小版本，如果不存在，将为会自动生成
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js
// 在末尾添加 / 以获取资源目录列表
https://cdn.jsdelivr.net/gh/jquery/jquery/

子页面与其他细节修改：

去掉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/