hexo+matery个人主页操作总结

写博客

1. 在_post 文件夹下，新建&&.md 文件或 hexo new <title>

    基本配置如下：
    title： 文章标题
    top： 是否把文章置顶
    img： 是否给文章定义特色图片，如果不设置，默认从featureimages里面抽取
    summary： 是否给文章加上摘要，不设置，默认截取文章开头一部分
    categories： 给文章分类
    tags： 给文章加标签，可加多个
   

2. 剩下博客书写同csdn一样，可以直接复制过去

   ---
   title: hexo的个性化配置
   date: 
   author: Messi
   img: /medias/featureimages/16.jpg         ---指定16.jpg为文章背景图
   top: true
   cover: true
   coverImg: 
   password: 
   toc: false
   mathjax: false
   summary: hexo+matery个人主页操作总结
   categories: hexo
   tags:
     - hexo
   ---
   
   # Your Content...
   ......
   
   

---

网站封面图片

在myblog\themes\matery\source\medias\banner文件夹下，把每日更换背景图片设置为false后，会默认使用"0.jpg"这张图片，更换为自己喜欢的壁纸即可。

---

首页背景图片

在themes\Matery\source\css\matery.css，ctrl+F快捷键查找body，修改样式如下：

body {
    background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover, url("https://ae01.alicdn.com/kf/H18a4b998752a4ae68b8e85d432a5aef0l.png"), url("https://ae01.alicdn.com/kf/H21b5f6b8496141a1979a33666e1074d9x.jpg") 0px 0px;
    background-attachment: fixed;
    margin: 0;
    color: #7F95D1;
    /* background-color: #eaeaea;
    margin: 0;
    color: #34495e;
    overflow-x: hidden;
    overflow-y: auto; */
}

---

修改导航栏、页脚及文章卡片标签的颜色

在matery.css中找到.bg-color,修改即可：
我这里调整成了动态渐变，颜色参考了Hexo 博客之 butterfly 主题优雅更换背景

/* 动态渐变 */
@keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.bg-color {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

---

修改主页的Social Link

除了在主题的yml文件中socialLink:添加链接，还要修改ejs文件，文件在主题目录下的layout文件夹下的_partial文件夹，修改social-link.ejs，添加相关的配置

<% if (theme.socialLink.csdn) { %>
    <a href="<%= theme.socialLink.csdn %>" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: <%= theme.socialLink.csdn %>" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>
<% } %>

---

附：采坑总结

1. 使用hexo-prism-plugin代码高亮插件美化代码块时，默认代码高亮和拓展插件都不起作用。该插件作者几年前就已经探讨过原因和解决方案：解决的办法是安装hexo-inject，进入到博客项目目录，命令行输入：

   npm i hexo-inject -s
   

2. 在页脚有busuanzi统计的站点访问量，hexo s预览模式下会显示错误的统计数目，不用担心，部署完成后统计数目会恢复正常！