文章目录

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

下载

下载主题

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

配置

1.更换主题,在博客根目录下_config.yml 找到theme替换成下载文件的名字即可。

页面文章数最好是3的倍数,样式好看一点。
使用命令创建页面,放在博客下的 sourcessourcessources 文件夹下,编辑 .md.md.md 文件。我们需要添加 categoriescategoriescategories 页,tagstagstags 页,aboutaboutabout 页,contactcontactcontact 页以及 friendsfriendsfriends 页

hexo new page "页面名称"

1. friendsfriendsfriends 页面为例子,编辑文件下的 .md.md.md 文件

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

sourcessourcessources文件夹下创建 _datadatadata 文件夹,在该文件夹下创建文件 friends.jsonfriends.jsonfriends.json

[{"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": "前去加速"
}]

效果图:

解决站内搜索异常问题,主题 sourcessourcessources 文件下完整的 search.jssearch.jssearch.js 文件

var searchFunc = function (path, search_id, content_id) {'use strict';$.ajax({url: path,dataType: "xml",success: function (xmlResponse) {// get the contents from search datavar 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 searchingdatas.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 contentsif (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 resultsif (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 charactersvar 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 keywordskeywords.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;
} */



请自行查看参考文档

Hexo系列matery主题踩坑优化记录相关推荐

  1. 基于Hexo的matery主题搭建博客并深度优化

    本文转自 悟尘纪,获取更新内容可查看原文: https://www.lixl.cn/2019/092856736.html 对于有一定技术背景的同学,自己动手搭建博客网站是一个很不错的选择.选择喜欢的 ...

  2. 搭建 Hexo 个人博客和 Matery 主题的配置优化

    文章目录 Hexo 的安装 安装 Git 安装 Node.js 升级 Node.js 版本 安装 Hexo 升级 Hexo 版本 初始化 Hexo 启动 Hexo 服务 Hexo 部署到 GitHub ...

  3. storm mysql spout_storm kafkaSpout 踩坑问题记录! offset问题!

    整合kafka和storm例子网上很多,自行查找 问题描述: kafka是之前早就搭建好的,新建的storm集群要消费kafka的主题,由于kafka中已经记录了很多消息,storm消费时从最开始消费 ...

  4. 使用RKNN部署CRNN模型踩坑优化历程

    序言 前段时间使用RKNN部署一个文字识别模型,因为文字识别模型用的是目前最普遍使用的CRNN模型,结构也相对简单:卷积+LSTM+全连接,都是比较元老级别的算子,本来已经部署的过程会很顺利,结果发现 ...

  5. Hexo博客主题安装和优化(一)

    当你看到这篇文章的时候,想必你已经搭建好了属于你的Hexo博客并且已经部署到了Github上面,如果还没有的话呢,请移步去Hexo+github搭建博客! 因为默认的Hexo主题实在太难看了,所以我们 ...

  6. MySQL单表数据量过千万,采坑优化记录,完美解决方案

    MySQL单表数据量过千万,采坑优化记录,完美解决方案 参考文章: (1)MySQL单表数据量过千万,采坑优化记录,完美解决方案 (2)https://www.cnblogs.com/ExMan/p/ ...

  7. Jetson Nano配置踩坑全记录

    Jetson Nano配置踩坑全记录 Jetson Nano相关参数:JetPack 4.6,cuda 10.2, SD卡内存:512G 一.Jetson Nano系统镜像烧录 在Nvidia官网下载 ...

  8. vue在微信里面的兼容问题_详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分 ...

  9. 容器化部署(k8s)任务调度平台xxl-job(部署过程及踩坑问题记录)

    文章预览: 1 部署过程(下方ip代表服务器的ip哈) 1.1 制作服务打包镜像DockerFile 1.2 制作执行脚本run.sh 1.3 jar包上上传 1.4 kuboard创建----配置信 ...

最新文章

  1. 面试再被问到 ConcurrentHashMap,把这篇文章甩给他!
  2. 机器学习基础:理解梯度下降本质「附Python代码」
  3. 自由是有代价的:聊聊这几年尝试的道路
  4. UART接口与COM口的区别
  5. python3 字符串大小写转换
  6. PHP $_REQUEST获取表单提交的代码
  7. 推荐系统笔记:基于非负矩阵分解的协同过滤
  8. linux内核杂记(5)-进程终结
  9. python信用卡违约预测分析_Python数据分析及可视化实例之银行信用卡违约预测(24)...
  10. 厦门大学计算机科学与技术学院考研分数线,2020年厦门大学计算机科学与技术考研经验分享...
  11. 电脑发短信_让电脑自动给老婆发短信?!这个懒到极致的大神,我是服了...
  12. spark-dataframe与rdd的区别
  13. LOJ 6278 数列分块入门2
  14. Bootstrap框架
  15. 声势浩大发展云服务的金蝶,如今“破茧”了吗
  16. 纵向数据中抑郁检测与预测的深度多任务学习
  17. C#大恒相机采集图片时图片上下对称折叠了
  18. vue出生日期转年龄
  19. 论文笔记---Topological acoustics
  20. 刘润商业洞察力学习笔记1

热门文章

  1. Linux工作中必知必会的命令总结
  2. 取名算法之用JAVA实现姓名测试
  3. 欠压继电器与过电压继电器
  4. Vim编辑器Windows配置(一)
  5. 【腾讯QQ官方正式版下载】基于Internet的即时通信(IM)软件
  6. 给文字上加中划线_小小招式让你给文字添加上划线
  7. 6-23 sdust-Java-可实现多种排序的Book类 (20 分)
  8. 关于Winxp U盘无法复制磁盘写保护解决办法
  9. 将中文字符串转为拼音
  10. 商品数据结构之什么是SPU和SKU?