解决导语中的问题的很好的一个办法就是,添加一个说说的页面,每次只有一两句话,以类似于时间轴的形式展现出来。
我在网上搜了好久,基本上都是针对于wordpress的php的代码。wordpress我是真的用不好,还是hexo得我心。
然后我这个前端小白,抱着试一试的心理把php的代码直接做成页面放进了我的博客。没想到还真的成了。但是肯定也是改了一些东西的,不然这篇文章意义何在?
一个比较大的变化就是,原版的代码中使用php获取当前时间的函数再html中我没有找到与之对应的。所以有个很尴尬的问题就是,当你想新建一个说说并且显示日期的时候,你得手动。。。这个确实不太方便,但是我的能力也就止步于此了。
我是在这里找到的源码:纯代码给wordpress增加说说/微博/微语功能 | 言曌博客

下面是hexo添加这个页面的大致步骤。

  1. ..\blog文件夹\source中新建一个文件夹,命名随意,但是一定要记住。这里我新建的文件夹叫shuoshuo
  2. 在文件夹中新建一个’index.html’,并将代码粘贴进去
  3. 在对应的主题页面菜单添加说说,并链接到创建的说说页面

上面的第一第三步不难,并且每个主题可能还不一样,所以就不细说了。

第二步:
将下面的代码粘贴到你的index.html中

<style type="text/css">
    #shuoshuo_content {
        background-color: #fff;
        padding: 10px;
        min-height: 500px;
    }
    /* shuo */

    body.theme-dark .cbp_tmtimeline::before {
        background: RGBA(255, 255, 255, 0.06);
    }

    ul.cbp_tmtimeline {
        padding: 0;
    }

    div class.cdp_tmlabel > li .cbp_tmlabel {
        margin-bottom: 0;
    }

    .cbp_tmtimeline {
        margin: 30px 0 0 0;
        padding: 0;
        list-style: none;
        position: relative;
    }
    /* The line */

    .cbp_tmtimeline:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 4px;
        background: RGBA(0, 0, 0, 0.02);
        left: 80px;
        margin-left: 10px;
    }
    /* The date/time */

    .cbp_tmtimeline > li .cbp_tmtime {
        display: block;
        /* width: 29%; */
        /* padding-right: 110px; */
        max-width: 70px;
        position: absolute;
    }

    .cbp_tmtimeline > li .cbp_tmtime span {
        display: block;
        text-align: right;
    }

    .cbp_tmtimeline > li .cbp_tmtime span:first-child {
        font-size: 0.9em;
        color: #bdd0db;
    }

    .cbp_tmtimeline > li .cbp_tmtime span:last-child {
        font-size: 1.2em;
        color: #9BCD9B;
    }

    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmtime span:last-child {
        color: RGBA(255, 125, 73, 0.75);
    }

    div.cbp_tmlabel > p {
        margin-bottom: 0;
    }
    /* Right content */

    .cbp_tmtimeline > li .cbp_tmlabel {
        margin: 0 0 45px 65px;
        background: #9BCD9B;
        color: #fff;
        padding: .8em 1.2em .4em 1.2em;
        /* font-size: 1.2em; */
        font-weight: 300;
        line-height: 1.4;
        position: relative;
        border-radius: 5px;
        transition: all 0.3s ease 0s;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        display: block;
    }

    .cbp_tmlabel:hover {
        /* transform:scale(1.05); */
        transform: translateY(-3px);
        z-index: 1;
        -webkit-box-shadow: 0 15px 32px rgba(0, 0, 0, 0.15) !important
    }

    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel {
        background: RGBA(255, 125, 73, 0.75);
    }
    /* The triangle */

    .cbp_tmtimeline > li .cbp_tmlabel:after {
        right: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: #9BCD9B;
        border-width: 10px;
        top: 4px;
    }

    .cbp_tmtimeline > li:nth-child(odd) .cbp_tmlabel:after {
        border-right-color: RGBA(255, 125, 73, 0.75);
    }

    p.shuoshuo_time {
        margin-top: 10px;
        border-top: 1px dashed #fff;
        padding-top: 5px;
    }
    /* Media */

    @media screen and (max-width: 65.375em) {
        .cbp_tmtimeline > li .cbp_tmtime span:last-child {
            font-size: 1.2em;
        }
    }

    .shuoshuo_author_img img {
        border: 1px solid #ddd;
        padding: 2px;
        float: left;
        border-radius: 64px;
        transition: all 1.0s;
    }

    .avatar {
        -webkit-border-radius: 100% !important;
        -moz-border-radius: 100% !important;
        box-shadow: inset 0 -1px 0 #3333sf;
        -webkit-box-shadow: inset 0 -1px 0 #3333sf;
        -webkit-transition: 0.4s;
        -webkit-transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        -moz-transition: -moz-transform 0.4s ease-out;
    }

    .zhuan {
        transform: rotateZ(720deg);
        -webkit-transform: rotateZ(720deg);
        -moz-transform: rotateZ(720deg);
    }
    /* end */
</style>
</head>

<body>
<div id="primary" class="content-area" style="">
    <main id="main" class="site-main" role="main">
        <div id="shuoshuo_content">
            <ul class="cbp_tmtimeline">
                <li> <span class="shuoshuo_author_img"><img src="http://drew.todest.cn/dreww.jpg" class="avatar avatar-48" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <p>第一个说说</p>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2019年9月10日
                        </p>
                    </a>
                </li>
            </ul>
        </div>
</div>
<script type="text/javascript">
    (function () {
        var oldClass = "";
        var Obj = "";
        $(".cbp_tmtimeline li").hover(function () {
            Obj = $(this).children(".shuoshuo_author_img");
            Obj = Obj.children("img");
            oldClass = Obj.attr("class");
            var newClass = oldClass + " zhuan";
            Obj.attr("class", newClass);
        }, function () {
            Obj.attr("class", oldClass);
        })
    })
</script>

如果在你的说说页面你不想让评论,直接在最上面加上

---
comment: false
---

每次想要新建一个说说的时候按照这个格式来

<li> <span class="shuoshuo_author_img"><img src="http://drew.todest.cn/dreww.jpg" class="avatar avatar-48" width="48" height="48"></span>
<!-- 这个img src里面的链接是说说头像的链接 -->
    <a class="cbp_tmlabel" href="">
    <!-- 这个href是你想要让这个说说链接到的地方,如果没有不管它就行 -->
        <p></p>
        <p><!-- 这里写的就是说说的内容 --></p>
        <p></p>
        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
            2019年9月10日
            <!-- 这个地方写上时间,如果不想写删除就行了。 -->
        </p>
    </a>
</li>

按照你的想法将上面的代码改好之后,粘贴到你的shuoshuo文件夹中index.html里面。根据每个<li>标签查找你应该粘贴到的位置。注意这个顺序就会是你在页面上现实的顺序。

为了预防你还不知道怎么添加,给你一个三个说说的部分代码的例子

<div id="primary" class="content-area" style="">
    <main id="main" class="site-main" role="main">
        <div id="shuoshuo_content">
            <ul class="cbp_tmtimeline">
                <li> <span class="shuoshuo_author_img"><img src="http://drew.todest.cn/dreww.jpg" class="avatar avatar-48" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <p>第一个说说</p>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2019年9月10日
                        </p>
                    </a>
                </li>
                <li> <span class="shuoshuo_author_img"><img src="http://drew.todest.cn/dreww.jpg" class="avatar avatar-48" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <p>第一个说说</p>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2019年9月10日
                        </p>
                    </a>
                </li>
                <li> <span class="shuoshuo_author_img"><img src="http://drew.todest.cn/dreww.jpg" class="avatar avatar-48" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <p>第一个说说</p>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2019年9月10日
                        </p>
                    </a>
                </li>
            </ul>
        </div>
</div>

这里我还是挺希望大家可以留言评论的,因为点赞功能我加不上。。。这个源码很强的一点就是我试了好几个主题,它的兼容性都特别好,直接融入主题,毫无违和感的那种,还是舔一波原作者,太强了。

效果图:

我的说说界面传送门: Drew最帅