1.安装Node.js
2.安装Git
3.注册码云
4.安装Hexo
npm install hexo-cli -g
新建一个空白文件夹(下文提到的“项目根目录”是指你新建的文件夹的位置)用于存放 hexo 资源。在空白文件夹里面打开 Git Bash ,输入下列命令行进行初始化,初始化成功后会在文件夹生成如下图的文件。
hexo init
hexo g
hexo s
关闭本地服务器在 Git Bash 界面按 Ctrl+C, 在浏览器输入:http://localhost:4000 查看
在项目根目录下的 themes 文件中,打开 Git Bash ,用命令行克隆下新的主题。我这里用的 Next 主题,需要其他主题的自己百度找。
git clone https://github.com/theme-next/hexo-theme-next.git
用文本的方式打开项目根目录下的 config.yml 配置文件,找到 theme
把原来默认的 landscape 主题名字,改成刚刚克隆的主题名字(主题名字为上图中文件夹的名字)。
重新回到项目根目录下,打开 Git Bath ,用命令行启动服务器。在浏览器访问 http://localhost:4000
在项目根目录下,打开 Git Bash ,执行新建命令,然后 hexo 会自动在指定目录下生成对应文件,如下图所示。然后找到新建好的文件,打开即可进行编辑。
hexo new "此处输入文章名字"
准备好 md 格式文件后,使用下面命令生成网站静态文件到默认设置的 public 文件夹,然后再启动本地服务器。
hexo g
打开主题文件夹下的 config.yml 配置文件(注意:这里要区别,不是項目根目录,主题文件夹的路径为:新建空白文件夹名称/themes/主题文件夹名称)。通过查找功能找到 Schemes 模块,修改为 Gemini 风格。如果喜欢其他风格可以自己修改。如下图所示:
在上面的网站界面,可以发现网站的文字是英文,只要修改一下语言模式即可。打开根目录文件夹下的 config.yml 配置文件。找到 language,设置为 zh-CN。标题等其他参数的设置如下。可以对照效果图的具体位置,根据自己的实际需求进行修改。(注意:修改了项目根目录下的config.yml配置文件,需要重启部署项目后才能生效)
在项目根目录下,执行下面的命令行,新建分类页面,然后会在项目根目录下的 source 文件夹中新建一个 categories 文件夹
hexo new page categories
打开 categories 文件夹中的 index.md 文件,添加 type 字段,设置为 “categories”。如下图所示。
接着到主题文件夹下的 config.yml 配置文件下,找到 menu 模块,把 categories 的注释给去掉。如下图所示。
主题文件夹下 source css custom custom.styl 中增加如下代码:
// 分类&&标签 页面样式
.post-block.page {
margin-top: 40px;
}
// 分类页面page
.category-all-page {
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
background-color: #797D7F;
padding: 20px 30px 60px 30px;
border-radius: 25px 25px 25px 25px;
}
.category-all-title {
font-family: Impact;
font-size: 24px;
color: aqua;
}
.category-list {
overflow: auto;
}
.category-list li {
height: 30px;
float: left;
border-right: 3px solid #222;
padding: 0 20px;
}
.category-all ul li {
list-style: none!important;
}
.category-list li:last-child {
border-right: none;
}
.category-list li a {
font-size: 16px;
text-decoration: none;
color: chartreuse;
font-family: Helvetica, Verdana, sans-serif;
// text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.category-list li a:hover {
color: black;
}
.category-list li.active a {
font-weight: bold;
color: black;
}
文章发布前,在 front-matter 部分,多写一个 categories 字段,然后参数写上类别的名称,保存后重启服务,在网页上点击“分类”,可以看到分类下已经生成了刚刚设置的类别,并把刚刚发布的文章归类在此类别下。
方法跟分类设置一样,所以不再赘述介绍。
但是需要补充一点, front-matter 中字段有多个参数的时候,可以使用如下图的写法。
npm install hexo-generator-search --save
npm install hexo-generator-searchdb --save
search:
path: search.xml
field: post
format: html
limit: 10000
编辑主题文件夹的 config.yml 配置文件,设置 Local searchenable 为 ture。
打开主题文件夹下的 config.yml 配置文件,通过查找功能找到 avatar,然后把一个在线的头像图片地址(百度图片中直接复制链接即可),作为 url 的参数。如下图所示:
打开主题文件夹的 source\css_common\components\sidebar 目录下的 sidebar-author.styl 文件,然后把下面的代码添加进去即可。
.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;
/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;
/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}
img:hover {
/* 鼠标经过停止头像旋转
-webkit-animation-play-state:paused;
animation-play-state:paused;*/
/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}
1.进入博客文件夹的/themes/next文件夹下。
cd /themes/next
2.载安装Progress module。
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
3.在/themes/next/config.yml中设置。
pace: #是否开启进度条
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: mac-osx #选择进度条样式
打开主题文件夹下的 layout 文件夹,用文本的方式打开 layout.swig 文件,在文末加上如下的代码:
打开主题文件夹下的 source 文件夹,进入 css/custom 文件下,用文本形式打开 custom.styl 文件,然后添加下面这段代码。代码中 url 的地址是指到: 主题文件夹/source/images/ 。
body{
background:url(http://edviv.gitee.io/images_bed/images/BG1.jpg);
// background:url(https://source.unsplash.com/random/1600x900);
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
// 设置主题部分的透明度,具体看图
opacity: 0.8;
}
/*归档页样式优化*/
.my-post-time{
position: absolute;
color: #fff;
background-color: #49b1f5;
border-radius: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 15px;
}
.mypost{
position: relative;
margin-bottom: 1rem;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
a.my-post-title-link:before{
top: 10px;
width: 18px;
height: 18px;
content: "\f073";
font: normal normal normal 14px/1 FontAwesome;
font-size: 18px;
line-height: 18px;
}
a.my-post-title-link{
text-decoration: none;
font-size: 18px;
font-weight: 400;
}
.my-post-title{
display: block;
margin-left: 5rem;
color: #4c4948;
text-decoration: none;
font-size: .8rem;
cursor: pointer;
}
.my-post-header{
position: top;
margin-bottom: 1rem;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.my-post-title-link{
font-size: 16px;
font-weight: 500;
}
.my-post-meta{
position: absolute;
color: #99a9bf;
width: 80px;
color: #114142;
}
在主题文件夹下的 source\js 目录下新建一个 src 文件夹,在 src 文件中,新建一个 clicklove.js 文件,然后把下面的代码复制进去。
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e
接着,打开主题文件下的 layout 文件夹,用文本的方式打开 layout.swig 文件,在文末加上如下的代码:
使用 < !–more–> 手动切断
这种方法可以根据文章的内容,自己在合适的位置添加 < !–more–> 标签,使用灵活,也是Hexo推荐的方法。
在主题文件夹下的 config.yml 配置文件中,搜索 Social,然后提示自己增加自己需要的小图标并设置对应连接。
在主题文件夹下,打开 layout/partials/footer.swig 文件,注释掉相关代码如下所示,位置是文末。我修改的如下代码框所示:
{% set copyright_year = date(null, 'YYYY') %}
© {% if theme.footer.since and theme.footer.since != copyright_year %}{{ theme.footer.since }} – {% endif %}
{{ copyright_year }}
载入天数...载入时分秒...
本站访问量:次
本站总访客量:人
博客全站共{{ totalcount(site) }}字
设置网站图片 Favicon
找到自己的喜欢的图标,下载下来,覆盖掉主题文件夹下的 source/images 目录里面的三张图片即可
网页顶部进度加载条设置
在主题文件夹的 config.yml 配置文件中,搜索到 pace 后,把其值改为 true 即可,然后选择一款你喜欢的样式。
博客置顶设置
安装插件
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
在需要置顶的文章的 Front-matter 中加上 top 即可,数值越大表示等级越高,越靠前显示。
---
title: this is my first blog
date: 2019-04-14
top: 100
---
在主题文件夹中打开 layout/macro/post.swig 文件,定位到 post-header ,把下面的代码添加进去即可。
{% if post.top %}
置顶
{% endif %}
打赏功能设置
在主题文件夹下打开 config.yml 配置文件中,定位到 reward,把微信收款码和支付宝收款码存放到项目根目录下的 source/uploads 里面(若没有 uploads 文件夹可以自己新建)。然后如下图所示修改相关配置,animation 这个字段是设置字体跳动,可以根据个人需求设置。
文章底部版权信息设置
在主题文件夹的 layout/macro 目录下,新建一个 my-copyright.swig 文件,把下面的代码复制进去。
{% if page.copyright %}
本文标题:{{ page.title }}
文章作者:{{ theme.author }}
发布时间:{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}
最后更新:{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}
原始链接:{{ page.permalink }}
许可协议: 转载请保留原文链接及作者。
{% endif %}
在主题文件夹的 source/css/common/components/post/ 目录下,新建一个 my-post-copyright.styl 添加如下代码。
.my_post_copyright {
width: 85%;
max-width: 45em;
margin: 2.8em auto 0;
padding: 0.5em 1.0em;
border: 1px solid #d3d3d3;
font-size: 0.93rem;
line-height: 1.6em;
word-break: break-all;
background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
display: inline-block;
width: 5.2em;
color: #b5b5b5;
font-weight: bold;
}
.my_post_copyright .raw {
margin-left: 1em;
width: 5em;
}
.my_post_copyright a {
color: #808080;
border-bottom:0;
}
.my_post_copyright a:hover {
color: #a3d2a3;
text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
color: #000;
}
.my_post_copyright .post-url:hover {
font-weight: normal;
}
.my_post_copyright .copy-path {
margin-left: 1em;
width: 1em;
+mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
color: #808080;
cursor: pointer;
}
打开主题文加下的 layout/macro/post.swig 文件,找到如图所示的位置添加上下面这段代码。
{% if not is_index %}
{% include 'my-copyright.swig' %}
{% endif %}
打开项目根目录下的 source/css/common/components/post/post.styl 文件,在文末加上这句代码:
@import "my-post-copyright"
在 Markdown 文章中加入 copyright : ture
配置项目根目录下的 config.yml 文件,此处配置会在第四章节,对接远程仓库(码农)的时候讲到,我们到这里还是用本的本地服务器进行测试,所以不用修改,默认就行。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
网站底部字数统计设置
在项目根目录下安装 hexo 插件。
npm install hexo-wordcount --save
打开主题文件夹下的 layout/partials/footer.swig 文件,在文末添加上下面这段代码。
博客全站共{{ totalcount(site) }}字
网站底部加上访问量
打开主题文件夹下的 layout/partials/footer.swig 文件,在文末添加如下代码,位置如下图所示:
本站访问量:次
本站总访客量:人
外链网易云音乐设置
打开网易云,登录自己的账号,选择自己喜欢的一首歌,然后点击“生成外链播放器”,如下图所示
打开主题文件夹下的 layout/macro/sidebar.swig 文件,自己找个合适的位置,把刚刚复制的代码放进去。我放置的位置如下图所示。
文章内链接文本样式设置
打开主题文件夹下的 source\css_common\components\post\post.styl 文件,然后在文末加上下面这段代码即可。
// 文章内链接文本样式
.post-body p a{
color: #0593d3; //原始链接颜色
border-bottom: none;
border-bottom: 1px solid #0593d3; //底部分割线颜色
&:hover {
color: #fc6423; //鼠标经过颜色
border-bottom: none;
border-bottom: 1px solid #fc6423; //底部分割线颜色
}
}
文章显示阅读数量设置
在主题文件下的 config.yml 配置文件中,定位到 busuanzi_count,把 enable 的值修改为 true。
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: user
total_views: true
total_views_icon: eye
post_views: true
post_views_icon: eye
评论模块接入
Valine
对接码云的远程仓库
在码云上创建一个公有仓库,并把公有仓库的链接保存下来。
打开项目根目录下的 config.yml 配置文件,修改 deploy 的值。tpye 设置为 git,repo 则设置为刚刚新建的远程仓库链接。
注意:冒号后面需要再加一个空格,不然会出现格式错误。
在项目根目录下,打开 Git Bash,配置码云的用户和邮箱。
git config --global user.name空格+你的码云的名字
git config --global user.email空格+你的码云的邮箱
安装hexo-deployer-git,安装成功图如下:
npm install hexo-deployer-git --save
hexo g
hexo deploy
回到刚刚新建的远程仓库,刷新页面,可以发现本地博客的相关文件已经全部部署到远程仓库上了。
配置免费域名
在项目首页 -> 服务 -> Gitee Pages
第一次用的用户,需要先绑定手机。
绑定手机后重新进入,选择对应的分支,然后点击部署。等待之后,就会生成对应的访问连接。如下图所示。
点击 Gitee Pages 生成的网站地址,即可远程访问自己的个人博客,但是,我们会发现博客上的样式都没有。
打开项目根目录下的 config.yml 文件,修改 URL 部分的参数。
url 字段的值修改为远程访问连接
root 字段的值修改 /+远程仓库的名称
重新部署
hexo clean
hexo g
hexo d
hexo博客next主题自定义友情链接页面
在 hexo/themes/next/layout 目录下新建一个 link.swig文件,并写入以下内容:
{% block content %}
{######################}
{### LINKS BLOCK ###}
{######################}
{{ page.content }}
{##########################}
{### END LINKS BLOCK ###}
{##########################}
{% endblock %}
然后修改 hexo/themems/next/layout/page.swig 文件,我的page.swig如下:
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template with context %}
{% block title %}
{%- set page_title_suffix = ' | ' + title %}
{%- if page.type === 'categories' and not page.title %}
{{- __('title.category') + page_title_suffix }}
{%- elif page.type === 'tags' and not page.title %}
{{- __('title.tag') + page_title_suffix }}
{% elif page.type === 'links' and not page.title %}{#
#}{{ __('title.links') + page_title_suffix }}
{%- elif page.type === 'schedule' and not page.title %}
{{- __('title.schedule') + page_title_suffix }}
{%- else %}
{{- page.title + page_title_suffix }}
{%- endif %}
{% endblock %}
{% block content %}
{% endblock %}
{% block sidebar %}
{{ sidebar_template.render(true) }}
{% endblock %}
然后我们使用 GitBash 新建一个菜单栏
命令位置:hexo根目录
hexo new page "links"
这样在 hexo/source 目录下会生成一个 links 文件夹,打开其中的 index.md 文件,在标题头中写入 type = “links” 这个属性头,如下:
---
title: 友情链接
date: 2019-06-28 20:46:16
+ type: "links"
---
关闭这个页面的评论
---
title: 友情链接
date: 2019-06-28 20:46:16
type: "links"
+ comments: false
---
添加友链
在主题配置文件 hexo/themes/next/config.xml 文件末尾添加:
# 友情链接
mylinks:
- nickname: Sanarous # 昵称
avatar: https://bestzuo.cn/images/touxiang.jpeg # 头像地址
site: https://bestzuo.cn #友链地址
info: 码农人生
- nickname: Sanarous # 昵称
avatar: https://bestzuo.cn/images/touxiang.jpeg # 头像地址
site: https://bestzuo.cn #友链地址
info: 码农人生
菜单栏汉化
保持这个格式就行,然后就会从上往下渲染到 links 页面,当然,菜单栏汉化需要在 next 主题目录下 languages 文件中找到 zh-CN 或者 zh-Hans.yml 文件,新增 links :
文件位置:hexo/themes/next/languages/zh-CN.yml
menu:
home: 首页
archives: 归档
categories: 分类
tags: 标签
about: 关于
search: 搜索
schedule: 日程表
sitemap: 站点地图
commonweal: 公益404
top: 热门
+ links: 友链
嵌入视频
HTML5
类似如下
{% raw %}
以next主题为例子,在next\source\css\custom\custom.styl下底部添加以下css代码:
/*哔哩哔哩视频适配*/
.bilibili {
position: relative;
width: 100%;
}
@media only screen and (max-width: 767px) {
.bilibili {height: 15em;max-width: 25em;}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.bilibili {height: 20em;max-width: 30em;}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.bilibili {height: 30em;max-width: 40em;}
}
@media only screen and (min-width: 1200px) {
.bilibili {height: 40em;max-width: 50em;}
}
插入视频时,加入标签块class="bilibili"到B站的iframe代码:
3D云标签
安装插件
打开站点根目录下的 package.json 文件,添加依赖 “hexo-tag-cloud”: "2.* " 后执行 npm i。或者直接使用命令行安装:
npm i hexo-tag-cloud --save
配置插件
打开博客根目录的配置文件 config.yml 并添加以下代码片段
# hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
textFont: Trebuchet MS, Helvetica # 字体
textColor: '#555' # 字体颜色
textHeight: 25 # 字体高度
outlineColor: '#E2E1D1' # 字体背景色
maxSpeed: 0.1 # 标签云最大移动速度
之后在主题目录下修改视图。主题不同,需要修改的文件也不同,此处以 NexT 主题为例,其他主题请参考插件文档。打开 layout/macro/sidevar.swig 文件,找到类名为 sidebar-inner 的 div 元素,在该元素中最后位置添加以下代码片段:
{% if site.tags.length > 1 %}
{% endif %}
修改码云密码配置
码云修改密码后会导致本地无法上传,也就无法更新博客。
解决方案:打开控制面板/用户账户/凭据管理器;
windows凭据,然后修改码云本地链接的密码,改成你更换后的密码。
hexo文章加密
安装hexo-blog-encrypt
在hexo根目录下找到包文件package.json,最后添加如下代码:
"hexo-blog-encrypt": "1.1.*"
在"hexo-blog-encrypt": "1.1."与前一个内容需要有个,用于分隔,“hexo-blog-encrypt”: "1.1."末尾不用加,
利用npm安装插件:
npm install
如果不是最新的版本,可以输入如下代码,进行更新操作:
npm update
在 hexo根目录下的_config.yml 中启用该插件
添加如下代码:
# Security
##
encrypt:
enable: true
加密文章
在文章开头格式中添加如下代码:
---
title: hello world
date: 2016-03-30 21:18:02
tags:
- fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---
password: 是该博客加密使用的密码
abstract: 是该博客的摘要,会显示在博客的列表页
message: 这个是博客查看时,密码输入框上面的描述性文字
在使用的过程中遇到问题
首先要确保hexo-blog-encrypt为最新版本,由于在hexo -g(generate)中容易出现差错,推荐按如下步骤执行:
删除根目录下的db.json文件
hexo clean
hexo g
hexo d
同时也记录下next主题的一个bug
有与github更新,不识别名为vendors的文件夹,导致打开博客后会出现空白页面。
所以需要修改在next主题目录下的配置文件config.yml
vendors:
# Internal path prefix. Please do not edit it.
_internal: vendors
修改为:
vendors:
# Internal path prefix. Please do not edit it.
_internal: lib
同时要将hexo/public下的vendors目录重命名为lib,再上传,如果不想这么繁琐,就更新next主题,最新版本已经解决了这个问题。
相册
hexo new page "photo"
主题文件下 config.yml
打开language,在你选择的语言下增加
photo: 相册 #翻译
修改菜单 menu:
photo: /当地目录/ || 图标
在blog文件夹/source下创建photos文件夹,在photos文件夹创建index.md文件,编辑index.md文件,写入以下代码:
图像修改的地方为:
'title': '世界之巅',
'url': 'https://s2.ax1x.com/2019/09/07/nl5540.md.jpg'
图片链接和图像注释,背景图片修改地方为:
background:url('https://s2.ax1x.com/2019/09/07/nlL4pR.jpg');
多标签
tag:(此处没空格)
(空格)-(空格)标签一
(空格)-(空格)标签二
…
…
…
(空格)-(空格)标签N
进度条
在主题文件夹下面下载 Progress module
git clone https://github.com/theme-next/theme-next-pace source/lib/pace
在主题文件夹下的 config.yml 中设置:
pace: #是否开启进度条
enable: true
# Themes list:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal #样式
theme: mac-osx #选择进度条样式
动画特效
js用绝对路径失效,百度也没百度出所以然,我还是太菜了,然后百度的增加页面的特效,打开主题文件 layout_partial目录下的footer.swig中添加如下代码:
动画人物
安装hexo-helper-live2d:
$ npm install --save hexo-helper-live2d
安装live2d:
$ npm install (你需要的模型)
配置:
Hexo站点配置文件_config.yml,或者主题配置文件_config.yml中添加如下配置:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
debug: false
model:
use: (我需要的模型:live2d-widget-model-hibiki)
display:
position: right
width: 150
height: 300
mobile:
show: true
在Hexo根目录中新建文件夹live2d_models,然后在node_modules文件夹中找到刚刚下载的live2d模型,将其复制到live2d_models中,然后编辑配置文件中的model.use项,将其修改为live2d_models文件夹中的模型文件夹名称。一切就绪之后,用hexo server命令启动服务器,稍等一下就可以看到右下角出现了一个可爱的萌萌哒的妹纸!
添加PDF插件
安装插件
npm install --save hexo-pdf
修改配置
主题文件夹 config.yml
pdf:
enable: true
# Default height
height: 500px
建立页面
hexo new page book
根目录下执行
npm i hexo-pdf -S
编辑页面
在index.md 写入
{% pdf 文件链接 %}
或者超链接
文件名
结语
利用hexo Next 7.71这个主题搭建个人博客完工了,看了网上很多教程,当然也有坑,以上来源于对网上博客搭建教程总结,亲测有效,忘了有些文章作者地链接,如果本文侵犯了您的权限欢迎私聊,同时会放上您的博文链接,为此,对于技术学习欢迎探讨。现在真的认为计算机这个领域真的范围大,我应该静下心来好好学习,希望在这条路上走得更远。