【折腾】虽然不怎么写但还是突然想水一篇博客装修记录

这东西怎么全是偷的.jpg

给博客添加回到顶部按钮

(参考1)按照自己博客主题的结构在/layouts/partials/footer.html下添加

<!--返回顶部按钮 -->
<a href="#" id="back-to-top" title="返回顶部"></a>

<!--返回顶部CSS -->
<style>
  #back-to-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 55px;
    width: 55px;
    height: 55px;
    border-radius: 7px;
    background-color: rgba(64, 158, 255, 0.5);
    box-shadow: var(--shadow-l2);
    font-size: 30px;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  #back-to-top:before {
    content: ' ';
    display: inline-block;
    position: relative;
    top: 0;
    transform: rotate(135deg);
    height: 10px;
    width: 10px;
    border-width: 0 0 2px 2px;
    border-color: var(--back-to-top-color);
    border-style: solid;
  }

  #back-to-top:hover:before {
    border-color: #2674e0;
  }

  /* 在屏幕宽度小于 768 像素时,钮位置调整 */
  @media screen and (max-width: 768px) {
    #back-to-top {
      bottom: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      font-size: 10px;
    }
  }

  /* 在屏幕宽度大于等于 1024 像素时,按钮位置调整 */
  @media screen and (min-width: 1024px) {
    #back-to-top {
      bottom: 20px;
      right: 40px;
    }
  }

  /* 在屏幕宽度大于等于 1280 像素时,按钮位置调整 */
  @media screen and (min-width: 1280px) {
    #back-to-top {
      bottom: 20px;
      right: 55px;
    }
  }

  /* 目录显示时,隐藏按钮 */
  @media screen and (min-width: 1536px) {
    #back-to-top {
      visibility: hidden;
    }
  }
</style>

<!--返回顶部JS -->
<script>
  function backToTop() {
    document.documentElement.scrollIntoView({
      behavior: 'smooth',
    })
  }

  window.onload = function () {
    let scrollTop =
      this.document.documentElement.scrollTop || this.document.body.scrollTop
    let totopBtn = this.document.getElementById('back-to-top')
    if (scrollTop > 0) {
      totopBtn.style.display = 'inline'
    } else {
      totopBtn.style.display = 'none'
    }
  }

  window.onscroll = function () {
    let scrollTop =
      this.document.documentElement.scrollTop || this.document.body.scrollTop
    let totopBtn = this.document.getElementById('back-to-top')
    if (scrollTop < 200) {
      totopBtn.style.display = 'none'
    } else {
      totopBtn.style.display = 'inline'
      totopBtn.addEventListener('click', backToTop, false)
    }
  }
</script>

按理来说可以直接在footer下的设置里修改以下参数就可以改动按钮颜色不过对于有黑夜模式的主题需要在相应css文件里再添加一遍才能修改颜色(自己的路径是/assets/css/theme.scss)

  #back-to-top {--background-color: rgba(116, 116, 116, 0.5);} /* 按钮背景 */
  #back-to-top:before {border-color: #000000;} /* 光标接触到按钮前的箭头颜色 */
   #back-to-top:hover:before {border-color: var(--accent-color);} /* 光标接触到按钮后的箭头颜色 */

限制代码块高度

就在复制粘贴上面内容的时候才发现这主题并没有限制代码块高度你写多长就是多长,很碍事很影响阅读,于是又现折腾了半天

在用来显示代码块的css/scss文件(本主题为/assets/css/main.scss)里添加

.highlight {
  max-height: 300px; /* 这里设置代码块的最大高度为300像素 */
  overflow: auto; /* 如果代码块超出了最大高度,启用垂直滚动条 */
}

想顺便给代码块加上代码高亮但是试了很多方法死活不生效也不知道问题出在哪于是放弃了

给网站加个Cloudflare代理

把网站本地库迁移到新电脑上后发现站子在墙内突然访问不了了,拖了好一阵时间后看见这位友友的帖子2就也想着给自己网站上个代理试试

踩坑:按照帖子说明把域名服务商的nameserver改成cloudflare给的,待几分钟连接成功也把SSL/TLS 加密模式勾选为 “完全”后浅测试一下发现国内能访问就兴高采烈地跑去修其他东西了,结果后来才发现光这样搞国外ip就访问不了了果然还是得添加A记录(…)(*原先的CNAME记录需删除)不过我的站不是像原博主一样拿vercel部署的就随便猜了一个github的ip(如185.199.108.153)结果居然就成了,挺好(

修改博客的Rss输出

也是迁移后出现的问题,测试后发现rss输出不显示文章内章节小标题了

按照这个方法3顺手把rss输出改成全文输出了。

一些修废了和至今都没能实现/没力气弄的功能(可能算是在挖坑

  • waline评论邮件提醒:一直在怀疑是不是我用的tutanota邮箱注册了账号的关系(它没有smtp这东西),想改成用outlook邮箱接收邮件结果配置老半天都没反应不知道哪出了问题所以拖很久都没弄。今天想试试重新拿outlook邮箱注册个账号结果它莫名其妙不给注册导致主账号能看见的此系统的账号栏里就多了一个删也删不掉的幽灵账号在那里…在试着修修变量重新部署的时候还出现了不知道哪个东西可能有版本差而报了错的问题,整个人已昏厥在地上。感觉一段时间内都不想再碰这个东西了实在没精力弄了。。。

  • 搜索功能:以前试着配了,不懂代码不知道搜索框放哪好,摸索到位置后移动端好像又显示不了(跟这个主题只能在pc端看见的夜间模式一样神秘,但我真不会修),还搜不了中文干脆还是删了。不知道以后还有没有新的教程能让我抄一下,至少今天是没有力气弄了(……

  • 给waline弄夜间模式适配:找不着代码在哪一直没修,况且移动端目前并没有夜间模式看也不知道修了有啥意义

  • 给waline多加点萌表情比如blob之类的:没精力了下次吧

随便废话一些

本来是想给网络友人看我的同人图顺便就想大装修一下网站但一不小心就修了一整天好累啊.jpg

不懂代码人建站真的就是缝缝补补又一年

参考资料:

Published At
Tagged with
可以在这里评论(虽然服务被墙了我也不知道怎么弄回墙里了所以如果您在中国大陆的话是需要翻一下的)
An IndieWeb Webring 🕸💍