Hexo系列matery主题踩坑优化记录

最新推荐文章于 2024-05-14 11:37:46 发布

幸愉聊信奥

最新推荐文章于 2024-05-14 11:37:46 发布

阅读量1.9k

点赞数 6

分类专栏： # 其他文章标签： Hexo matery

本文链接：https://blog.csdn.net/Edviv/article/details/110632433

版权

其他专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

下载
配置
添加 ArtiTalk 说说界面
总结

下载

下载主题

git clone https://github.com/blinkfox/hexo-theme-matery.git

配置

1.更换主题，在博客根目录下_config.yml 找到theme替换成下载文件的名字即可。
在这里插入图片描述
页面文章数最好是3的倍数，样式好看一点。
使用命令创建页面，放在博客下的 $s o u r c e s$ 文件夹下，编辑 $. m d$ 文件。我们需要添加 $c a t e g o r i e s$ 页， $t a g s$ 页， $a b o u t$ 页， $c o n t a c t$ 页以及 $f r i e n d s$ 页

hexo new page "页面名称"

1. $f r i e n d s$ 页面为例子，编辑文件下的 $. m d$ 文件

title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"

$s o u r c e s$ 文件夹下创建 _ $d a t a$ 文件夹，在该文件夹下创建文件 $f r i e n d s . j s o n$

[{
    "avatar": "https://edviv.gitee.io/images_bed/images/Blog/Edwiv.jpg",
    "name": "Edviv",
    "introduction": "心之所向 爱与自由",
    "url": "http://Edviv.top/",
    "title": "前去参观"
},{ 
    "avatar": "https://wiki.hyperledger.org/download/attachments/2392069/fabric?version=1&modificationDate=1540928132000&api=v2", 
    "name": "Fabric", 
    "introduction": "A Blockchain Platform for the Enterprise", 
    "url": "https://hyperledger-fabric.readthedocs.io/en/master/", 
    "title": "前去学习" 
},{ 
    "avatar": "https://www.bootcdn.cn/assets/img/maoyun.svg", 
    "name": "BootCDN", 
    "introduction": "稳定、快速、免费的前端开源项目 CDN 加速服务。", 
    "url": "https://www.bootcdn.cn/", 
    "title": "前去加速" 
}]

效果图：
在这里插入图片描述
解决站内搜索异常问题，主题 $s o u r c e s$ 文件下完整的 $s e a r c h . j s$ 文件

var searchFunc = function (path, search_id, content_id) {
    'use strict';
    $.ajax({
        url: path,
        dataType: "xml",
        success: function (xmlResponse) {
            // get the contents from search data
            var datas = $("entry", xmlResponse).map(function () {
                return {
                    title: $("title", this).text(),
                    content: $("content", this).text(),
                    url: $("url", this).text()
                };
            }).get();
            var $input = document.getElementById(search_id);
            var $resultContent = document.getElementById(content_id);
            $input.addEventListener('input', function () {
                var str = '<ul class=\"search-result-list\">';
                var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                $resultContent.innerHTML = "";
                if (this.value.trim().length <= 0) {
                    return;
                }
                // perform local searching
                datas.forEach(function (data) {
                    var isMatch = true;
                    var content_index = [];
                    var data_title = data.title.trim().toLowerCase();
                    var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                    var data_url = data.url;
                    var index_title = -1;
                    var index_content = -1;
                    var first_occur = -1;
                    // only match artiles with not empty titles and contents
                    if (data_title != '' && data_content != '') {
                        keywords.forEach(function (keyword, i) {
                            index_title = data_title.indexOf(keyword);
                            index_content = data_content.indexOf(keyword);
                            if (index_title < 0 && index_content < 0) {
                                isMatch = false;
                            } else {
                                if (index_content < 0) {
                                    index_content = 0;
                                }
                                if (i == 0) {
                                    first_occur = index_content;
                                }
                            }
                        });
                    }

            //if (isMatch) { str += "<li><a href='/" + data_url + "' class='search-result-title'>" + data_title + "</a>";

                    // show search results
                    if (isMatch) {
                        str += "<li><a href='/" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                        var content = data.content.trim().replace(/<[^>]+>/g, "");
                        if (first_occur >= 0) {
                            // cut out 100 characters
                            var start = first_occur - 20;
                            var end = first_occur + 80;
                            if (start < 0) {
                                start = 0;
                            }
                            if (start == 0) {
                                end = 100;
                            }
                            if (end > content.length) {
                                end = content.length;
                            }
                            var match_content = content.substr(start, end);
                            // highlight all keywords
                            keywords.forEach(function (keyword) {
                                var regS = new RegExp(keyword, "gi");
                                match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                            });

                            str += "<p class=\"search-result\">" + match_content + "...</p>"
                        }
                        str += "</li>";
                    }
                });
                str += "</ul>";
                $resultContent.innerHTML = str;
            });
        }
    });
}

配色问题
主题 sources\css\matery.css
ctrl+f 查找 #4cbf30（浅绿色） 和 #0f9d58（深绿色）改成自己想要的颜色即可。
查找.bg-cover:after注释掉就可以取消首页渐变颜色动画

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

在这里插入图片描述
☝

请自行查看参考文档👇👇
👉👉matery参考文档
 cungudafa的matery专栏

添加 ArtiTalk 说说界面

👉ArtiTalk官网
👉ArtiTalk代码仓库
👇效果图片👇
在这里插入图片描述
$l e a n c l o u d$ 网址：https://leancloud.app/
创建用户，就是发布说说的用户，建议使用国际版。

在对应 img 属性下添加你发布说说的 url头像链接

在主题目录 /source/libs 目录新建一个文件夹 artitalk。

找到刚才下载 $A r t i t a l k$ 目录，进入 dist 目录，里面有2个文件夹：css 和 js

将 /Artitalk/dist/css/ 下的 artitalk.min.css 复制到主题目录 /source/libs/artitalk下；

将 /Artitalk/dist/js/ 下的 artitalk.min.js 复制到主题目录 /source/libs/artitalk下；

完成后，主题目录 /source/libs/artitalk下就有 artitalk.min.css 和 artitalk.min.js 两个文件了。

修改主题文件 _config.yml，ctrl + f 查找 libs
在 css 最后一行添加

artitalk: /libs/artitalk/artitalk.min.css

在 js 最后一行添加

artitalk: /libs/artitalk/artitalk.min.js

找到主题目录下 /layout/_partial/head.ejs，在头部引入 css

<link rel="stylesheet" type="text/css" href="<%- theme.jsDelivr.url %><%- url_for(theme.libs.css.artitalk) %>">

在主题目录下 /layout/ 目录新建一个 artitalk.ejs 文件。

<%- partial('_partial/bg-cover') %>

<style ype="text/css">

#pubShuo {

  margin-right: 5px;
}

#operare_artitalk .shuoshuo_input_log {
    outline-style: none;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 8px 16px;
    font-size: 12px;
    background-color: transparent;

    color: #0bb7fbd6;
    width: 70%;
    height: 28px;
    margin-left: 10px;
}

#artitalk_main {

  margin-top: 5px ;
  margin-left: 5%;
  margin-right: 5%;

}

#lazy{
  margin-top: 40px;
}

</style>


<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.artitalk) %>"></script>

<article id="articles11" class="container  chip-container">
  <div class="row ">

      <div class=" card">
        <div class="card-content" >
          <div class="tag-title center-align">
                <i class="fas fa-pen-alt"></i> 说说
           </div>
          <div id="artitalk_main"></div>
        </div>  
      </div>

  </div>
</article>
<script>
  new Artitalk({
        appId: "<%=  theme.artitalk.appId  %>",
        appKey: "<%=  theme.artitalk.appKey  %>",
      <% if (theme.artitalk.serverURL) { %>
          serverURL: "<%=  theme.artitalk.serverURL  %>",
      <% } %>
      <% if (theme.artitalk.lang) { %>
          lang: "<%=  theme.artitalk.lang  %>",
      <% } %>
      <% if (theme.artitalk.pageSize) { %>
          pageSize: "<%=  theme.artitalk.pageSize  %>",
      <% } %>
      <% if (theme.artitalk.shuoPla) { %>
          shuoPla: "<%=  theme.artitalk.shuoPla  %>",
      <% } %>
      <% if (theme.artitalk.avatarPla) { %>
          avatarPla: "<%=  theme.artitalk.avatarPla  %>",
      <% } %>
      <% if (theme.artitalk.motion == 0) { %>
          motion: 0,
      <% } else { %>
          motion: 1,
      <% }  %>
      <% if (theme.artitalk.bgImg) { %>
          bgImg: "<%=  theme.artitalk.bgImg  %>",
      <% } %>
      <% if (theme.artitalk.color1) { %>
          color1: "<%=  theme.artitalk.color1  %>",
      <% } %>
      <% if (theme.artitalk.color2) { %>
          color2: "<%=  theme.artitalk.color2  %>",
      <% } %>
      <% if (theme.artitalk.color3) { %>
          color3: "<%=  theme.artitalk.color3  %>",
      <% } %>
      <% if (theme.artitalk.cssUrl) { %>
          cssUrl: "<%=  theme.artitalk.cssUrl  %>",
      <% } %>
          atEmoji: {
              baiyan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/baiyan.png",
              bishi: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bishi.png",
              bizui: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/bizui.png",
              chan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/chan.png",
              daku: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/daku.png",
              dalao: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dalao.png",
              dalian: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dalian.png",
              dianzan: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/dianzan.png",
              doge: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/doge.png",
              facai: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/facai.png",
              fadai: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/fadai.png",
              fanu: "https://cdn.jsdelivr.net/gh/Artitalk/Artitalk-emoji/fanu.png",
           },
     })
</script>

在主题 _config.yml 添加配置如下：

artitalk: 
  appId: 你的AppId
  appKey: 你的AppKwy
  serverURL: http://xxx.zhangxiaocai.cn  #leancloud绑定的安全域名，使用国际版的话不需要填写
  lang: zh # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
  pageSize: 10  #每页说说的显示数量
  # shuoPla: #在编辑说说的输入框中的占位符
  avatarPla: https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/medias/avatar.jpg #自定义头像url的输入框的占位符
  # motion: #加载动画的开关，1为开，0为关，默认为开
  # bgImg: #说说输入框背景图片url
  # color1: #说说背景颜色1&按钮颜色1
  # color2: #说说背景颜色2&按钮颜色2
  # color3: #说说字体颜色

找到主题目录下 layout/_partial/navigation.ejs 文件

menuMap.set("ArtiTalk", "说说");

色彩美化后

artitalk: 
  appId: 你的AppId
  appKey: 你的AppKwy
  serverURL: http://xxx.zhangxiaocai.cn  #leancloud绑定的安全域名，使用国际版的话不需要填写
  lang: zh # 语言设置，zh为汉语，en为英语，es为西班牙语。默认为汉语
  pageSize: 10  #每页说说的显示数量
  # shuoPla: #在编辑说说的输入框中的占位符
  avatarPla: https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/medias/avatar.jpg #自定义头像url的输入框的占位符
  # motion: #加载动画的开关，1为开，0为关，默认为开
  # bgImg: #说说输入框背景图片url
  color1: linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色1&按钮颜色1
  color2:  linear-gradient(45deg, rgb(109, 208, 242) 15%, rgb(245, 154, 190) 85%)  #说说背景颜色2&按钮颜色2
  color3: black #说说字体颜色

如果使用国内版本 serverURL 填写你 appKey 下的那个链接，然后把电话验证登陆取消，邮件验证绑定即可，不过加载挺慢的，~~~hhh~~~

总结

$H e x o$ 系列 $m a t e r y$ 拥有 $s a k u r a$ 博客的对话机器人然后加几个酷炫的页面，持续折腾 $i n g$ ，等期末考试考完再看看网上的教程学习一下，目前博客暂时就这样 $e m m m$
在这里插入图片描述

幸愉聊信奥

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
1
评论
Hexo系列matery主题踩坑优化记录

文章目录下载配置添加 ArtiTalk 说说界面总结下载下载主题git clone https://github.com/blinkfox/hexo-theme-matery.git配置1.更换主题，在博客根目录下_config.yml 找到theme替换成下载文件的名字即可。页面文章数最好是3的倍数，样式好看一点。使用命令创建页面，放在博客下的 sourcessourcessources 文件夹下，编辑 .md.md.md 文件。我们需要添加 categoriescategoriesca
复制链接

扫一扫