226YZY-BLOG-修改记录(第二弹)
前言
注意现在我现在使用的主题是Butterfly，本篇是对matery主题的修改
这是我博客修改记录的第二篇，本文中涉及了一些大佬的方案，并结合自己的需求进行了一系列的修改，本着尊重他人劳动成果的原则我对相对应的内容转载时保留了我查考的直接出处。希望如果有小伙伴，从我这转载相关内容也请保留出处。希望以下内容对您有所帮助。
1.文章卡片腰封
参考来源
matery魔改日记 | FanHeart (hesifan.top)
在主题目录下找到layout/index.ejs
ctrl+f搜索所有文章卡片
以所有文章卡片为标志，到末尾倒着来看第一个</article>为结尾，这一块
替换以下代码
1 | <!-- 所有文章卡片 --> <div class="row article-row"> <article id="articles" class="container articles"> <% page.posts.forEach(post => { %> <div class="article col s12 m6 l4" data-aos="zoom-in"> <div class="card"> <a href="<%- url_for(post.path) %>"> <div class="card-image card-image-V"> <div class="box-content"> <h3 class="title">阅读全文</h3> <span class="post" style="width: 180px"><%= post.title %></span> </div> <% if (post.img) { %> <img src="<%- url_for(post.img) %>" class="responsive-img" alt="<%= post.title %>"> <% } else { %> <% var featureimg = '/medias/featureimages/0.jpg'; var featureImages = theme.featureImages; if (!featureImages || featureImages.length == 0) { return featureimg; } featureimg = featureImages[Math.abs(hashCode(post.title) % featureImages.length)] %> <img src="<%- theme.jsDelivr.url %><%- url_for(featureimg) %>" class="responsive-img" alt="<%= post.title %>"> <% } %> <span class="card-title title-V"><%= post.title %></span> </div> </a> <div class="card-content article-content"> <div class="summary block-with-text"> <% if (post.summary && post.summary.length > 0) { %> <%- post.summary %> <% } else { %> <%- strip_html(post.content).substring(0, 120) %> <% } %> </div> <div class="publish-info"> <span class="publish-date"> <i class="far fa-clock fa-fw icon-date"></i><%= date(post.date, config.date_format) %> </span> <span class="publish-author"> <% if (post.categories && post.categories.length > 0) { %> <i class="fas fa-bookmark fa-fw icon-category"></i> <% post.categories.forEach(category => { %> <a href="<%- url_for(category.path) %>" class="post-category"> <%- category.name %> </a> <% }); %> <% } else if (post.author && post.author.length > 0) { %> <i class="fas fa-user fa-fw"></i> <%- post.author %> <% } else { %> <i class="fas fa-user fa-fw"></i> <%- config.author %> <% } %> </span> </div> </div> <% if(post.tags && post.tags.length > 0) { %> <div class="card-action article-tags"> <% post.tags.forEach(tag => { %> <a href="<%- url_for(tag.path) %>"> <span class="chip bg-color"><%= tag.name %></span> </a> <% }); %> </div> <% } %> </div> </div> <% }); %> </div> </article> |
然后同样在主题目录下找到source/css/matery.css
加入以下代码
1 | /*文章列表卡片各样式*/ #articles { margin-top: 10px; margin-bottom: 10px; } article a { margin-right: 0 ; color: #525f7f; text-transform: none ; } article a:hover { font-weight: bold; color: #116022; text-decoration: underline; } .articles .row { margin-left: 0; margin-right: 0; } article .card { border-radius: 8px; overflow: hidden; } article .card-image { font-family: Georgia, 'Noto Serif SC', Helvetica, Arial, Menlo, Monaco, monospace, serif; background-color: #222; border-radius: 8px; overflow: hidden; position: relative; z-index: 1; transition: all 0.5s; } article .card-image:hover { box-shadow: 3px 3px 5px #999; } article .card-image:before, article .card-image:after { content: ''; background: radial-gradient(circle at 23% 70%, rgba(255, 255, 255, 0.7), #fff 30%); width: 150%; height: 150%; opacity: 0; transform: rotate(45deg); position: absolute; /*top:-10.5%;*/ right: -150%; z-index: 1; transition: all 0.35s ease; } article .card-image:hover:before { opacity: 1; right: -85%; } article .card-image:hover:after { opacity: 1; top: -42%; } article .card-image img { width: 100%; transition: all 0.5s ease; height: 220px; border-radius: 0.3rem; opacity: 0.7; } article .card-image .x img { width: 100%; transition: all 0.5s ease; height: 230px; border-radius: 0.3rem; opacity: 0.7; } article .card-image:hover img { transform: scale(1.2); } article .card-image .box-content { text-align: right; transform: translateY(-50%); position: absolute; top: 50%; right: -100%; z-index: 2; transition: all 0.5s; } article .card-image:hover .box-content { right: 5%; } article .card-image:hover .box-content h3::before { content: 'X'; } article .card-image:hover .box-content h3::before { font-size: 0.9rem ; vertical-align: bottom; margin-right: 0.5rem; padding: 2px; border-radius: 5px; background: hsl(0, 0%, 20%); color: hsl(0, 0%, 100%); } .card-image:hover .title-V { display: none; } article .card-image-V:before, article .card-image-V:after { top: -10.5%; } |
其它要修改的地方
就找到类似的结构
以归档页面为例
文件位置在主题目录下layout/archive.ejs
在以下代码的后面
1 | article class="cd-timeline-content" data-aos="fade-up"> |
插入以下代码(至于CSS代码前面已经处理过了)
1 | <div class="box-content"> <h3 class="title">阅读全文</h3> <span class="post" style="width: 180px"><%= post.title %></span> </div> |
在主题目录下其它要修改添加的地方还有
layout/_partial/prev-next.ejs
(这个比较特殊，有四处要添加,<%= post.title %>要对应修改)
具体可以找到<div class="card-image">看后面的
<% if (***.img) { %>这个*的位置是啥，然后将上面的post修改成对应的
其它的
layout/category.ejs(前面的代码原样插入即可)
layout/index.ejs(前面的代码原样插入即可)
layout/tag.ejs(前面的代码原样插入即可)
2.将原主题的’’我的梦想’’替换成今日诗词
在主题目录下找到layout/_widget/dream.ejs
将<%= theme.dream.text %>替换成<%- '<span id="jinrishici-sentence">正在加载今日诗词....</span>' %>
然后末尾加入
1 | <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script> |
3.插入浏览器标签
在主题目录下找到layout/layout.ejs
加入以下代码
1 | <script type="text/javascript"> |
4.加入看板娘
1 | <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> |
5.对于HEXO SEO其他博客解决方案中
其它博客中的代码缩进有问题，导致hexo d和hexo g命令无法正常运行
正确缩进如下
1 | # 自动生成sitemap |
6.Valine显示QQ邮箱的头像
解决该问题参考了该博客文章
Valine-实现QQ邮箱识别生成头像地址（完美解决头像问题）_cungudafa的博客-CSDN博客
虽然主题不一样大解决方法基本一致
我用的matery主题的Valine是1.3.10版
如果是1.4.4版的话参考上面大佬的博客，两者之间操作有不同需要注意
以下我就按Valine1.3.10版的matery主题操作
在主题目录下找到source/libs/valine/Valine.min.js
ctrl+f搜索
1 | m.cdn+a(e.get("mail") |
源代码经过压缩没有换行啥的最好换行一下
然后将
1 | (m.cdn + a(e.get("mail")) + m.params) |
修改为
1 | (qq_img) |
再在这一句var的前面加上
1 | var qq_img=m.cdn+a(e.get("mail"))+m.params;//默认gravator头像接口 |
7.添加加载页面
这里就转载大佬的方案了
原文https://notes.zhangxiaocai.cn/posts/7496029d.html
这位大佬说如果有爆红没关系
不过我是没有爆红的
1、在 /layout/_partial/ 目录新建一个 loading-pages.ejs 内容如下：
1 | <style type="text/css" lang="css"> |
2、在主题的 layout 目录找到 layout.ejs 文件
在 <body> 附近添加内容后如下：
1 | ```ejs |
对于上面的修改我的注释详解如下
首先找到<body>上面一点的<% if (theme.background.enable) { %><%- partial('_partial/background') %>改成<% if (theme.loadingPages.enable) { %>
<%- partial('_partial/loading-pages') %>
然后就是在<body>和<body>下面的<%- partial('_partial/header') %>
之间插入
1 | ```ejs |
3、添加开关配置
这一点大佬没具体说在哪配置，所以我是在主题目录下的_config.yml文件下添加
1 | loadingPages: |
7.添加自己DIY的页面
由于我之前用自己所学做了一个简单的导航页面，想着把这个页面放进我的博客里（就是这个→YZY的搜索界面 (226yzy.com)），因此我查找了添加自己页面的方法。这里参考了
Hexo+Github 博客搭建之 Matery 主题个性化修改篇（二） | 过客～励む (yafine-blog.cn)的有关内容
具体就是，比如说以我的博客为例，我要在我的顶部菜单的“实验室”这一分菜单的下面添加我的导航页面的指引
那么就要像在博客根目录下的source下面建立一个文件夹，为了方便描述以及示例，该文件夹的名字为Mysearch。
我的修改如下，按你自己的要求修改（但是格式基本如此）
另外这里顺便一个贴我觉得还不错的查找icon的网站链接Font Awesome 中文网 – | 字体图标
1 | 实验室: |
然后在主题根目录下的_config.yml文件，ctrl+F查找skip_render
在下面如下添加
1 | skip_render: |
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 星空下的YZY！
微信- 支付宝
相关推荐
评论
