在页脚加上 GitHub badge
在footer.ejs文件中添加以下内容(在适当的位置添加):
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
<span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://github.com/" target="_blank" title="静态网页托管于 GitHub Pages 和 Coding Pages 和 Gitee Pages">
<span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">GitHub & Coding & Gitee</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://cloud.tencent.com/" target="_blank" title="腾讯云提供域名相关服务">
<span class="badge-subject">DNS</span><span class="badge-value bg-blueviolet">Tencent</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://www.jsdelivr.com/" target="_blank" title="jsDelivr 提供 CDN 加速服务">
<span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://blinkfox.github.io/" target="_blank" title="站点使用 Matery主题">
<span class="badge-subject">Theme</span><span class="badge-value bg-blue">Matery</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" title="本站点采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可">
<span class="badge-subject"><i class="fa fa-copyright"></i></span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span></a>
</div>
<div class="github-badge">
<a style="color: #fff" rel="license" href="https://996.icu/" target="_blank" title="支持 996.ICU">
<span class="badge-subject">Link</span><span class="badge-value bg-red">996.ICU</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">UV</span><span class="badge-value bg-orange" id="busuanzi_value_site_uv"></span>
</div>
<div class="github-badge">
<span class="badge-subject">PV</span><span class="badge-value bg-brightgreen" id="busuanzi_value_site_pv"></span>
</div>
<div class="github-badge">
<span class="badge-subject">WordCount</span><span class="badge-value bg-blueviolet"><%= totalcount(site) %></span>
</div>
</div>
然后添加css样式,自己选择代码的添加位置,可以直接放在footer.ejs文件中,也可以放在my.css文件中,代码如下:
<style>
.github-badge {
display:inline-block;
border-radius:4px;
text-shadow:none;
font-size:13px;
color:#fff;
line-height:15px;
background-color:#ABBAC3;
margin-bottom:5px;
}
.github-badge .badge-subject {
display:inline-block;
background-color:#4D4D4D;
padding:4px 4px 4px 6px;
border-top-left-radius:4px;
border-bottom-left-radius:4px;
}
.github-badge .badge-value {
display:inline-block;
padding:4px 6px 4px 4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
}
.github-badge .bg-brightgreen {
background-color:#4DC820 !important;
}
.github-badge .bg-orange {
background-color:#FFA500 !important;
}
.github-badge .bg-yellow {
background-color:#D8B024 !important;
}
.github-badge .bg-blueviolet {
background-color:#8833D7 !important;
}
.github-badge .bg-pink {
background-color:#F26BAE !important;
}
.github-badge .bg-red {
background-color:#e05d44 !important;
}
.github-badge .bg-blue {
background-color:#007EC6 !important;
}
.github-badge .bg-lightgrey {
background-color:#9F9F9F !important;
}
.github-badge .bg-grey, .github-badge .bg-gray {
background-color:#555 !important;
}
.github-badge .bg-lightgrey, .github-badge .bg-lightgray {
background-color:#9f9f9f !important;
}
</style>
然后进行本地调试,查看效果即可,本地调试好后,在进行部署的相关操作。
添加加载动画
在 /layout/_partial/ 目录新建一个 loading-pages.ejs 内容如下:
<style type="text/css" lang="css">
#loading-container{
position: fixed;
top: 0;
left: 0;
min-height: 100vh;
width: 100vw;
z-index: 9999;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #FFF;
text-align: center;
/* loader页面消失采用渐隐的方式*/
-webkit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
.loading-image{
width: 120px;
height: 50px;
transform: translate(-50%);
}
.loading-image div:nth-child(2) {
-webkit-animation: pacman-balls 1s linear 0s infinite;
animation: pacman-balls 1s linear 0s infinite
}
.loading-image div:nth-child(3) {
-webkit-animation: pacman-balls 1s linear .33s infinite;
animation: pacman-balls 1s linear .33s infinite
}
.loading-image div:nth-child(4) {
-webkit-animation: pacman-balls 1s linear .66s infinite;
animation: pacman-balls 1s linear .66s infinite
}
.loading-image div:nth-child(5) {
-webkit-animation: pacman-balls 1s linear .99s infinite;
animation: pacman-balls 1s linear .99s infinite
}
.loading-image div:first-of-type {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_up .5s 0s infinite;
animation: rotate_pacman_half_up .5s 0s infinite;
}
.loading-image div:nth-child(2) {
width: 0;
height: 0;
border: 25px solid #49b1f5;
border-right-color: transparent;
border-radius: 25px;
-webkit-animation: rotate_pacman_half_down .5s 0s infinite;
animation: rotate_pacman_half_down .5s 0s infinite;
margin-top: -50px;
}
@-webkit-keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@keyframes rotate_pacman_half_up {0% {transform: rotate(270deg)}50% {transform: rotate(1turn)}to {transform: rotate(270deg)}}
@-webkit-keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@keyframes rotate_pacman_half_down {0% {transform: rotate(90deg)}50% {transform: rotate(0deg)}to {transform: rotate(90deg)}}
@-webkit-keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
@keyframes pacman-balls {75% {opacity: .7}to {transform: translate(-100px, -6.25px)}}
.loading-image div:nth-child(3),
.loading-image div:nth-child(4),
.loading-image div:nth-child(5),
.loading-image div:nth-child(6){
background-color: #49b1f5;
width: 15px;
height: 15px;
border-radius: 100%;
margin: 2px;
width: 10px;
height: 10px;
position: absolute;
transform: translateY(-6.25px);
top: 25px;
left: 100px;
}
.loading-text{
margin-bottom: 20vh;
text-align: center;
color: #2c3e50;
font-size: 2rem;
box-sizing: border-box;
padding: 0 10px;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
@media only screen and (max-width: 500px) {
.loading-text{
font-size: 1.5rem;
}
}
.fadeout {
opacity: 0;
filter: alpha(opacity=0);
}
/* logo出现动画 */
@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}
@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);}}
</style>
<script>
(function () {
const loaded = function(){
setTimeout(function(){
const loader = document.getElementById("loading-container");
loader.className="fadeout" ;//使用渐隐的方法淡出loading page
// document.getElementById("body-wrap").style.display="flex";
setTimeout(function(){
loader.style.display="none";
},2500);
},1000);//强制显示loading page 1s
};
loaded();
})()
</script>
然后在主题的 layout 目录找到 layout.ejs 文件
在
<body>
附近添加内容后如下:
<!DOCTYPE HTML>
<html lang="<%= config.language %>">
<%- partial('_partial/head') %>
<% if (theme.loadingPages.enable) { %>
<%- partial('_partial/loading-pages') %>
<% } %>
<body>
<% if (theme.loadingPages.enable) { %>
<div id="loading-container">
<p class="loading-text">嘘~ 正在从服务器偷取页面 . . . </p>
<div class="loading-image">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<% } %>
<%- partial('_partial/header') %>
...
然后到主题配置文件(_config.yml)添加开关配置
loadingPages:
enable: true
然后
hexo clean && hexo g && hexo s
即可看到效果。
添加导航页
更换网站字体
下载字体
先去字体网站下载自己喜欢的字体。
引入字体
引入字体也很简单,在css 文件引入即可:
@font-face{
font-family: 'hl';
src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/hl.ttf');
}
@font-face{
font-family: 'ming';
src: url('https://cdn.jsdelivr.net/gh/small-rose/small-rose.github.io/box/font/GuDianMingChaoTi.otf');
}
针对元素使用:
/* 针对全局的使用 */
body{
font-family: 'YaHei';
}
/* 针对元素的class属性里包含 mytitle 的使用 */
.mytitle {
font-family: 'ming' !important;
}
/* 针对元素的id属性等于 main-content 的使用 */
#main-content{
font-family: '仿宋',"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",'sans-serif';
}
.diyFont{
font-family: 'hl';
}
然后
hexo cl && hexo g && hexo s
即可看到效果
Matery 主题添加 ArtiTalk 说说模块
请参考我朋友的这篇文章。
添加音乐页面
请参考我朋友的文章
添加小视频页面
新建md文件,打开Git bash,输入:
hexo new page "xsp"
然后添加以下内容:
---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
然后到主题下的layout文件夹下新建xsp.ejs文件,添加以下内容:
<%- partial('_partial/bg-cover') %>
<!-- 视频模块 -->
<div class="biye">
<p>没有人可以让我回头,唯有铠甲勇士</p>
<div style="position: relative; padding: 30% 45%;">
<iframe style="
position: absolute;
width: 100%;
height: 100%;
left: 0; top: 0;"
src="//player.bilibili.com/player.html?aid=415502163&bvid=BV16V41187CS&cid=264102761&page=1&high_quality=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true">
</iframe>
</div>
</div>
</main>
然后你自己看放几个视频,按照复制即可。替换bilibili链接即可观看。自己想新建其他页面可参考这个教程。
添加朋友圈
可以看我朋友的这篇[文章](https://hesifan.top/posts/21326.html
Matery主题新手常见问题
可以看我朋友的这篇文章