下载
下载主题
git clone https://github.com/blinkfox/hexo-theme-matery.git
配置
1.更换主题,在博客根目录下_config.yml 找到theme替换成下载文件的名字即可。
页面文章数最好是3的倍数,样式好看一点。
使用命令创建页面,放在博客下的
s
o
u
r
c
e
s
sources
sources 文件夹下,编辑
.
m
d
.md
.md 文件。我们需要添加
c
a
t
e
g
o
r
i
e
s
categories
categories 页,
t
a
g
s
tags
tags 页,
a
b
o
u
t
about
about 页,
c
o
n
t
a
c
t
contact
contact 页以及
f
r
i
e
n
d
s
friends
friends 页
hexo new page "页面名称"
1. f r i e n d s friends friends 页面为例子,编辑文件下的 . m d .md .md 文件
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
s o u r c e s sources sources文件夹下创建 _ d a t a data data 文件夹,在该文件夹下创建文件 f r i e n d s . j s o n friends.json friends.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": "前去加速"
}]
效果图:
解决站内搜索异常问题,主题
s
o
u
r
c
e
s
sources
sources 文件下完整的
s
e
a
r
c
h
.
j
s
search.js
search.js 文件
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
leancloud
leancloud网址:https://leancloud.app/
创建用户,就是发布说说的用户,建议使用国际版。
在对应 img
属性下添加你发布说说的 url头像链接
在主题目录 /source/libs
目录新建一个文件夹 artitalk
。
找到刚才下载
A
r
t
i
t
a
l
k
Artitalk
Artitalk
目录,进入 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
Hexo
Hexo 系列
m
a
t
e
r
y
matery
matery 拥有
s
a
k
u
r
a
sakura
sakura 博客的对话机器人然后加几个酷炫的页面,持续折腾
i
n
g
ing
ing,等期末考试考完再看看网上的教程学习一下,目前博客暂时就这样
e
m
m
m
emmm
emmm