hexo-matery添加日志页面


日志可以帮助你记录这一路走来的历程,什么时候做了什么事,日后看起来也是回忆满满吧。这个日志页面是我从朋友的网站扒下来的,不太好的地方是需要自己按照格式写,贴上源码吧,有需要的自取吧。

演示页面

日志页面

新建页面

1.在source文件夹下新建文件夹journal,在该文件夹中新建一个名字为index.md 文本文件
的文件内容为

---
title: journal
date: 2020-10-31 10:11:28
type: "journal"
layout: "journal"
---

2.在主题-config.yaml文件里菜单menu添加

日志:
    url: /journal
    icon: fa fa-book

3.在layout文件夹里新建一个journal.ejs文本文件,用于后续写入htmlcss和js

这也是matery主题新建页面通用步骤,将对应的文件名替换即可

在journal.ejs中写入如下内容:

<%- partial('_partial/bg-cover') %>
<style>
    .journal {
        padding: 12px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 95%;
        background: #fbfbfb50;
        border-radius: 10px;
        font-size: 16px;
        margin: 12px auto;
    }
    * {
            margin: 0;
            padding: 0;
        }



        .box {
            width: 100%;
            max-width: 1200px;
            min-width: 300px;
            margin: 0 auto;
        }

        a {
            text-decoration: none;
            color: #ffffff;
        }

        .tit {
            text-align: center;
            padding: 40px 0;
            letter-spacing: 2px;
            font-size: 32px;
            color: #333;
        }

        .min {
            position: relative;
        }

        .line {
            height: 100%;
            width: 4px;
            background: #666666;
            position: absolute;
            left: 50%;
            margin-left: -2px;
            display: none;
        }

        .vas {
            padding-top: 20px;
        }

        .list {
            width: 100%;
            height: 160px;
            margin-top: 40px;
            position: relative;
            display: none;
        }

        .dian {
            width: 20px;
            height: 20px;
            background: #666666;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            border: 3px solid #ffffff;
            box-sizing: border-box;
            margin-left: -10px;
            margin-top: 5px;
            z-index: 2;
        }


        .list_box {
            width: 50%;
            height: 100%;
            float: left;
            position: relative;
            /* background: red; */
        }


        .hx {
            width: 150px;
            height: 4px;
            background: #666666;
            margin-top: 12px;
            float: right;
            z-index: 1;
        }

        .list_nr {
            width: 65%;
            height: auto;
            padding: 15px;
            background: #118DF0;
            border-radius: 6px;
            color: #f6f7f8;
            float: left;
            margin-top: -15px;
            margin-left: 19%;
        }

        .nr_tit {
            font-size: 16px;
            font-weight: 700;
            margin: 10px 0;
            margin-top: 0px;
        }

        .nr_nr {
            line-height: 25px;
            position: relative;
        }

        .date {
            position: absolute;
            right: 12%;

            padding: 5px;
            top: -32px;
            color: #333;
            border-radius: 10px;
            font-size: 12px;
        }
</style>    
<main class="content">
    <div class="container">
    <div class="card">
            <div class="card-content">

                <div class="tag-title center-align">
                    <div class="journal">
                        <div class="title center-align">“ 日志”</div>
                        “ 这是本站的站点日志用来记录本站建立过程,变动内容,新增内容~~ ”                      
                    </div>

                    <div class="box">
                        <div class="tit"></div>
                        <div class="min">
                            <div class="line"></div>
                            <div class="vas">
                            <!--一个模板-->
                                <div class="list">
                                    <div class="dian"></div>
                                    <div class="list_box">
                                        <div class="hx"></div>
                                        <div class="list_nr">
                                            <p class="date">2021-04-19 17:03:00</p>
                                            <div class="nr_tit">
                                                <a href=""># 标题</a>
                                            </div>
                                            <div class="nr_nr">
                                                内容</div>
                                        </div>
                                    </div>
                                </div> 
                            <!--一个模板-->
                                <div class="list">
                                    <div class="dian"></div>
                                    <div class="list_box">
                                        <div class="hx"></div>
                                        <div class="list_nr">
                                            <p class="date">2021-04-19 17:03:00</p>
                                            <div class="nr_tit">
                                                <a href=""># 添加统计数据</a>
                                            </div>
                                            <div class="nr_nr">
                                                2021年头三个月百度统计数据到统计图页面</div>
                                        </div>
                                    </div>
                                </div> 



                    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
                    <script src="../src/tiao_c.js"></script>
                    <script>


                        $(document).ready(_ => {

                            let list_box = $(".list_box");
                            let hx = $(".hx");
                            let list_nr = $(".list_nr");
                            let date = $(".date");
                            let arr_color = ['#118DF0', '#8bc24c', '#FF5F5F', '#515bd4', '#F7B32D'];
                            let flag = 0;
                            let wy = $("body").width();

                            function pc() {

                                if (wy <= 700) {
                                    window.history.go(0);
                                }

                                if ($("body").width() < 1240) {
                                    $(".top img").css("right", "5px");
                                } else {
                                    $(".top img").css("right", "-22px");
                                }

                                $(".top").css("display", "block");

                                for (let index = 0; index < list_box.length; index++) {

                                    $(list_nr[index]).css("background", arr_color[flag]);
                                    if (flag == 4) {
                                        flag = 0;
                                    } else {
                                        flag += 1;
                                    }

                                    if (index % 2 != 0) {
                                        let a = $(list_box[index]);
                                        let b = $(hx[index]);
                                        let c = $(list_nr[index]);
                                        let d = $(date[index]);
                                        a.css({
                                            "float": "right"
                                        });
                                        b.css({
                                            "float": "left"
                                        })
                                        c.css({
                                            "float": "right",
                                            "margin-right": "19%"
                                        })
                                        d.css({
                                            "right": 'unset',
                                            "left": "12%"
                                        })

                                    }
                                }
                                $(".list").slideDown(800);
                            }

                            function move() {

                                if (wy > 700) {
                                    window.history.go(0);
                                }
                                for (let index = 0; index < list_box.length; index++) {
                                    $(list_nr[index]).css("background", arr_color[flag]);
                                    if (flag == 4) {
                                        flag = 0;
                                    } else {
                                        flag += 1;
                                    }

                                }

                                $(".list").css("margin-top", "60px");
                                $(".line").css("left", "10%");
                                $(".dian").css("left", "10%");
                                $(".list_box").css("width", "100%");
                                $(".hx").css("float", "left");
                                $(".list_nr").css({
                                    "max-height": "146px",
                                    "line-height": "17px",
                                    "font-size": "12px"
                                });
                                $($(".list")['0']).css("margin-top", "20px");
                                $(".list").slideDown(800);

                            }

                            function win() {
                                let width = $("body").width();
                                $(".line").slideDown(800, _ => {
                                    if (width <= 700) {
                                        move();
                                    } else {
                                        pc();
                                    }
                                });
                            }
                            $(window).resize(win);
                            win();
                        });

                        $(".nr_nr").click((e) => {

                            if ($("body").width() <= 700) {
                                alert(e.delegateTarget.innerText);
                            }

                        })

                        $(".top img").click(_ => {
                            $(document).scrollTop(0);
                        })


                        var time = new Date();
                        var time_new = time.getTime();
                        var str = '2019-03-01 12:14:46'; 
                        str = str.replace(/-/g, '/'); 
                        var date = new Date(str); 
                        var time_old = date.getTime();
                        var cha = (time_new - time_old)/86400000; 
                        console.log('本站已运行'+Math.floor(cha)+'天');


                        // 我也不写注释了,js部分的代码,主要就是拿来兼容移动端和PC端。

                    </script>                    
                </div>

            </div>

        </div>

    </div>

</main>    

需要添加日志就按照一样的html格式手动写上去就行。


文章作者: 不染轻裳
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 不染轻裳 !
评论
 上一篇

阅读全文

centos服务器手动安装PHP环境
centos服务器手动安装PHP环境 centos服务器手动安装PHP环境
为什么选择手动安装呢,因为不会用宝塔,虽然很多人都说宝塔好用,但我确实不太会用宝塔,还是选择手动安装吧。本文是我在安装过程中对网上教程的总结避坑,以及自己碰到的问题的总结。 安装顺序最佳的安装顺序是先安装apache再安装mysql最后
2021-01-05
下一篇 

阅读全文

站点2020年度总结
站点2020年度总结 站点2020年度总结
虽然是2020年10月份才开始匆匆建站,但是我觉得还是有必要在总结一下这开始的第一年,开一个好头未来再接再励。大部分数据来自百度统计。 访客 浏览量pv百度统计(2020.11.14开始)数据:7336卜算子统计(从建站开始统计)数据
2020-12-31
  目录