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

这东西怎么全是偷的.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;
  }

  /* 在屏幕宽度小于相应像素时调整按钮大小 */
  @media screen and (max-width: 转换成移动端时的网页宽度) {
    #back-to-top {
      bottom: 20px;
      right: 20px;
      width: 40px;
      height: 40px;
      font-size: 10px;
    }
  }

</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; /* 如果代码块超出了最大高度,启用垂直滚动条 */
}

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

(↑2024.9.29已修,,)

给网站加个Cloudflare代理

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

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

修改博客的Rss输出

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

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

主要是在主题路径里 [/theme/主题名字/layouts/_default/] 创建一个名为 rss.xml 的文件。(不知道有的主题会不会自带)

把相关代码

<description>{{- .Summary | html -}}</description>

改成

<description>{{- .Content | html -}}</description>

原文提到可能有时候可能会因为博客语言设置不是中文报错,但是我并没有遇到就暂时不管了。

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

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

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

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

2024.9.24(虽然到了26号才水出帖子)已修顺便把夜间模式按钮也弄出来了,到底为什么写这个主题的人明明就有把夜间模式切换按钮的显示放在移动端适配那里但就是不顺便一起做出来呢。。搞得我调好久

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

2024.9.24已添加(然后把默认的微博表情去掉了,现在网友的精神表情只剩下aru和blob大家族,感觉微博表情现在的使用场景只剩下了阴阳怪气所以感觉没什么使用的必要了(。。

随便废话一些

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

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

参考资料:

目录

目录

-
    Published At
    Tagged with
    评论服务被墙中国大陆用户要使用请自行翻一下(对不起可能很长时间内都不会修,希望有朝一日能修)(且博主也没能配置好评论回复提醒所以回复可能会晚orz)