笔记

发布日期: 2019-02-26

阅读次数:

《Hexo的matery主题魔改折腾笔记》

魔改记录1. 修改首页bg-cover删除颜色渐变效果并增加自定义背景。

修改具体属性将主题目录下的layout_partial文件夹内的index-cover.ejs的
<div class="carousel-item red white-text bg-cover about-cover">
修改为
<div class="carousel-item white-text bg-cover about-cover">
删除一个red 属性无默认图片就会显示为网页背景
删除颜色渐变的bg-cover并且自定义网页背景主题目录\source\css\matery.css
修改body属性

body {
    background-color: #eaeaea;
    margin: 0;
    color: #34495e;
修改为
body {
    background-image: 自定义地址
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
    background-size: cover;
    margin:0 auto;
注释掉的属性
    @-webkit-keyframes rainbow
}

魔改记录2. 修改文章背景图为卡片背景图

修改后文章标题位置也会变化，位置不好调整删除了标题所以写文章的时候正文也要写一个标题。
layout_partial\post-cover.ejs
注释

修改文章背景为卡片图背景
在matery\source\css\matery.css里添加属性

.bg-covers {
    position: fixed;
    display: flex;
    align-items: center;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-position: center center;
    background-size: 100%;
    transform: translate3d(0px, 0px, 0px);
    width:210vh; 根据浏览器调整
    height:100vh;
}

卡片背景
.post-cover {
    height: 40vh !important;
}
修改为
.post-cover {
    height: 100vh !important;
}

调整卡片位置
在\source\css\matery.css
artDetail .card里增加一个top属性
top:6vh;

调整手机端显示位置比例
在\source\css\my.css
加入
@media only screen and (max-width: 601px){
.bg-covers{
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
bottom: 0px;
}
}

文章底部卡片背景比例修复
article .card-image img修改为height: 100%;

魔改记录3. 修改首页卡片背景透明度

修改source\libs\materialize目录下的materialize.min.css
card的background-color:属性查找.card
把卡片默认背景#FFF改为rgba(255, 255, 255, .8)
card的action属性查找.card .card-action
background-color: inherit
修改为
background-color: rgba(255, 255, 255, .0)

魔改记录4. 修改卡片背景图上的标题为隐藏

因为修改css太麻烦索性不要这个卡片标题了不影响检索
直接在index.ejs注释掉

还有文章底部的卡片标题
\layout_partial\prev-next.ejs

一共四个相同属性都要注释掉
归档的白色背景去除
source\css\matery.css
注释掉.cd-timeline-content的background: #ffffff;
layout\archive.ejs
注释掉

魔改记录5. 修改文章全部跳转

因为主题暂时不支持pjax 所以文章跳转到新标签
在index.ejs里的a标签添加了一个target=”_blank”_blank属性
<a target="_blank" href="<%- url_for(post.path) %>">

魔改记录6. 在首页放一张动态图片

需要开启主题配置文件显示梦想语句
修改\layout_widget下的dream.ejs

<% if (theme.dream.showTitle) { %>
    <div class="title center-align">
        <i class="fa fa-lightbulb-o"></i>&nbsp;&nbsp;<%- theme.dream.title %>
    </div>
    <div style="width:250px; position:relative; margin:0 auto;"> #丢在标题下面 调整好位置
        <img src="#"> #改为自己的图片地址
    </div>
<% } %>

魔改记录7. 首页开启第二个按钮之后点击之后的颜色变化修改

source\libs\materialize目录下的materialize.min.css
修改.btn:focus,.btn-large:focus,.btn-small:focus,.btn-floating:focus属性内的
background-color:#1d7d74

魔改记录8. 修改首页轮播图标题位置阅读更多按钮位置调整

文章标题和根目录yml的subtitle属性一样
\source\css\matery.css
.bg-cover .title内增加一个top调整290px
按钮属性.carousel-post .cover-btns内增加一个top调整270px
在.bg-cover .description内增加
position: relative;top: 300px;
具体参数参考

.bg-cover .title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.85em;
    top: 270px;
    margin-bottom: 10px;
    position: relative;
}

.bg-cover .description {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.4em;
    color: #fff;
    position: relative;
    top: 270px;
}

魔改记录9. 修改首页轮播图片左右切换按钮颜色大小

index-cover.ejs内的

.carousel-control i {
        color: #ff88b8;
        font-size: 3rem;
    }

魔改记录10. 修改aplayer播放器背景以及播放按钮列表和选择颜色

找到APlayer.min.css内的
.aplayer内修改background:rgba(255, 136, 184, 0.2)属性调整颜色或者
增加图片属性 background-image: url(#); background-position:center;
播放器按钮颜色
.aplayer .aplayer-pic .aplayer-button path内的
{fill:#ff88b8}
.aplayer .aplayer-pic .aplayer-play内的
属性border:2px solid #ff88b8;
播放中颜色修改.aplayer .aplayer-list ol li.aplayer-list-light内属性
background:rgba(255, 136, 184, 0.5)改自己想要的颜色
还有鼠标悬浮效果颜色
.aplayer .aplayer-list ol li:hover内的
background:rgba(255, 136, 184, 0.8)

魔改记录11. 修改首页标题和轮播展示文章背景文字与按钮底色和样式

\source\css\matery.css
修改的主页和文字标题属性

.bg-cover .title {
    font-size: 3rem;
    font-weight: 100%;
    line-height: 1.85em;
    top: 270px;
    margin-bottom: 10px;
    position: relative;
    background-color: rgba(000, 000, 00, 0.4);
    border-radius: 15px 15px 0px 0px;
    margin: 0 auto;
}

修改主页和标题描述简介

.bg-cover .description {
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.4em;
    color: #fff;
    position: relative;
    top: 270px;
    background-color: rgba(000, 000, 00, 0.4);
    border-radius: 0px 0px 15px 15px;
}

按钮背景颜色
.cover-btns a内的background-color:;

魔改记录12. 修改图片背景下的文章目录底色

修改layout_partial\post-detail-toc.ejs

    .toc-widget .toc-title {
    margin: 35px 0 15px 0;
    padding-left: 17px;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
    background-color: rgba(255, 255, 255, 0.8);
    padding:10px 40px; 
    border-radius:10px;
}

.toc-widget ol {
    padding: 0;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.8);
    padding:10px 40px; 
    border-radius:10px;
}

魔改记录13. 修改1级2级3级4级5级6级标题为居中

\source\css\matery.css
修改属性h1 2 3 4 5 6每个添加属性text-align: center;

魔改记录14.修改代码高亮背景颜色

matery.css中修改
pre code
background-color: #69882f;

番外魔改记录15. 放置live2D看板娘和AI对话接入

1在head里加入

<link rel="stylesheet" type="text/css" href="assets/waifu.css"/>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

2在index.jes里加入

<main class="content">
    <input placeholder="和她聊天" id="talk"/>
        <form id="uploadForm">
        <input type="file" name="file"/>
        </form>
    <div class="waifu">
        <div class="waifu-tips"></div>
        <canvas id="live2d" width="300" height="400" class="live2d"></canvas>
        <script type="text/javascript">
            var message_Path = '/assets/'
            var home_Path = 'https://www.rua.kim/'
            </script>
        <div class="waifu-tool">
            <span class="fui-home"></span>
            <span class="fui-chat"></span>
            <span class="fui-eye"></span>
            <span class="fui-user"></span>
            <span class="fui-photo"></span>
            <span class="fui-info-circle"></span>
            <span class="fui-cross"></span>
        </div>
    </div>

    <script src="assets/waifu-tips.js"></script>
    <script src="assets/live2d.js"></script>
    <script type="text/javascript">initModel("assets/")</script>

3将模型换成自己的模型
waifu-tips.js里
function loadModel(modelId, modelTexturesId)
的loadlive2d('live2d', "/assets/model/SaberLily/ylia02.model.json");修改成自己的路径

4对话框的调整和响应式设计在手机页面隐藏
在waifu.css里添加属性
@media only screen and (max-width: 601px) {

    #talk{
                display: none; /*把类的元素隐藏掉*/
            }
    #uploadForm{
                display: none; 
            }

}

番外魔改记录16. 增互动介绍对话框与响应式设计

代码太长了不打算写在这
为了让对话框内的图片显示正常修改了
dream属性
matery.css内修改

 .dream .text {
    opacity: 1;
    font-size: 1.1rem;
}

魔改记录17. 修改首页推荐文章阅读更多按钮的颜色

layout_widget\recommend.ejs

魔改记录18. 修改音乐播放器位置大小

\libs\aplayer\APlayer.min.css
.aplayer-body
bottom:500px;
max-width:380px

.aplayer.aplayer-fixed
bottom:500px;
max-width:380px;

转载请注明: 艾莉雅の笔记 Hexo的matery主题魔改折腾笔记

一、标题在想要设置为标题的文字前面加#来表示一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。注：标准语法一般在#后跟个空格再写文字，貌似简书不加空格也行。示例： # 这是一级标题 ## 这是二级标题 ### 这是三级标题 #

2019-03-02 教程

-教程

ああああああ！(function(){var player = new DPlayer({"container":document.getElementById("dplayer0"),"video":{"url":"https

2019-02-11 测试

-视频