Git-Github-Hexo搭建博客

Posted 2020-12-09 zzw1024

hexo-theme-matery主题设置注意事项

layout文件

这个文件是整个博客网页的显示设置

menu名称.ejs:
都是显示菜单选项的

记得在hexo根目录下新建相关的page后，在index中加上type: ""和layout: ""

layout.ejs:

一般是整个博客版面的特效显示在该文件下设置，比如下雪、2D人物插件、天气等插件

post.ejs:

是发表文章的版页显示

比如公式，等显示

-widge文件

这个文件是一些浮动窗口插件的设置

比如音乐、视频、天气、日历等等，其实内部都是一个独立的窗口显示，只不过有些是将其固定在一个版面上而已

-partial文件

这是一些详细的细节设置和插件

一般根据文件名就知道了其设置和具体作用是什么

footer.js:

网页页脚显示设置，比如版权，运行时间等等

header.ejs:

网页页眉（页头）显示设置，比如menu菜单，头像，网页log等

navigation.ejs:

这是页眉版面的详细设置

source文件

这是一些图片、动画、脚本、js、css等自己加入的一些资源

css文件

渲染效果特效

matry.css：

这个博客版面渲染特效：

比如手机、平板、电脑等版面显示

还有导航栏颜色(bg-color)、背景颜色(bg)、代码框(code)边距等设置

其他的就是自己根据所需添加的渲染

js文件

同样是一些特效渲染设置

libs文件

一些插件具体实现的文件

plugins

我额外加入的插件具体实现的文件，比如看板娘

img

图库

medias

图片滚动资源

其他

一些资源包，比如看板娘的具体动画

添加渲染

添加雪花

在 js目录下添加snow.js

/*样式一*/
/*样式一*/
(function ($) {
    $.fn.snow = function (options) {
        var $flake = $(‘<div id="snowbox" />‘).css({
                ‘position‘: ‘absolute‘,
                ‘z-index‘: ‘9999‘,
                ‘top‘: ‘-50px‘
            }).html(‘?‘),
            documentHeight = $(document).height(),
            documentWidth = $(document).width(),
            defaults = {
                minSize: 10,
                maxSize: 20,
                newOn: 1000,
                flakeColor: "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
            },
            options = $.extend({}, defaults, options);
        var interval = setInterval(function () {
            var startPositionLeft = Math.random() * documentWidth - 100,
                startOpacity = 0.5 + Math.random(),
                sizeFlake = options.minSize + Math.random() * options.maxSize,
                endPositionTop = documentHeight - 200,
                endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                durationFall = documentHeight * 10 + Math.random() * 5000;
            $flake.clone().appendTo(‘body‘).css({
                left: startPositionLeft,
                opacity: startOpacity,
                ‘font-size‘: sizeFlake,
                color: options.flakeColor
            }).animate({
                top: endPositionTop,
                left: endPositionLeft,
                opacity: 0.2
            }, durationFall, ‘linear‘, function () {
                $(this).remove()
            });
        }, options.newOn);
    };
})(jQuery);
$(function () {
    $.fn.snow({
        minSize: 5,
        /* 定义雪花最小尺寸 */
        maxSize: 50,
        /* 定义雪花最大尺寸 */
        newOn: 300 /* 定义密集程度，数字越小越密集 */
    });
});


/*样式二*/
//背景雪花飘落特效
(function($){
  $.fn.snow = function(options){
  var $flake = $(‘<div id="snowbox" />‘).css({‘position‘: ‘absolute‘,‘z-index‘:‘9999‘, ‘top‘: ‘-50px‘}).html(‘&#10052;‘),
  documentHeight  = $(document).height(),
  documentWidth = $(document).width(),
  defaults = {
    minSize   : 10,
    maxSize   : 20,
    newOn   : 1000,
    flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
  },
  options = $.extend({}, defaults, options);
  var interval= setInterval( function(){
  var startPositionLeft = Math.random() * documentWidth - 100,
  startOpacity = 0.5 + Math.random(),
  sizeFlake = options.minSize + Math.random() * options.maxSize,
  endPositionTop = documentHeight - 200,
  endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
  durationFall = documentHeight * 10 + Math.random() * 5000;
  $flake.clone().appendTo(‘body‘).css({
    left: startPositionLeft,
    opacity: startOpacity,
    ‘font-size‘: sizeFlake,
    color: options.flakeColor
  }).animate({
    top: endPositionTop,
    left: endPositionLeft,
    opacity: 0.2
  },durationFall,‘linear‘,function(){
    $(this).remove()
  });
  }, options.newOn);
    };
})(jQuery);
$(function(){
    $.fn.snow({ 
      minSize: 5, /* 定义雪花最小尺寸 */
      maxSize: 50,/* 定义雪花最大尺寸 */
      newOn: 500  /* 定义密集程度，数字越小越密集 */
    });
});

在layout.ejs添加

<!-- 雪花特效1 -->
<% if (theme.snow){ %>
  <script type="text/javascript" src="/js/snow.js"></script>
<% } %>

<!-- 雪花特效 -->
<% if (theme.xuehuapiaoluo.enable) { %>
    <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            if(new Date().getHours()%2==0){
            document.write(‘<script type="text/javascript" src="/js/xuehuapiaoluo.js"></script>‘);
            }
        }
    </script>
<% } %>

在/config.yml设置

wenzi:
  enable: true
xuehuapiaoluo:
  enable: true
sakura:
  enable: true

在/config.yml添加

libs:
  js:
    sakura: /js/sakura.js
    fireworks: /js/fireworks.js
    wenzi: /js/wenzi.js
    xuehuapiaoluo: /js/xuehuapiaoluo.js

添加文字特效

在js下新建wenzi.js

/* 鼠标点击文字特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        // var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});

使用仿上面

添加天气

在layout.ejs中添加

<!-- 天气 -->
<% if (theme.weather.enable) { %>
  <%- partial(‘_widget/weather‘) %>
<% } %>

在_widget中添加weather.ejs

<!-- weather -->
<script type="text/javascript">
  WIDGET = {FID: ‘iBarNbUMlb‘}
</script>
<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>

在config中添加

weather:true

添加2D人物

在layout.ejs中添加

<!-- <script async type="text/javascript" size="90" alpha="0.2" zIndex="0" src="<%- url_for(‘plugins/ribbon.js/ribbon.min.js‘) %>"></script> -->
<%# "Live2D看板娘：https://github.com/JoeyBling/live2d-widget.js" %>
<% if (theme.live2d && theme.live2d.enable){ %>
    <%- partial(‘_partial/live2d-widget‘) %>
<% } %>

在_partial中添加live2d-widget.ejs

<script type="text/javascript" src="<%- url_for(‘plugins/live2d-widget.js/L2Dwidget.min.js‘) %>"></script>
<script type="text/javascript">
  /**
   * 完整配置请参考：https://l2dwidget.js.org/docs/class/src/index.js~L2Dwidget.html#instance-method-init
   */
  var pluginModelPath = "assets/", // 模型的文件路径，无需更改
    pluginRootPath = "<%- url_for(‘/live2d_models/‘) %>"; // 插件的路径，无需更改
  //特定的模型json文件名称
  var modelPathJson = {
    "epsilon2_1": "Epsilon2.1",
    "gf": "Gantzert_Felixander",
    "haru/01": "haru01",
    "haru/02": "haru02",
    "nietzsche": "nietzche"
  }

  <% if (theme.live2d.model) { %>
    var modelName = "<%- theme.live2d.model %>";
  <% } else { %>
    var modelName = "hibiki";
  <% } %>

  var modelJsonPath = "";
  if (modelPathJson[modelName]) {
    modelJsonPath = pluginRootPath + modelName + "/" + pluginModelPath + modelPathJson[modelName] +
      ".model.json";
  } else {
    modelJsonPath = pluginRootPath + modelName + "/" + pluginModelPath + modelName + ".model.json";
  }
  L2Dwidget.init({
    model: {
      jsonPath: modelJsonPath
    },
    display: {
      <% if (theme.live2d.display && theme.live2d.display.position) { %> position: "<%- theme.live2d.display.position %>", <% } %>
      <% if (theme.live2d.display && theme.live2d.display.width) { %> width: <%- theme.live2d.display.width %>, <% } %>
      <% if (theme.live2d.display && theme.live2d.display.height) { %> height: <%- theme.live2d.display.height %>, <% } %>
      <% if (theme.live2d.display && theme.live2d.display.hOffset) { %> hOffset: <%- theme.live2d.display.hOffset %>, <% } %>
      <% if (theme.live2d.display && theme.live2d.display.vOffset) { %> vOffset: <%- theme.live2d.display.vOffset %> <% } %>
    },
    mobile: {
      <% if (theme.live2d.mobile && theme.live2d.mobile.show == false) { %> show: <%- theme.live2d.mobile.show %>, <% } %>
      <% if (theme.live2d.mobile && theme.live2d.mobile.scale) { %> scale: <%- theme.live2d.mobile.scale %> <% } %>
    },
    react: {
      <% if (theme.live2d.react && theme.live2d.react.opacity) { %> opacity: <%- theme.live2d.react.opacity %> <% } %>
    }
  })

</script>

在source中添加动画库，下载地址：https://github.com/JoeyBling/hexo-theme-yilia-plus.git
在source/plugins添加文件，下载地址：https://github.com/JoeyBling/hexo-theme-yilia-plus.git

在config中添加

# 看板娘动态模型插件
## https://github.com/JoeyBling/live2d-widget.js
live2d:
  # (关闭请设置为false)
  enable: true
  model: shizuku
  display:
    position: right # 显示位置：left/right(default: ‘right‘)
    width: 145  # 模型的长度(default: 150)
    height: 315 # 模型的高度(default: 300)
    hOffset: 50 # 水平偏移(default: 0)
    vOffset: 35 # 垂直偏移(default: -20)
  mobile:
    show: false # 是否在移动设备上显示(default: true)
    scale: 0.6 # 移动设备上的缩放(default: 0.5)
  react:
    opacity: 0.8 # 模型透明度(default: 0.7)

添加页面标题切换功能

在header.ejs中的第一个, 之间添加：

<% if (theme.tab_title_change && theme.tab_title_change.enable) { %>
<script>
  /* 标签页标题切换 */
  var originTitle = document.title;
  var titleTime;
  document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      document.title = "<%- theme.tab_title_change.left_tab_title %>" + originTitle;
      clearTimeout(titleTime);
    } else {
      document.title = "<%- theme.tab_title_change.return_tab_title %>" + originTitle;
      titleTime = setTimeout(function () {
        document.title = originTitle;
      }, 2000);
    }
  });
</script>
<% } %>

在config中添加

# Tab Title Change | 标签页标题切换
tab_title_change:
  enable: true
  left_tab_title: ‘(つェ?) 我藏好了哦~ ‘
  return_tab_title: ‘(*′?｀*) 被你发现啦~ ‘

添加github 的fork me

在header.ejs中的第一个

之前添加：

<% if (theme.githubLink && theme.githubLink.enable) { %>
    <%- partial(‘_partial/github-link‘) %>
<% } %>

在_partial中添加github-link.ejs

<style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="<%- theme.githubLink.url %>" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="<%- theme.githubLink.title %>" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>

在config中添加

# Whether to display fork me on github icon and link, default true, You can change it to your repo address
# 配置是否在 header 中显示 fork me on github 的图标，默认为true，你可以修改为你的仓库地址.
githubLink:
  enable: true
  url: https://github.com/zzw1024
  title: Fork Me

添加音乐

在layout.ejs中添加

<!-- 音乐 -->
 <% if (theme.music.enable) { %>
    <%- partial(‘_widget/music‘) %>
<% } %>

在_widget中新建music.esj

<%
var audiosJson = JSON.stringify(site.data.musics);
%>

<link rel="stylesheet" href="<%- theme.libs.css.aplayer %>">
<div class="<% if (theme.music.enable && !theme.music.fixed) { %>music-player<% } %>">
    <% if (theme.music.showTitle) { %>
    <div class="title center-align">
        <i class="fas fa-music"></i>&nbsp;&nbsp;<%- theme.music.title %>
    </div>
    <% } %>
    <div class="row">
        <div class="col l8 offset-l2 m10 offset-m1 s12">
            <div id="aplayer" class="music"></div>
        </div>
    </div>
</div>

<script src="<%- theme.libs.js.aplayer %>"></script>
<script>
$(function () {
    new APlayer({
        container: document.getElementById(‘aplayer‘),
        fixed: ‘<%- theme.music.fixed %>‘ === ‘true‘,
        autoplay: ‘<%- theme.music.autoplay %>‘ === ‘true‘,
        theme: ‘<%- theme.music.theme %>‘,
        loop: ‘<%- theme.music.loop %>‘,
        order: ‘<%- theme.music.order %>‘,
        preload: ‘<%- theme.music.preload %>‘,
        volume: Number(‘<%- theme.music.volume %>‘),
        listFolded: ‘<%- theme.music.listFolded %>‘ === ‘true‘,
        listMaxHeight: ‘<%- theme.music.listMaxHeight %>‘,
        audio: eval(<%- audiosJson %>)
    });
});
</script>

在config中添加

# Whether to display the musics.
# 是否在首页显示音乐.
music:
  enable: false
  showTitle: true
  title: ‘亲，听听音乐放松放松。。。‘
  fixed: false # 开启吸底模式
  autoplay: false # 是否自动播放
  theme: ‘#42b983‘
  loop: ‘all‘ # 音频循环播放, 可选值: ‘all‘, ‘one‘, ‘none‘
  order: ‘list‘ # 音频循环顺序, 可选值: ‘list‘, ‘random‘
  preload: ‘auto‘ # 预加载，可选值: ‘none‘, ‘metadata‘, ‘auto‘
  volume: 0.7 # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: false # 列表默认折叠
  listMaxHeight: #列表最大高度

添加项目栏

添加分类标签等menu

其他的比如分类标签如下

添加page

hexo new page "menuName"

并且编辑对应的index

---
title: tags
date: 2018-12-12 21:25:30
type: "tags"   //一定得有
layout: "tags"  //一定得有
---

添加友链：

添加page

hexo new page "friends"

并且编辑对应的index

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"  //一定的有
---

在hexo/source下新建 _data(下划线data) 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

添加好文收藏

hexo new page "goodpapers"

修改站点_config.yml文件

menu:
  好文收藏:
    url: /goodpapers
    icon: fa-coffee

修该goodpapers/index.md

---
title: 好文收藏
date: 2019-02-18 11:09:48
---

1. [我的八年博士生涯](https://www.huxiu.com/article/273773.html?f=member_collections)         
2. [我曾是性用品微商](https://www.huxiu.com/article/285040.html?f=member_collections)
3. [乔布斯回归：从任性国王到铁腕企业家](https://www.huxiu.com/article/285320.html)
4. [那些简历造假拿 Offer 的程序员，后来都怎么样了？](https://mp.weixin.qq.com/s/a2rscuxJ0fl07OJ-0Shxfg)
5. [知网是个什么东西啊，好暴利](https://www.huxiu.com/article/285502.html)

添加相册

功能修改添加备忘录

添加简历(matery):
在about.ejs中加入一个新的card，直接复制上面的就行

修改简历:
在自己的about/index里面写表格建立

添加收藏文章:
在goodpapers/index里面写

添加友链：
在source/_data/friends.json里面按照格式写