首先執行命令,之後把前期準備做好,否則後面會出現毛病。
hexo init
cnpm install --save hexo-deployer-git
npm install
git init
目錄導航
一、根目錄下的配置文件
1、下載next主題,及更改主題
- 下載zip壓縮包點擊這裏
解壓後放入themes目錄下,並改名爲next
- 修改根目錄配置文件
2、更改語言
- 看主題的中文格式,去下面文件夾看
發現中文格式爲zh-CN
- 修改根目錄配置文件
3、設置作者與站點描述
修改根目錄的配置文件
4、增加本地搜索功能(插件)
①、安裝插件,如下圖
cnpm install hexo-generator-searchdb --save
②、修改根目錄配置文件,新增以下內容到任意位置
search:
path: search.xml
field: post
format: html
limit: 10000
③、修改主題配置文件,搜索local_search模塊
5、統計全站及文章字數及閱讀時長(目前有錯)(插件)
①、安裝插件,如下圖
cnpm install hexo-symbols-count-time --save
②、修改根目錄配置文件,添加以下內容。
symbols_count_time:
symbols: true
time: true
total_symbols: true #這兩行是全站統計,可以填false
total_time: true
發現有問題
6、添加卡通人物(插件)
點擊這裏,參考官方文檔,裏面有中文說明
①、首先安裝插件
cnpm install --save hexo-helper-live2d
②、選則模型下載
cnpm install live2d-widget-model-hibiki
# cnpm install ive2d-widget-model-koharu
②、修改根目錄配置文件,在最下面加入
# Live2D
## https://github.com/xiazeyu/live2d-widget.js
## https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-hibiki #修改爲自己下載的模型名稱
display:
position: left
width: 150
height: 300
mobile:
show: true
react:
opacity: 0.7
7、靜態資源壓縮(插件)(有問題)
①、 安裝插件:
cnpm install hexo-neat --save-dev
②、修改根目錄配置文件,添加以下內容:
# hexo-neat
# 博文壓縮
neat_enable: true
# 壓縮html
neat_html:
enable: true
exclude:
# 壓縮css
neat_css:
enable: true
exclude:
- '**/*.min.css'
# 壓縮js
neat_js:
enable: true
mangle: true
output:
compress:
exclude:
- '**/*.min.js'
- '**/jquery.fancybox.pack.js'
- '**/index.js'
二、主題配置文件
1、增加菜單的分類,及創建它們的頁面
- 修改主題配置文件,menu模塊,去掉#即可,可以調換順序
- 創建各自對應的頁面
hexo new page about
hexo new page tags
new page categories
- 在發表文章是開頭加上對應menu字段
①、自己可以在menu添加自定義菜單及菜單圖標
②、hexo new page 自定義菜單名
③、在themes/next/languages/zh-CN.yml文件中menu模塊添加對應名稱及中文名
2、換主題風格
- 修改主題配置文件,找到 Scheme,差別不大
3、設置作者頭像
修改主題配置文件,找到avatar,將地址換位本地或網上的都行。
本地設置:
①.在根目錄的source新建images文件夾,然後把圖片放入。
②. 修改主題配置文件。
rounded是變圓
rotated根據鼠標滾動
4、增加社交鏈接
修改主題配置文件,找到social模塊。
格式爲:顯示文本: 鏈接地址 || Front Awesome圖標名稱
注:Front Awesome鏈接圖標名稱不必帶fa- 前綴
5、打賞功能
修改主題配置文件,搜索reward模塊
①、將支付截圖保存在根目錄下的source/images中
②、修改主題配置文件
注:animation:文字會跳動
6、開啓側邊友情鏈接
修改主題配置文件,搜索Blog rolls模塊
7、設置網站圖標
①、在Easylcon中分別找一張(1616與3232)的ico圖標。或者去別的網站下載,並改爲xxx16.ioc和xxx32.ico,然後把圖標放到根目錄下的source/images
②、修改主題配置文件,搜索favicon模塊
8、增添加載條
①、下載進度條文件
git clone https://github.com/theme-next/theme-next-pace themes/next/source/lib/pace
②、修改主題配置文件,搜索pace模塊,根據列出的,選一個寫在theme後
9、修改網站底部小圖標
修改主題配置文件,搜索icon模塊,修改name後爲Front Awesome。
注:animated爲閃動
color網上找16進制代碼,加“ ”
10、去掉網頁Hexo自帶底部信息
修改主題配置文件,搜索copyright模塊。
11、增加綵帶、背景動圖、背景動畫
- 增加綵帶
①、輸入以下指令
git clone https://github.com/theme-next/theme-next-canvas-ribbon themes/next/source/lib/canvas-ribbon
②、修改主題配置文件,搜索canvas_ribbon模塊
- 增加背景動圖
①、在根目錄下的source文件中若沒有_data目錄則創建,然後在此目錄下創建footer.swig文件。
並輸入以下內容
<script color="0,0,255" opacity="0.7" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script>
②、修改主題配置文件,搜索custom_file_path部分,去掉註釋
- 增加背景動畫
①、輸入以下命令
git clone https://github.com/theme-next/theme-next-three themes/next/source/lib/three
②、修改主題配置文件,搜索JavaScript 3D,三個選一個,第二個加載較快
12、右上角實現github按鈕
修改主題配置文件,搜索github_banner。
發現文章右上角
13、顯示當前瀏覽進度
注意此功能只能用於Pisces和Gemini主題
修改主題配置文件,搜索bt2模塊
14、增加爆炸效果
①、創建路徑:themes/next/source/js/src/fireworks.js
添加以下代碼:
"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)}"use strict";function updateCoords(e){pointerX=(e.clientX||e.touches[0].clientX)-canvasEl.getBoundingClientRect().left,pointerY=e.clientY||e.touches[0].clientY-canvasEl.getBoundingClientRect().top}function setParticuleDirection(e){var t=anime.random(0,360)*Math.PI/180,a=anime.random(50,180),n=[-1,1][anime.random(0,1)]*a;return{x:e.x+n*Math.cos(t),y:e.y+n*Math.sin(t)}}function createParticule(e,t){var a={};return a.x=e,a.y=t,a.color=colors[anime.random(0,colors.length-1)],a.radius=anime.random(16,32),a.endPos=setParticuleDirection(a),a.draw=function(){ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.fillStyle=a.color,ctx.fill()},a}function createCircle(e,t){var a={};return a.x=e,a.y=t,a.color="#F00",a.radius=0.1,a.alpha=0.5,a.lineWidth=6,a.draw=function(){ctx.globalAlpha=a.alpha,ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,0,2*Math.PI,!0),ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,ctx.stroke(),ctx.globalAlpha=1},a}function renderParticule(e){for(var t=0;t<e.animatables.length;t++){e.animatables[t].target.draw()}}function animateParticules(e,t){for(var a=createCircle(e,t),n=[],i=0;i<numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({targets:n,x:function(e){return e.endPos.x},y:function(e){return e.endPos.y},radius:0.1,duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule}).add({targets:a,radius:anime.random(80,160),lineWidth:0,alpha:{value:0,easing:"linear",duration:anime.random(600,800)},duration:anime.random(1200,1800),easing:"easeOutExpo",update:renderParticule,offset:0})}function debounce(e,t){var a;return function(){var n=this,i=arguments;clearTimeout(a),a=setTimeout(function(){e.apply(n,i)},t)}}var canvasEl=document.querySelector(".fireworks");if(canvasEl){var ctx=canvasEl.getContext("2d"),numberOfParticules=30,pointerX=0,pointerY=0,tap="mousedown",colors=["#FF1461","#18FF92","#5A87FF","#FBF38C"],setCanvasSize=debounce(function(){canvasEl.width=2*window.innerWidth,canvasEl.height=2*window.innerHeight,canvasEl.style.width=window.innerWidth+"px",canvasEl.style.height=window.innerHeight+"px",canvasEl.getContext("2d").scale(2,2)},500),render=anime({duration:1/0,update:function(){ctx.clearRect(0,0,canvasEl.width,canvasEl.height)}});document.addEventListener(tap,function(e){"sidebar"!==e.target.id&&"toggle-sidebar"!==e.target.id&&"A"!==e.target.nodeName&&"IMG"!==e.target.nodeName&&(render.play(),updateCoords(e),animateParticules(pointerX,pointerY))},!1),setCanvasSize(),window.addEventListener("resize",setCanvasSize,!1)};
②、修改themes/next/layout/_layout.swig文件,在最下面</body>的上面添加以下代碼:
{% if theme.fireworks %}
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas>
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script type="text/javascript" src="/js/src/fireworks.js"></script>
{% endif %}
③、修改主題配置文件,最後面添加以下代碼:
# Fireworks
fireworks: true
15、添加文章結束語
①、創建路徑:\themes\next\layout\_macro\passage-end-tag.swig,添加以下內容:
<div>
{% if not is_index %}
<div style="text-align:center;color: #ccc;font-size:14px;">-------------本文已結束<i class="fa fa-hourglass-end"></i>非常感謝您的閱讀-------------</div>
{% endif %}
</div>
②、修改==\themes\next\layout\_macro\post.swig==,在END POST BODY後添加以下代碼:
<div>
{% if not is_index %}
{% include 'passage-end-tag.swig' %}
{% endif %}
</div>
③、修改主題配置文件,最下面添加:
# 文章末尾添加“本文結束”標記
passage_end_tag:
enabled: true
16、添加版權信息
修改主題配置文件,搜索creative_commons模塊
17、404頁面創建
①、根目錄下創建404頁面
hexo new page 404
②、在根目錄下的source/404/index.md,添加以下代碼:
---
title: 404
date: 2020-05-28 17:37:33
---
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="robots" content="all" />
<meta name="robots" content="index,follow"/>
<link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
</head>
<body>
<script type="text/plain" src="http://www.qq.com/404/search_children.js"
charset="utf-8" homePageUrl="https://ldysdy999.github.io" #填自己的博客地址
homePageName="回到我的主頁">
</script>
<script src="https://qzone.qq.com/gy/404/data.js" charset="utf-8"></script>
<script src="https://qzone.qq.com/gy/404/page.js" charset="utf-8"></script>
</body>
</html>
③、修改themes/next/languages/zh-CN.yml中文名字公益404修改爲公益
④、修改主題配置文件,開啓menu模塊的commonweal標籤
18、添加網易雲音樂
①、打開網易雲音樂網頁版,生成外連接播放器
複製HTML代碼
②、修改themes/next/layout/_macro/sidebar.swig,添加代碼如下
<div id="music163player">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1381930398&auto=1&height=66"></iframe>
</div>
添加到不同位置,播放器的位置也不同,如下:
➡、添加到開頭幾行
➡、添加到中間
➡、添加到最51行上面,注意51-—54行前千萬不能分開