matery魔改日记


使用matery已经很久了,也做了不少改动,虽然不像隔壁butterfly主题的魔改大佬那样改头换面式的改动,但横向对比matery主题的使用者来说我这也可以算改动比较大的了,就勉勉强强叫做魔改日记吧。写下本文一为留下记录以防日后不慎删库可以重建,二为分享一些修改的经验让后来者可以少走一些弯路。

梦开始的地方

最开始对matery进行基础的修改添加内容记录在matery主题优化一文中,现在重新回顾其中一些修改是没有必要的,甚至说是反向修改,当然这也仅仅是我的个人观点,是否采纳都在于你自己的看法。

比如:

2.12看板娘,一个漂亮的二次元看板娘谁不想要呢,但是添加看板娘也存在很多问题,由于看板娘需要加载的内容很多,往往会极大程度拖慢网站的加载速度,印象中还会影响不算子的统计功能,另外在首页也会占用很大的面积,缺点很多,是否添加就看自己权衡利弊吧。

2.15markdown页面实际上写文章的话我更推荐使用Typora软件书写。

2.18 Hexo 博客订阅文章通知功能,实际上很鸡肋谁会喜欢已经网站就弹出来一个弹窗让你订阅他呢,就我而言我就很讨厌突然弹出来一个东西让我订阅,指望通过订阅来持续关注你的站点几乎是不可能的。

另外不建议弄的功能还有客服功能,原因就是延时太大了,大多时候访客已经离开了你才收到他发的消息就很拉胯了。

细节修改

进行修改前强烈建议备份主题文件夹有备无患

删除文章封面图

因为需要适配pc手机不同分辨率的封面导致配图困难就删了封面图

文章卡片腰封

这个东西也是我在友链博主那里发现的十分有趣于是就引入了。

将index.ejs中的对应部分替换为如下部分

 <!-- 所有文章卡片 -->

    <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>

在matery.css中加入以下代码



/*文章列表卡片各样式*/
#articles {
  margin-top: 10px;
  margin-bottom: 10px;
}

article a {
  margin-right: 0 !important;
  color: #525f7f;
  text-transform: none !important;
}

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 !important;
  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%;
}

后面优化的时候发现其他地方可以优化,其他地方没有加这个腰封,其余地方也可以按照这个模式添加,例如分类标签归档上下篇处的文章卡片,再添加一个深色模式滤镜。

优化友链显示对齐

发现很多使用matery的博主都会发现由于不同友链的名称标语的长度不一会导致友链卡片大小不一参差不齐,强迫症表示很难受,于是就决定处理一下在matery.css加入如下代码就可以解决。加入无论文字有多长都只会显示一行长度多余不显示,为整齐就只能迫害一下友链博主了。

/* 友链对齐*/
.frind-ship .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

增加全屏按钮

引入js在layout.ejs文件中写入如下代码:

    <script>
      function enterfullscreen() {
        //进入全屏

        var docElm = document.documentElement
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen()
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen()
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen()
        }
        //IE11
        else if (elem.msRequestFullscreen) {
          elem.msRequestFullscreen()
        }
        $('#fullscreen').removeClass('fa-expand-arrows-alt').addClass('fa-desktop')
      }

      function exitfullscreen() {
        //退出全屏
        // $("#fullscreen").html("切换全屏");

        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        $('#fullscreen').removeClass('fa-desktop').addClass('fa-expand-arrows-alt')
      }

      let b = false
      $('#fullscreen_li ').on('click', function () {
        b = !b
        b ? enterfullscreen() : exitfullscreen()
      })
    </script>

添加按钮在_partial文件夹下navigation.ejs文件中</ul>前加入如下代码:

  <li id="fullscreen_li" class="fullscreen nav-show">
    <a href="javascript:void(0);" class="modal-trigger waves-effect waves-light">
      <i id="fullscreen" class="fa fa-expand-arrows-alt" title="全屏" style="zoom: 0.65;"></i>
    </a>
  </li>

在matery.css中开头加入如下代码以实现手机端不显示全屏按钮

/*全局基础样式*/
/*小屏幕下(手机类)的样式*/
@media only screen and (max-width: 601px) {
  .container {
    width: 95%;
  }
  .fullscreen {
    display: none;
  }

}

整合分类标签页面

我觉得这两个页面很相似可以整合到一起,我将这两个页面以及文章统计图整合为一个页面文章统计建议进行修改前对主题文件夹备份以防万一。

新建statistics.ejs文件写入如下内容

<%- partial('_partial/bg-cover') %> 
<main class="content">
  <%- partial('_widget/tag-cloud') %> <% if (site.tags && site.tags.length > 0) { %>
  <br />
  <br />
  <%- partial('_widget/category-cloud') %> <% if (site.categories && site.categories.length > 0) { %> <%- partial('_widget/tag-wordcloud') %> <% } %> <%- partial('_widget/category-radar') %> <% } %>
  <div class="container">
    <div class="card">
      <div class="card-content"><%- partial('_widget/post-charts') %></div>
    </div>
  </div>
</main>

并在关于页面中删除引入统计图的标签<%- partial('_widget/post-charts') %>

在主题yam文件里把导航里的分类和标签删除替换为

文章统计:
   url: /statistics
   icon: fa fa-layer-group

关于页面增加botui机器人对话

这个功能演示在[关于页面底部][14]有一个对话框可以进行对话。

添加步骤

在你想加入的地方写入如下内容并修改相关信息,下载https://cdn.jsdelivr.net/gh/brqs/brqs.github.io@master/js/botui.js并修改这个js改成你自己的对话然后替换你自己的地址。

<link href="https://cdn.bootcss.com/botui/0.3.9/botui-theme-default.css" rel="stylesheet">
                <link href="https://cdn.bootcss.com/botui/0.3.9/botui.min.css" rel="stylesheet">
                <style>
                #myTalk{
                margin-top:30px}
                </style>
                <div id="myTalk" class="container other-skills chip-container" data-aos="zoom-in-up">
                    <div class="entry-content">
                        <div id="hello-xiaocai" class="popcontainer" style="min-height:300px;padding:2px 6px 4px;background-color:#24c8ff;border-radius:10px">
                            <center>
                                <h4>&nbsp;<ruby>不染轻裳 &nbsp;<rp></rp></ruby>对话中...</h4><p></p>
                            </center>
                            <bot-ui></bot-ui>
                        </div>
                    </div>
                </div>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/brqs/brqs.github.io@master/js/botui.js">
                </script>
                <script>
                bot_ui_ini()
                </script>

artitalk说说页面

artitalk说说页面这个可以参考我的好兄弟张小菜苔的教程

站点访问统计页面

站点访问统计页面可以参考我之前的教程

日志页面

日志页面可以参考教程

归档页面

归档页面可以参考教程

友链朋友圈页面

强烈推荐大家都弄一个友链朋友圈实时了解友链大佬们更新文章,同样可以参考我之前的这篇文章

深色模式

深色模式可以参考教程

留言板增加一言

留言板增加网易云热评,诗词(动态刷新)这个可以参考我的好兄弟itsneko的教程


文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

友尽游戏:Pummel Party
友尽游戏:Pummel Party 友尽游戏:Pummel Party
序言偶然间发现这个友尽游戏猛然想起来我似乎还有一些朋友不如喊上他们一起来体验一波,到目前为止已经“愉快的进行了两局游戏”还没发生大规模友尽事件。这篇文章就打算简单介绍一下这款游戏(略带安利向),我的游戏体验以及感受和好兄弟间友尽瞬间。在进行
2021-04-25
下一篇 

阅读全文

hexo-matery添加深色模式
hexo-matery添加深色模式 hexo-matery添加深色模式
其实我的网站添加深色模式已经很久了,上次看到群里有小伙伴问我怎么做的,就决定写下来帮助一些想要添加的群友。 简述原理简要说一下原理利用js给全局HTML的body标签增加一个class为DarkMode的属性控制开启深色模式,再通过这个
2021-04-20
  目录