码迷，mamicode.com
首页 > 其他好文 > 详细

Git-Github-Hexo搭建博客（二）

时间：2020-06-09 23:29:10      阅读：76      评论：0      收藏：0      [点我收藏+]

标签：spl   播放   5*   fir   let   日历   fun   blank   tooltip   

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里面按照格式写

Git-Github-Hexo搭建博客（二）

标签：spl   播放   5*   fir   let   日历   fun   blank   tooltip   

原文地址：https://www.cnblogs.com/zzw1024/p/13081464.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！