Hexo+Matery-主题个性化修改一

一.修改主题的 logo 图和 favicon 图标

找到如下的路径，将其替换为你的 logo.png 和 favicon.png 即可：

favicon.png路径:"博客根目录\themes\hexo-theme-matery\source\favicon.png"
logo.png路径"博客根目录\themes\hexo-theme-matery\source\medias\logo.png"

二.去掉右上角的 github 图标

打开你的主题配置文件，找到下面的配置:

# 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: false
  url: https://github.com/blinkfox/hexo-theme-matery
  title: Fork Me

将 enable 的属性值由 true 改为 false 即可。

三.修改社交链接

主页 banner 图中显示的社交链接与底部的社交链接是同步修改的，打开主题配置文件，将社交链接信息修改为你的信息。修改如下:

# 首页 banner 中的第二行个人信息配置，留空即不启用
socialLink:
  github:  https://github.com/blinkfox
  email: 1181062873@qq.com
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 1181062873
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: true # true、false

打开 themes/matery/source/css/matery.css 文件，查找下面的代码块，然后将其注释即可。如下：

.bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
}

或者是找到如下代码，将其注释掉即可：

/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

五.修改导航栏颜色及透明效果

打开 themes/matery/source/css/matery.css 文件，找到.bg-color 属性，修改其属性值即可，代码如下：

.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%); //修改成自己喜欢的颜色值
    opacity: 0.8;  //透明效果 值范围 0~1，看情况自己修改
}

直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

想改为每小时或者每分钟切换 banner 图的话，需要将 getDay() 改为 getHours() 或者 getMinutes() 即可。

随机切换代码如下：

$('.bg-cover').css('background-image', 'url(<%- theme.featureImages[Math.floor(Math.random() * theme.featureImages.length + 1)-1] %>)');

文章特色图在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加、减少或者替换，并需要在 _config.yml 做同步修改。

七.首页动态打字效果副标题

在主题配置文件中，找到下面的配置：

# 打字效果副标题.
# 如果有符号 ‘ ，请在 ’ 前面加上 \
subtitle:
  enable: true # true添加首页动态打字效果副标题 false添加动态诗词
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 100 # 打字速度
  backSpeed: 50 # 删除速度
  sub:
    - 从来没有真正的绝境, 只有心灵的迷途
    - Never really desperate, only the lost of the soul

八.动态标题

实现方法，引入 js 文件，在主题文件下的 /source/js/ 下新建 FunnyTitle.js，增加以下代码：

var OriginTitle = document.title;
 var titleTime;
 document.addEventListener('visibilitychange', function () {
     if (document.hidden) {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '我相信你还会回来的！';
         clearTimeout(titleTime);
     }
     else {
         $('[rel="icon"]').attr('href', "https://cdn.jsdelivr.net/gh/guixinchn/image/blog/favicon.png");
         document.title = '哈哈，我就知道！' + OriginTitle;
         titleTime = setTimeout(function () {
             document.title = OriginTitle;
         }, 2000);
     }
 });

然后在添加到 themes/matery/layout/layout.ejs 引入

<!--动态标题-->
	<script src="<%- theme.jsDelivr.url %><%- url_for('/js/FunnyTitle.js') %>"></script>

九.valine评论模块配置

主题配置文件找到valine部分，按需求配置：

# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
  enable: true
  appId: # 将应用key的App ID设置在这里
  appKey: # 将应用key的App Key设置在这里
  notify: false # Verification code验证码 默认为false
  verify: false # Verification code验证码 默认为false
  visitor: true #文章访问量统计。
  enableQQ: true #是否启用昵称框自动获取QQ昵称和QQ头像, 默认关闭
  avatar: 'wavatar' # 头像风格: mp/identicon/monsterid/wavatar/retro/hide
  pageSize: 10 # 分页大小，10页就自动分页
  placeholder: 'just go go' # 初始化评论显示，根据自己修改，这里默认
  background: /medias/comment_bg.png

十.修改网站背景图

在主题配置文件找到以下部分,自行开启，并替换图片

# 网站背景图
background:
  enable: false
  url: "https://cdn.jsdelivr.net/gh/Tokisaki-Galaxy/res/site/medias/background.jpg"