Write the Code. Change the World.

分类目录
5月 27

才刚接触 babylonjs,就遇到天空盒。既然遇到了,就弄弄看。

相关文档

https://doc.babylonjs.com/features/featuresDeepDive/environment/skybox

https://doc.babylonjs.com/features/featuresDeepDive/materials/using/reflectionTexture

相关下载

https://hdrihaven.com/zh

https://www.textures.com/

https://skybox.blockadelabs.com/

playground

https://playground.babylonjs.com/#Z6SWJU#5

2月 25

到了今天,还用 php + bootstrap 来做网站已经不是很明智的选择了。可以用 vue,可以用 react 这样会更迅速,更方便。以怀旧的心情,以崇新的心情,还是选择了 laravel10 + bootstrap5 来制作一个官网。
因为看到一个很不错的网站,它的配色和布局都是喜欢的(它是用 react 来构建的)。那就仿着它的效果做下去吧。所以,现在得把 bootstrap 的配色搞定。这个需要去观察和理解 bootstrap 的样式配置。

定义站点配色,组件配色

# 主要色
$primary:#caff04 !default;

输入框配置以及按钮配置

这里截取了部分配置,看得出来,它的配置有一部分还得依赖按钮的配置。当然你也可以单独设置。可是想要整体都统一,还是比较伤脑筋。那按钮也一并处理。

…
$primary: #caff04 !default;

// 输入框的配置
$input-border-color: #000000 !default;
$input-focus-border-color: #000000 !default;
$border-width: 2px !default;
$input-btn-focus-color: $primary !default;
$input-btn-focus-blur: 5px !default;
$input-btn-focus-width: 3px !default;

// 按钮
$input-btn-padding-y: .25rem !default;
$input-btn-padding-x: .75rem !default;
$border-radius: .5rem !default;

如果按照目标站点的按钮样式来弄,比较贴近的按钮类型是 btn-outline。但仅仅改改颜色是不够的。因为他们的 hover,active 的颜色行为不统一。而处理按钮的类型行为(这么理解吧)在源码的 scss/mixins/_buttons.scss 这里。好吧,定义颜色以及圆角这些可以在自己的 _variables 文件中进行,处理 mixins 好像不可以(我自己对整个原理也没理解清楚)。但是修改源码的 scss/mixins/_buttons.scss 编译出来时可以的。这是一种不可取的办法,因为源码是自己下载的,不进行版本控制的。如果源码升级或项目换位置。修改的 scss/mixins/_buttons.scss 将会丢失。暂时还没想到好的解决方法,就先记录在这里。想实现目标按钮的效果。只需下边这样修改即可(注释两行,修改一行)。

// scss-docs-start btn-outline-variant-mixin
@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
//   --#{$prefix}btn-border-color: #{$color};
     --#{$prefix}btn-border-color: rgba(255,255,255,0);
//   --#{$prefix}btn-hover-color: #{$color-hover};
//   --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}
// scss-docs-end btn-outline-variant-mixin

可以尝试下这种定制:https://www.bootstrap.cn/doc/read/105.html

若干小时后

仿照目标站点,本来很简单的一个样式。如果用 bootstrap 去实现,就太友好了。这样改的心累。放弃吗。继续。这以上统统算胡言乱语。重新开始,继续 laravel10 + bootstrap5 。

参考

https://getbootstrap.com/docs/5.2/components/buttons/

input 框的配置 https://www.bootstrap.cn/doc/read/124.html

11月 03

laravel-permission 用来控制接口的权限(更细致入微,易操作),sanctum 也是用来控制权限(路由),两者一起使用,会引起 guard 的错误。这个需要好好的处理一下。

常见报错如下:

The given role or permission should use guard `web` instead of `sanctum`.

laravel-permission 使用的 guard 是默认的,而 sanctum 使用的是 sanctum。 我们手动设置 guard 默认的 guard 为 sanctum,并在 User 模型中,指定为 sanctum 即可。

继续阅读

9月 18

1
如果说,两个人在一起的际遇有很多种,那不在一起的理由里“性格不合”一定排在首位。

曾看过街头随机采访情侣分手的视频,百分之九十的回答都是:

“还是性格原因吧。我们不合适。”
“他太大男子主义了,我受不了。”
“她脾气不好,要求太多,我太累了。”

或许,在我们的感情经历里,多多少少都遇到类似的经历。

本来各方面条件都还不错的对象,因为性格,最终还是因无法长久和谐的相处而分手;再多的怦然心动,也抗衡不了性格不合的互相消耗和折磨。

那是不是我们每个人在遇到性格合适的人之前,都会面临争吵、冷战、over的结局呢?

还是说这个世界上真的存在俩人一开始就十分合拍,惺惺相惜的人呢?

用我的亲身经历来回答,是有的。
继续阅读