个人博客

个人博客网站搭建平台：wordpress 、hexo、jekyll 、gohugo、vuepress、solo

此处搭建选用hexo

1. 环境准备node.js，Git

2. 加快下载速度，安装淘宝的cnpm 管理器

   npm install -g cnpm --registry=http://registry.npm.taobao.org
   

   下载好后可以用cnpm -v查看cnpm版本

3. 安装hexo框架

   cnpm install -g hexo-cli 
   

   下载好后可以用hexo -v查看hexo版本

4. 在本地磁盘创建blog目录，进入blog目录

5. 生成博客 初始化博客

   sudo hexo init 
    //window下用  
   hexo init
   

6. 启动本地博客服务

   hexo s 
   

7. 本地即可访问， 地址http://localhost:4000

8. 创建新的文章

   hexo n "我的第一篇文章"
   

9. 清理

    hexo clean
   

10. 生成

    hexo g
    

11. Github创建一个新的仓库 YourGithubName.github.io

12. 在blog目录下安装git部署插件

    cnpm install --save hexo-deployer-git 
    

13. 配置_config.yml

    deploy:
      type: git
      repo: https://github.com/YourGithubName/YourGithubName.github.io.git
      branch: master
    

---

```

14. 部署到Github仓库里

    hexo d
    

15. 访问这个地址可以查看博客

    https://YourGithubName.github.io/
    

16. 换主题，下载yilia主题到本地

    git clone https://github.com/litten/hexo-theme-yilia.git 	 themes/yilia 
    

17. #修改hexo根目录下的 _config.yml 文件 ：

     theme: yilia
    

    hexo c #清理一下
    hexo g #生成
    hexo d #部署到远程Github仓库
    https://YourGithubName.github.io/ #查看博客

18. 一键清除、编译、部署

    #部署到git
    hexo clean&hexo g&hexo depl
    #部署本地
    hexo clean&hexo g&hexo s
    

跟换Butterfly主题官网、官方博客、小康、其他

• 记得将Butterfly的配置文件移动到source/_data下，复制并重命名，否则会出错

基于Butterfly的个人博客修改

1.修改默认语言

安装Butterfly主题后，在浏览器显示的是英文，可以修改_config.yml配置文件变为中文

• 找到language并将其修改为 zh-CN

2.增加页面

hexo new page 页面的名称

eg：

对应下面butterfly.yml中的：

3.添加搜索框

1. 安装 hexo-generator-searchdb 搜索插件

npm install hexo-generator-searchdb --save

2. 修改source/_data/butterfly.yml配置文件：找到local_search将enable修改为true：

# Local search
local_search:
  enable: true
  labels:
    input_placeholder: Search for Posts
    hits_empty: "We didn't find any results for the search: ${query}" # if there are no result

重新编译添加成功：

4.飘带背景

修改source/_data/butterfly.yml配置文件：找到canvas_ribbon_piao将其修改为true：

# Dynamic ribbon (動態彩帶)
canvas_ribbon_piao:
  enable: true
  mobile: true

重新编译添加成功：

感谢：XJHui

5. 添加鼠标移动样式

• 首先写好/下载好自己的样式
• 修改source_data/butterfly配置文件

# Inject
# Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
# 其中 head 是用来引入 css 的。bottom 是用来引入 js 的
inject:
  head:  
    # - <link rel="stylesheet" href="/xxx.css">
  - <link rel="stylesheet" href="/css/move_mouse/style.css">  #鼠标移动样式
  #- <link rel="stylesheet" href="/css/background.css">  #背景样式
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/iconfont.min.css">  #阿里图标库
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/pool.min.css">
  bottom:
  #   - <script src="xxxx"></script>
  - <script src="js/move_mouse/script.js"></script> #移动js
  - <script src="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/js/pool.min.js"></script>
  #- <script src="/js/down_mouse/mo.min.js"></script> #鼠标点击js1 加了有bug 点击○
  #- <script src="/js/down_mouse/mojs-player.min.js"></script> #鼠标点击js2 加了有bug 点击○
  - <script src="/js/down_mouse/love.js"></script> #鼠标点击js2 加了有bug  点击❤
  - <script src='https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js'></script> #鼠标移动js

butterfly

inject:
  head:  
    # - <link rel="stylesheet" href="/xxx.css">
  - <link rel="stylesheet" href="css/move_mouse/style.css">  #鼠标移动样式
  - <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/pool.min.css">
  bottom:
    # - <script src="xxxx"></script>
  - <script src="js/move_mouse/script.js"></script> #移动js
  - <script src="https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/js/pool.min.js"></script>
  - <script src="js\down_mouse/mo.min.js"></script> #鼠标点击js
  - <script src="js\down_mouse/mojs-player.min.js"></script> #鼠标点击js

css和js放置的目录myblog\themes\butterfly\source\css\move_mouse、myblog\themes\butterfly\source\js\move_mouse

• 效果
  

6. 添加鼠标点击效果

• 首先写好/下载好自己的样式
• 引入与上面的步骤一样

7. 友情链接

• 创建页面（参考上面）
• 在myblog\source_data创建link.yml

- class_name: 友情鏈接
  class_desc: 那些人，那些事
  link_list:
    - name: XiaoWang
      #link: https://blog.csdn.net/qq_43817164
      avatar: https://wx.qlogo.cn/mmopen/vi_32/VTukmScZclovwRkpV0iaDTFaJG72Cqfo7xALpZFXwK9KNvZUC5ib4qxMibrwhBqwCdyCyQ2NIKg3KGLN34wwexrjQ/132
      descr: 今日事,今日畢
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、簡單且強大的網誌框架

- class_name: 網站
  class_desc: 值得推薦的網站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 視頻網站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中國最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

npm i hexo -render-scss

8. 音乐插件

• 参考https://plushine.cn/54808.html
• https://blog.csdn.net/hushhw/article/details/88092728

9. 添加视频

下面代码复制到视频页面即可，视频地址自行跟换

		<div style="position: relative;width: 115%;height: 0;padding-bottom: 92%;margin-left: -92px;">
			<iframe src="https://www.bilibili.com/video/BV1uf4y127Ab/" security="restricted" sandbox="allow-same-origin  allow-scripts"
			 scrolling="auto" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute;width: 100%;height: 100%;left: 0;top: 0;">
			</iframe>
		</div>

10.添加网站图标

到easyicon中找一张（32*32）的ico图标，然后把图标放在/themes/butterfly/source/images里，并且修改主题配置文件，更改一下路径即可，然后修改主题配置文件butterfly

favicon: /img/Banq-1.ico

11.改滚动条样式预计页脚

• 我在引入的鼠标样式里面直接加

/* 页脚footer */
/* 渐变色滚动动画 */
@-webkit-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@keyframes Gradient {
    0% {
        background-position: 0 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}
#footer {
    background: linear-gradient(-45deg, #ee7752, #ce3e75, #23a6d5, #23d5ab) !important;
    background-size: 400% 400% !important;
    -webkit-animation: Gradient 10s ease infinite !important;
    -moz-animation: Gradient 10s ease infinite !important;
    animation: Gradient 10s ease infinite !important;
    -o-user-select: none !important;
    -ms-user-select: none;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}
#footer:before {
    background-color: rgba(0, 0, 0, 0) !important;
}




/* 滚动条 */
::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2) !important;
  border-radius: 2em !important;
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5 !important;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  ) !important;
  border-radius: 2em !important;
}

::-webkit-scrollbar-corner {
  background-color: transparent !important;
}

::-moz-selection {
  color: #fff !important;
  background-color: #49b1f5 !important;
}

11.动态背景

• 在主题配置文件中找到canvas_nest: false，把它改为canvas_nest: true即可
• 

12.点击心形效果

• 在/themes/butterfly/source/js/src路径下新建一个love.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<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);

• 像上面的5/6一样引入即可

13. 配置404页面

• 修改主题配置文件，本地看不到

  # A simple 404 page
  error_404:
   enable: true
   subtitle: "頁面沒有找到"
   background:
  

14. 添加备案号

• 修改主题配置文件，将ICP改为true

  ICP:
    enable: true
    url: http://beian.miit.gov.cn
    text: 粤ICP备20054751
    icon: /img/icp.png
  

• 效果
  

15. 修改侧边栏位置