跳到主要内容

· 阅读需 6 分钟
编程范儿

在使用 Docusaurus 搭建文档站点的时候,我们经常要给某个侧边栏菜单增加一些醒目的标识,比如针对新创建的文档给它一个 New 的标识, 以提醒过来看文档的用户这是一个新增加项或者新特性(阅读的时候不要遗漏)。

然而这个功能是 Docusaurus 本身没有的,但是它向我们提供了定制改造的支持。就是这个 Swizzling 特性。

· 阅读需 5 分钟
Timfan

纯静态网站或博客,由于没有数据存储功能,经常借助第三方的评论系统以插件的方式集成进来,而又以 Github 的 DiscussionsIssues 功能实现的居多。

  • giscus - 可借助组件库在 React、Vue 和 Svelte 中使用,支持多种语言
  • gitalk - 基于 Github Issue 和 Preact 开发的评论插件
  • utterances - 借助 Github issues 实现的轻量的评论组件,giscus 灵感就是来源于它

本站采用的是 Giscus 的方案。UI 风格我很喜欢,简介清爽。色调也和我的网站很搭。

· 阅读需 12 分钟
编程范儿

一直认为 Docusaurus 默认的博客文章页面太过单调,可能对于只是在网上找一地方单纯记录文字的人来说已经够了。但是我是把它打造成一个用户体验很棒的知识分享产品来打造。

首先我们来看看一个好的博客或者也可以扩大点范围叫 Web 信息资讯类产品都有哪些功能?

  • 社交平台转发分享
  • 点赞,鼓励
  • 评论互动
  • 快速复制文章链接
  • 二维码扫描手机端阅读

还有一个我觉得很好的最近几年才在各大产品频繁出现的文字的收听功能,比如微信公众号的“听全文”,国外的 Medium 也有播放音频。好处很多,对于很多不愿意或者不方便看文字的人来说他可以通过另外一条途径 来了解你分享的东西。

· 阅读需 3 分钟
编程范儿

如题,要实现树叶在风中摇摆的动画,首先准备主体:树叶

这里准备了两张矢量的高清版 SVG 格式的不同种类的树叶。

Leaf
Leaf

· 阅读需 14 分钟
编程范儿

2024 年度进度显示

00 天 00 时 00 分 00 秒

2023年只剩下最后一周,又到了一年一度该做年末总结的时候了。

回想起去年,还有人专门建立了一个关于年度总结文章汇总的仓库。读了很多篇别人写的,给了我很多的触动和感想。这里的每篇文章都是关于某个人这一整年的生活和工作的轨迹啊。 即使你这一年过的再平凡,也能从别人的视角窥见一种完全不一样的生活图景。

仓库的地址:https://github.com/saveweb/review-2022,该仓库接受投稿。

所以想想今年还是下笔了~

· 阅读需 6 分钟
编程范儿

当你在浏览网页的时候,您可能经常会遇到这样一种类型的布局。它被称为便当网格布局,这种布局的灵感来源于日本的传统便当盒子 🍱。英文名为 Bento ,所以又叫 Bento Grid

Bento 网格用途广泛,非常适合显示图像、文本、混合媒体等各种内容。它们以紧凑且有组织的方式展示大量内容,使您的网页或应用程序界面看起来干净清爽且能快速抓住人的眼球。

这种设计的趋势被认为可能最早来源于 Windows 8 和 Metro Design 设计风格。

· 阅读需 3 分钟
编程范儿

文字渐变色

对于色彩比较丰富的一些网站,经常会出现文字渐变的效果,比如 Vue 官网 “渐进式 JavaScript 框架” 中的 “渐进式”,就是使用了如下的渐变效果。

Sample Text

· 阅读需 4 分钟
编程范儿

box-shadowdrop-shadow 都是用于给元素创建阴影的 CSS 属性,但它们之间存在一些区别。

box-shadow 用于在元素的边界框(包括内容、内边距和边框)周围创建阴影效果。可以设置阴影的颜色、模糊半径、水平和垂直偏移量等参数。阴影受到元素的边界框限制, 即使元素的内容或边框超出边界框,阴影也不会超出。以下是一个示例:

box-shadow
box-shadow: 2px 2px 5px #888888;