BB短博文Hexo-Matery主题适配

Heson

hexo

发布于：2020年10月19日

次浏览

之前哔哔短博文已经适配了Volantis主题。效果可见这篇文章：《哔哔！换个姿势在静态博客上发短博文》

我的哔哔页面：https://www.heson10.com/bb

今天抽空把Matery主题也适配了，效果如下（支持发图片）：

🎀系列文章

10月19日：《BB短博文Hexo-Matery主题适配》

10月20日：《BB短博文Hexo-Next主题(8.0+)适配》

10月21日：《BB短博文Hexo-Butterfly主题适配》

10月30日：《Typecho-Cuteen主题哔哔适配》/posts/3510.html)

Leancloud创建存储空间

之前文章已经写过👉点我

微信公众号绑定

关注下面公众号：

按照公众号的提示的命令进行绑定：

//bindCurrentUser:你的AppID,你的MasterKey,https://你的api域名

完成后会提示绑定成功。

Matery适配

创建bb.ejs模板

在themes\matery\layout\文件夹中新增bb.ejs模板，加上以下代码：

<% if (theme.verifyPassword.enable) { %>
<script src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.crypto) %>"></script>
<script>
    (function () {
        let pwd = '<%- page.password %>';
        if (pwd && pwd.length > 0) {
            if (pwd !== CryptoJS.SHA256(prompt('<%- theme.verifyPassword.promptMessage %>')).toString(CryptoJS.enc.Hex)) {
                alert('<%- theme.verifyPassword.errorMessage %>');
                location.href = '<%- url_for("/")  %>';
            }
        }
    })();
</script>

<% } %>

<%- partial('_partial/post-cover') %>

<%
        var isTocEnable = theme.toc.enable && String(page.toc) !== 'false';
        var containerClass = isTocEnable ? 'post-container' : 'container';
    %>

<main class="<%- containerClass %> content">

    <%- partial('_partial/post-detail.ejs') %>

</main>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.5.3/dist/av-min.js"></script>

<script type="text/javascript">
    var {
        Query
    } = AV;
    AV.init({
        appId: "<%= theme.bbtime.appId %>",
        appKey: "<%= theme.bbtime.appKey %>",
        serverURLs: '<%= theme.bbtime.serverURLs %>'
    });

    var query = new AV.Query('content');

    var app = new Vue({
        el: '#app',
        data: {
            page: 0,
            count: 0,
            contents: []
        },
        methods: {
            loadMore: function (event) {
                getData(++this.page);
            }
        }
    })

    function urlToLink(str) {
        //增加发图片功能
        var re = /\bhttps?:\/\/(?!\S+(?:jpe?g|png|bmp|gif|webp|gif))\S+/g;
        var re_forpic = /\bhttps?:\/\/.*?(\.gif|\.jpeg|\.png|\.jpg|\.bmp|\.webp)/g;
        str = str.replace(re, function (website) {
            return "<a href='" + website + "' target='_blank'> <i class='iconfont icon-lianjie-copy'></i>链接 </a>";
        });
        str = str.replace(re_forpic, function (imgurl) {
            return "<img src='" + imgurl + "'  /> ";
        });
        return str;
    }
    //友好地显示时间
    function timeago(dateTimeStamp) {
        var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示 
        var hour = minute * 60;
        var day = hour * 24;
        var week = day * 7;
        var month = day * 30;
        var now = new Date().getTime(); //获取当前时间毫秒 
        var diffValue = now - dateTimeStamp; //时间差 
        if (diffValue < 0) {
            return;
        }
        var minC = diffValue / minute; //计算时间差的分，时，天，周，月 
        var hourC = diffValue / hour;
        var dayC = diffValue / day;
        var weekC = diffValue / week;
        var monthC = diffValue / month;
        if (monthC >= 1 && monthC <= 3) {
            result = " " + parseInt(monthC) + " 月前"
        } else if (weekC >= 1 && weekC <= 3) {
            result = " " + parseInt(weekC) + " 周前"
        } else if (dayC >= 1 && dayC <= 6) {
            result = " " + parseInt(dayC) + " 天前"
        } else if (hourC >= 1 && hourC <= 23) {
            result = " " + parseInt(hourC) + " 小时前"
        } else if (minC >= 1 && minC <= 59) {
            result = " " + parseInt(minC) + " 分钟前"
        } else if (diffValue >= 0 && diffValue <= minute) {
            result = "刚刚"
        } else {
            var datetime = new Date();
            datetime.setTime(dateTimeStamp);
            var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
            var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
            result = Nmonth + "-" + Ndate
        }
        return result;
    }
    function getData(page = 0) {
        query.descending('createdAt').skip(page * 10).limit(10).find().then(function (results) {
            if (results.length == 0) {
                alert('之前没发表过说说了')
            } else {
                let resC = results;
                reqData = false;
                resC.forEach((i) => {
                    let dateTmp = new Date(i.createdAt);
                    i.attributes.time = timeago(dateTmp);
                    i.attributes.content = urlToLink(i.attributes.content);
                    app.contents.push(i);
                })
            }

        }, function (error) { });
    }

    getData(0);

    query.count().then(function (count) {
        app.count = count;
    }, function (error) { });


</script>
<% if (theme.mathjax.enable && page.mathjax) { %>
<script src="<%- theme.mathjax.cdn %>"></script>
<script>
    MathJax.Hub.Config({
        tex2jax: { inlineMath: [['$', '$'], ['\(', '\)']] }
    });
</script>
<% } %>

修改post-detail.ejs

在themes\matery\layout\_partial\post-detail.ejs中，这个位置：

加上如下代码：

<% if (page.layout == 'bb') { %>
<style>
    @font-face {
        font-family: "iconfont";
        src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168');
        /* IE9 */
        src: url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.eot?t=1586882866168#iefix') format('embedded-opentype'),
            /* IE6-IE8 */
            url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAAB2gAAAKPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqCUII8ATYCJAMMCwgABCAFhG0HQBuEBsiuMRkynL4YFCHtLKs4b+k7/80U8DwHIB6+xtr7u3vniDZI6tmnkyDS8NC5iFgJlE7pTPcO8e5b+803aYQy8YtH1JPKyZzY3ttb1EonioVGSBAiRJp4JV9cFppCxLpe2z8sUs37O4QEDFRM0lFeAw4XN6bQPG06zTG8DRwHFOBeGEVWIjE+mP8wduVFPCbQNK4ktN8/OgFJhbEqEFemLkEyFVcUVqoL1ZKDRbyIqafb9AA8+9+PX41IklQyY+PBSZ8KnR+9iBx0OxZcp8PxvGDHyFgACnFY6j8QCfMLIppKPmoCrGtW8OG/y0eufLX/8AiJqDKa22AGWpMzUth6p6aARySQQRUUL4AnSBmuyvIwPdbz21OX5ybO5duOJifaLl6cvkrd1HR7kWEy6yikff29PvgO17V/Tf/9f/oN3PDqz22a719IYlZJHQetpLY08MV6fwFDrF0B6F4XyB3/FyEEnZnU2XGtVwHvpxtA1d6pftKB4AcoWo4U1QQbiiy35Xow27whbwK2NNFlhAc99zeOtM4S6ikFQ1IzhqxuglAoC6ho2UBV3Raa5g0cbxnCRURpYM4pQOh3h6TXG7J+j4RCeULFqFdU9UcETYfRdGHLVJjpHk6SIBXlTTQV5mmWS6SD1jHSVx2JJ1U+a4p4YKawvrSSLQ2QR3yMLcGa3hBCQ40zF/vBc+Q4DH3OLFJExRDCb64un5S9qaIwF9L2cEQiEBWSbUImBePR3PFCOvf5MUS3yiHhNR0VySmEC5jTo7qKWgvCgN5r1XEtrwTW6BoEQYM0HONC/cBLHDPPIL98noUohAqjR7uvWVV1HlVbfWV+o/t8J6DJOJ4jRY6idmVKnmVS1q8tK8zfBAAA') format('woff2'),
            url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.woff?t=1586882866168') format('woff'),
            url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.ttf?t=1586882866168') format('truetype'),
            /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
            url('//at.alicdn.com/t/font_1755564_z4mhxbw13mq.svg?t=1586882866168#iconfont') format('svg');
        /* iOS 4.1- */
    }

    .iconfont {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .icon-lianjie:before {
        content: "\e6a3";
    }

    .icon-lianjie-copy:before {
        content: "\e6a4";
    }
</style>
<main id="app">
    <p class="tip">共计发送 {{count}} 条说说</p>
    <div class="timenode" v-for="item in contents" v-cloak>
        <div class="meta">
            <p><time v-bind:datetime="item.attributes.time">{{item.attributes.time}}</time></p>
        </div>
        <div class="body">
            <p v-html='item.attributes.content'></p>
        </div>
    </div>
</main>
<% } %>

加上CSS效果

css丢进themes\matery\source\css\matery.css里面

/* bb样式 */
div.timenode {
    position: relative;
  }
  div.timenode:before,
  div.timenode:after {
    content: '';
    z-index: 1;
    position: absolute;
    background: rgba(68,215,182,0.5);
    width: 2px;
    left: 7px;
  }
  div.timenode:before {
    top: 0px;
    height: 6px;
  }
  div.timenode:after {
    top: 26px;
    height: calc(100% - 26px);
  }
  div.timenode:last-child:after {
    height: calc(100% - 26px - 16px);
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }
  div.timenode .meta,
  div.timenode .body {
    max-width: calc(100% - 24px);
  }
  div.timenode .meta {
    position: relative;
    color: var(--color-meta);
    font-size: 0.875rem;
    line-height: 32px;
    height: 32px;
  }
  div.timenode .meta:before,
  div.timenode .meta:after {
    content: '';
    position: absolute;
    top: 8px;
    z-index: 2;
  }
  div.timenode .meta:before {
    background: rgba(68,215,182,0.5);
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }
  div.timenode .meta:after {
    background: #44d7b6;
    margin-left: 2px;
    margin-top: 2px;
    width: 12px;
    height: 12px;
    border-radius: 6px;
    transform: scale(0.5);
    transition: all 0.28s ease;
    -moz-transition: all 0.28s ease;
    -webkit-transition: all 0.28s ease;
    -o-transition: all 0.28s ease;
  }
  div.timenode .meta p {
    font-weight: bold;
    margin: 0 0 0 24px;
  }
  div.timenode .body {
    margin: 4px 0 16px 24px;
    padding: 16px;
    border-radius: 8px;
    background: var(--color-block);
    display: inline-block;
  }
  div.timenode .body:empty {
    display: none;
  }
  div.timenode .body >*:first-child {
    margin-top: 0.25em;
  }
  div.timenode .body >*:last-child {
    margin-bottom: 0.25em;
  }
  div.timenode .body .highlight {
    border: 1px solid #e4e4e4;
  }
  div.timenode:hover .meta {
    color: var(--color-text);
  }
  div.timenode:hover .meta:before {
    background: rgba(255,87,34,0.5);
  }
  div.timenode:hover .meta:after {
    background: #ff5722;
    transform: scale(1);
  }
  div.timenode .body {
    margin: 0 0 0 24px;
    padding: 16px;
    border-radius: 8px;
    background: #f6f6f6;
    display: inline-block;
}
div.timenode time{
    margin-left: 20px;
}

修改主题配置_config.yml

在主题配置中加入（注意要顶格）：

## 哔哔功能配置
## 关注公众号 "黑石哔哔"，发送: //bindCurrentUser:你的APPID,你的MASTERKEY,你的RESTAPI 
## 可用leancloud国际版，国际版api为 https://appid前八位.api.lncldglobal.com 
bbtime:
 appId: 你的appId
 appKey: 你的appKey
 serverURLs: https://你的api