「微光岁月」悠然自得(十一)

你想要的生活是什么样的?

他想要的生活很简单,想喝的时候有人陪他对酒当歌即可。

各种原因,他是不太敢喝了。各种报告告诉他,想活久一点就得注意这注意那。渐渐的,他糊涂了,生活的意义是什么?吃好,喝好,活好,不就是对生活的最大的尊重吗?

人活一辈子,所有事情都在计划之中的话,那就太没意思了。他约了下周三回医院复检,然而,兄弟昨天吹鸡了,「复检?屁都不是。」

聚会期间聊了很多关于孩子学习的话题,主要是围绕该不该将孩子送去私立学校。显然,兄弟们是成功的。因为他们今晚的观点是他从未萌生过的,毕竟面对如此昂贵的学费,他也不敢去想。

女儿看到弟弟的卷子后问他,“小胖是跟我一样读三年级吗?他,好努力,这么厚的数学的试卷,要做到什么时候?”

“不用可怜弟弟。你要记住,该学时学,该玩时玩。”

……

最近工作忙完了,想折腾一番。网上与他朋友聊了下大概的方向,「抄」。他不是学设计、美术的,对美的定义可能存在一定的误解,但幸庆的是他懂得借鉴,于是便有了这次首页的改版。

时间格式

所有显示时间的地方都使用“几小时前,几天前,几周前”这样的格式,Day.js · 2kB JavaScript date utility library 了解一下。

import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime'; // 引入相对时间插件
import 'dayjs/locale/zh-cn'; // 引入中文语言包

dayjs.extend(relativeTime); // 使用相对时间插件
dayjs.locale('zh-cn'); // 设置语言为中文

{dayjs(时间).fromNow()}

打字机

HomePage About 组件使用了一个左边为头像图片与鼠标交互,右边使用 typed.js 打字机的方案,参考自 Karhdo’s Blog - Coding Adventure

其中打字机方案的配置如下:

async function initTyped() {
    const typedElement = document.getElementById('typedElement');
    if (!typedElement) return;

    const { default: Typed } = await import('typed.js');

    const options = {
      strings: ['老麦幽居处,柴扉向晓开。', '清风梳翠柳,暖日抚青苔。', '乐观、坚持;梦,近在咫尺。'],
      // 可以使用元素,如:stringsElement: '#bios',
      typeSpeed: 80,
      backSpeed: 50,
      backDelay: 5000,
      loop: true,
      showCursor: true,
      cursorChar: '|'
    };

    const typed = new Typed(typedElement, options);

    const handleBeforeSwap = () => {
      typed.destroy();
      window.removeEventListener('astro:before-swap', handleBeforeSwap);
    };

    window.addEventListener('astro:before-swap', handleBeforeSwap);
  }

  document.addEventListener('astro:page-load', () => {
    initTyped();
  });

标签样式

朋友说我还年轻,可以驾驭丰富的颜色。其实他也老了,只是他不肯承认而已。他最初的想法是让标签按钮在页面每次刷新都从样式库里取唯一的值。可他试验了半天都以失败告终,最终退而求其次,只在项目打包时让标签按钮从样式库里取唯一值。

元素宽度

朋友想修改特定页面的内容容器宽度,咨询了主题作者,给出的方案却并未解决朋友的需求。朋友请教于他,他简单了解后给出了很多相应的方案,最终均失败了。一番查看后才发现,原来内容 ID 容器的父容器限制了宽度,结合朋友所用主题,他觉得仅用 CSS 的方法无法完全满足朋友的需求。于是他想到以下方法来解决,

if (document.getElementById('post-6615')) {
  document.documentElement.style.setProperty('--be-main-width', '1200px');
}

设置容器宽度原本是 CSS 的工作,但其实换个思路的话,解决问题的办法会变得十分的简单。

白夜破晓

追了十四集,他觉得并不如前作《白夜追凶》。让他对这部剧产生兴趣是因为各大影视 UP 主的推广,看之前他十分期待,可十四集过去了,他认为他的期待暂时是过高了。

三大队

重温了一遍《三大队》。感动的泪水还是不自觉的再流了一遍,人嘛,有时候就得像程兵那样。倔一点,狠一点。