Hexo（sakura）添加說說頁面

原創 cungudafa 2020-02-26 21:01

前言

在自己的網站中添加說說頁面，類似於qq空間一樣：
實現操作也比較簡單：css處理樣式就好了，
這是靜態處理的頁面，如果有後臺還可以實時添加發布說說，更高配一點。
在這裏插入圖片描述
快速傳送門

步驟

  1. 在themes\sakura\languages\zh-cn.yml中增添定義：

    shuoshuo: 說說

  2. 修改導航欄，位置：themes\sakura\_config.yml增添：

    說說: {path: /shuoshuo/, fa: fa-commenting-o fa-commenting },

    在這裏插入圖片描述

  3. 在博客主目錄下新建目錄：

    hexo new page shuoshuo

    路徑Users/用戶名/博客文件夾/source文件夾裏就會出現剛剛新建的文件夾shuoshuo，打開文件shuoshuo，刪除index文件夾，還有一個index.md文件,待會再來修改它。

  4. Myweb\source\shuoshuo\，新建文件夾shuoshuo.css
    在這裏插入圖片描述

shuoshuo.css樣式文件：

參考原文：Uncle_drew:爲你的hexo博客添加說說頁面

#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;
    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 {
    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 */

主頁面：index.md

---
title: shuoshuo
type: shuoshuo
noDate: 'true'
comments: 'false'
---
<link rel="stylesheet" href="./shuoshuo.css">

<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/cungudafa/cdn/img/custom/cungudafa.jpg" class="avatar avatar-48 zhuan" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <p>想要開學，想吃火鍋，想吃燒烤，想吃蟹肉煲，想吃雞腳米線，想喝奶茶~</p>
                        <iframe frameborder="no" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1338809890&auto=1&height=66"></iframe>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2020年2月25日
                        </p>
                    </a>
                </li>
                 <li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" class="avatar avatar-48 zhuan" width="48" height="48"></span>
                    <a class="cbp_tmlabel" href="">
                        <p></p>
                        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582636990314&di=2421dcd34e1cc519b7f7f9559afbe7b1&imgtype=0&src=http%3A%2F%2Fpics1.baidu.com%2Ffeed%2Fb17eca8065380cd7531865282a19873258828151.jpeg%3Ftoken%3Dce6f76a2b9dc38c02c91acfc2a4bb8d8%26s%3D3C79EF14C510746516F547E003007036" height="200" width="100" />
                        <p>武漢加油！中國加油！</p>
                        <p></p>
                        <p class="shuoshuo_time"><i class="fa fa-clock-o"></i>
                            2020年2月25日
                        </p>
                    </a>
                </li>
                <li> <span class="shuoshuo_author_img"><img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" class="avatar avatar-48 zhuan" 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>
                            2020年2月25日
                        </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>

優秀樣式參考：itggg.cn
當然都可以根據WordPress模板移植，WordPress如何添加說說/心情頁面
代碼的搬運工！🤣

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Hexo（sakura）neat壓縮導致首頁歸檔頁面分頁處錯位（完美解決）

文章目錄一、前言0.報錯內容二、解決問題1.原因分析2.解決方法3.總結 一、前言 我錯了，幾個人跳坑了，我以爲只是刪掉一些註釋，沒什麼大不了，少寫了一篇博客，2333 0.報錯內容 （首頁和歸檔頁的）正常頁面： 報錯頁面：（

cungudafa 2020-07-03 19:11:46

hexo（sakura）複製文章自動添加追加版權信息

文章目錄一、前言二、sakura配置1.主題配置2.添加引用3.主題js配置（1）js引用位置（2）修改js三、總結 一、前言 文章被盜，被爬取，內容被cv，你是否很苦惱？ 被複制時，自動給文章內容添加原文信息。🤣 思路： 監聽

cungudafa 2020-07-03 19:11:36

hexo（sakura）給博客增添側邊欄（回到頂部，跳轉評論，深色模式，播放音樂）

cungudafa 2020-06-03 01:09:59

hexo（sakura）修復和優化（ejs基本操作）

cungudafa 2020-05-31 18:55:14

hexo（sakura）仿gitee添加文章貢獻度日曆圖（echarts）

cungudafa 2020-05-31 18:55:04

hexo-theme-SakuraPlus主題文檔

cungudafa 2020-05-26 09:45:04

Valine-1.4.4新版本嚐鮮+個性制定（表情包、qq頭像、UI樣式）

cungudafa 2020-04-18 16:12:24

Hexo（sakura）添加Rating投票功能

cungudafa 2020-03-12 04:58:53

hexo（sakura）引入fancybox優化圖片視頻查看效果

cungudafa 2020-03-05 08:28:14

爲你的博客引入——今日詩詞、每日一言（js插件分享）

cungudafa 2020-03-05 08:28:14

Valine--修復評論者暱稱跳轉外鏈出錯

cungudafa 2020-03-05 08:28:14

Valine-實現QQ郵箱識別生成頭像地址（完美解決頭像問題）

cungudafa 2020-03-03 22:10:03

Hexo（sakura）自定義標籤雲

cungudafa 2020-03-03 22:10:03

Hexo自動部署到阿里雲(Ubantu16.04)【超詳細踩坑記錄】

cungudafa 2020-03-02 14:46:26

Valine - 自定義郵件回覆提示

cungudafa 2020-02-26 21:01:38