为你的hexo博客添加说说页面

解决导语中的问题的很好的一个办法就是,添加一个说说的页面,每次只有一两句话,以类似于时间轴的形式展现出来。 我在网上搜了好久,基本上都是针对于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="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" 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="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" 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里面。根据每个

  • 标签查找你应该粘贴到的位置。注意这个顺序就会是你在页面上现实的顺序。

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

<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="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" 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="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" 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="https://cdn.jsdelivr.net/gh/drew233/cdn/dreww.webp" 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最帅