修bug

生活
581 26

前言

很久之前添加了上下文点击切换功能,但是一直没发现新增的切换区域没有做夜间模式适配,修复并记录一下。还有文章粘贴代码显示没做限制,有多少代码就显示多少会导致整屏都是代码,很不好,限制一下。

添加上下文切换

找到usr/themes/pigeon/post.php文件,在104行添加以下代码

                    <div class="prvenext m-b-lg">
                        <ul class="nextprev">
                        <li class="next"><a>« <?php $this->theNext(); ?></a></li>
                        <li class="pervious"><?php $this->thePrev(); ?><a> »</a></li></ul>
                    </div>

样式代码可在<script>标签上一行添加,代码如下

            <style>
               
                .prvenext {
                    background-color:#fff;
                    padding: 1.5rem 0;
                }
                .prvenext ul {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    padding: 0 1.25rem;
                }
                .prvenext ul li {
                    position: relative;
                    list-style-type:none;
                    text-overflow:ellipsis;
                    overflow:hidden;
                    white-space:nowrap;
                }
                .prvenext a {
                    color: #9999FF;
                    text-decoration: none;
                    transition: color .1s;
                }
                @media (max-width:767.98px){
                    .prvenext ul{
                        flex-direction: column;
                        align-items: normal;
                    }
                    .pervious li{
                        display: ;
                    }
                    .prvenext .next{
                        text-align: left;
                        line-height: 25px;
                    }
                 .prvenext .pervious{
                        text-align: right;
                    }
                }
               
            </style>

夜间模式适配

在usr/themes/pigeon/assets/css/style.css文件中搜索.public,.dark .album_list,然后在搜索到的代码后添加,.dark .prvenext,整体如下所示.public,.dark .album_list,.dark .prvenext{...}

代码区域显示限制

请教了风记星辰,依然是style.css文件,搜索.song pre code在大括号中添加如下代码

max-width:235px;min-height: 60px;margin: 0 -16px 0 0;-webkit-mask: linear-gradient(180deg, #00000000, #000) no-repeat 0 0 / 100% 10px, linear-gradient(180deg, #000, #000) no-repeat center / 100% calc(100% - 20px), linear-gradient(180deg, #000, #00000000) no-repeat 100% 100% / 100% 10px;

贴心的风记星辰,把代码显示区域底部的滑动渐变都做好了,还有滚动条靠右侧显示,区别图就不放了,图床服务器估计快挂了,不好买新服务器更不好续费,太贵了!

最后更新 2022-09-21
评论 ( 26 )
OωO
隐私评论
  1. 大峰 Windows 10 · FireFox

    我最近对折腾博客没有想法~

    2个月前江苏省无锡市 回复
    1. vian Windows 10 · Google Chrome
      @大峰

      看到了就修一下 也没咋折腾 我这博客和原版主题没啥区别

      2个月前广东省广州市 回复
  2. 小魏先生 Android · Google Chrome

    牛逼哈

    2个月前上海市 回复
    1. vian Windows 10 · Google Chrome
      @小魏先生

      哪里哪里

      2个月前广东省广州市 回复
  3. Net Windows 7 · Google Chrome

    会写代码的人都很牛逼

    2个月前河北省邢台市 回复
    1. vian Windows 10 · Google Chrome
      @Net

      小修小改 最基础的 哈哈

      2个月前广东省广州市 回复
  4. 叶开 Windows 10 · Google Chrome

    强啊👍

    2个月前辽宁省沈阳市 回复
    1. vian Windows 10 · Google Chrome
      @叶开

      大佬谦虚 我这只是小修小改

      2个月前广东省广州市 回复
  5. dujun MacOS · Google Chrome

    十年之约网站挂了一天了

    2个月前浙江省杭州市 回复
    1. vian Windows 10 · Google Chrome
      @dujun

      这问题我也解决不了啊 不归我管

      2个月前广东省广州市 回复
      1. dujun MacOS · Google Chrome
        @vian

        我就跟你熟,这不是让你上达天听么

        2个月前浙江省杭州市 回复
        1. vian Windows 10 · Google Chrome
          @dujun

          好家伙 我白天睡觉了 现在恢复了吗

          2个月前广东省广州市 回复
          1. dujun MacOS · Google Chrome
            @vian

            应该下午恢复了吧

            2个月前浙江省杭州市 回复
            1. vian Windows 10 · Google Chrome
              @dujun

              哦 不知道 我在睡觉 哈哈

              2个月前广东省广州市 回复
              1. dujun MacOS · Google Chrome
                @vian

                浪费周末

                2个月前浙江省杭州市 回复
                1. vian Windows 10 · Google Chrome
                  @dujun

                  不浪费 白天睡 晚上玩

                  2个月前广东省广州市 回复
  6. lorsin Windows 7 · Google Chrome

    腾讯云的那个cos存储放图片,费用不高 挺省钱的 ,

    2个月前广东省惠州市 回复
    1. vian Windows 10 · Google Chrome
      @lorsin

      之前没用怕被刷 后来也就没考虑了

      2个月前广东省广州市 回复
  7. 网友小宋 Android · Google Chrome

    老是写这种我理解不了的

    2个月前河南省 回复
    1. vian Android · Google Chrome
      @网友小宋

      大佬谦虚

      2个月前广东省广州市 回复
  8. dujun MacOS · Google Chrome

    技术文就点个赞

    2个月前浙江省杭州市 回复
    1. vian Windows 10 · Google Chrome
      @dujun

      也不算 就是修bug 然后记录

      2个月前广东省广州市 回复
  9. 小香猪 Android · Google Chrome

    太强了,我只会cv,香猪落泪

    2个月前江西省南昌市 回复
    1. vian Windows 10 · Google Chrome
      @小香猪

      这就是我CV的啊

      2个月前广东省深圳市 回复
      1. Teacher Du Linux · Google Chrome
        @vian

        每次香猪说自己弱鸡时,都忍不住想拆穿他!

        2个月前北京市丰台区 回复
        1. vian Windows 10 · Google Chrome
          @Teacher Du

          不用拆穿 我知道 他博客写的东西我都看不懂

          2个月前广东省深圳市 回复