技术

CSS

效果——卡片链接

效果图

代码方案 利用mkdocs-material-for-docs的主题

• markdown侧的代码

<a href="https://www.bilibili.com/video/BV1Ce411D7rH/" target="_blank" class="alink">
<div class="video-container" markdown>

![](assets/RS.avif)

「坂本龙一」歌单 | 沉浸式进入他的音乐世界 | 值得无限循环的曲目 | 学习工作放松必备

十分令人有沉浸感的纯音乐，可以作为工作或写作时的背景音.
</div>
</a>

• css侧的代码

.video-container{

  border-radius: 10px;
  border-style: solid;
  border-color: rgb(255, 255, 255);
  border-width: 1px;
  width: '100%';
  height: 140px;
  background-color: rgb(255, 255, 255);
  display: grid;
  align-content: center;
  grid-template-columns: 200px 1fr; /* 两列：左边自适应宽度，右边占满剩余 */
  grid-template-rows: 1fr 1fr;
  column-gap: 40px;          /* 左右列之间的间距 */
  transition-duration: 0.2s;
  box-shadow: 2px 2px 5px #9c9b9b7b;
  color: black;
}

.video-container:hover{
  transition-duration: 0.2s;
  background-color: #f5f5f5;
}

.video-container p:first-child {
  grid-column: 1 / 2; /* 占据所有行（不管右边多少个 <p>） */
  grid-row: 1 / 3;
  align-items: center;
  text-align: center;
  display: flex;
  padding-left: 20px;
  justify-items: center;
}

.video-container p:nth-child(2){
  text-indent: 0px;
  padding-right: 40px;
  font-weight: 700;
}

.video-container p:last-child{
  margin-top: 0px;
  padding-right: 40px;
  font-size: small;
  color: #4c4d5f;
}

.video-container img{
  border-radius: 9px;
  height: 110px;
}

.alink{
  text-decoration: none; 
  color: inherit;
}

grid-template-columns

grid-template-columns: 1fr 2fr

• 将宽度划分为3个网格，第一个元素占一格大小，第二个元素占两格大小

grid-template-columns: 1fr 60px

• 将宽度划分为一个网格加60px的宽度，第二个元素占60px，第一个元素占剩下左侧的所有宽度.

grid-template-rows 可同样类比

参考资料

MMDN | grid-template-columns (opens new window)

grid-column

grid-column: 1

• 占据一个列格子

grid-column: 1 / 3

• 从第一个网格线开始，占据到第3个网格线

grid-column: 1 / span 2

• 从第一个网格线开始，延伸占据两个网格

grid-column: 2 / -1

• 从第二个网格线开始，占据到最后一个网格线

参考资料

MMDN | grid-column (opens new window)

align-content

• 表示子元素在弹性盒子布局的纵轴和网格布局的主轴，如何在内容项之间分配空间

justify-content 可同样类比

与align-items的区别

• 在 Flexbox 中，只有 justify-content，没有 justify-items。

• 在 Grid 中，两个都能用：

  • justify-content → 控制整个网格在容器里的位置。
  • justify-items → 控制网格里每个格子里的对齐方式。

参考资料

MMDN | align-content (opens new window)

css选中子节点更改样式

.parent p:first-child / nth-child(n) /last-child{}

知识

拉格朗日乘子法(Lagrange multipliers)

目标： 寻找多元函数在一组约束下的极值的方法

作用： 可将有个变量与个约束条件的最优化问题转化为具有个变量的无约束优化问题求解。

等式约束的优化问题

假定为维向量，想要寻找一个，使得目标函数f(x)最小，且满足g(x)=0。从几何上看，目标是在由g(x)=0确定的d-1维曲面上寻找能够使得f(x)$最小化的点,此时由如下结论

• 对于约束曲面上的任意点，该点的梯度正交于约束曲面
• 在最优点，目标函数在该点的梯度正交于约束曲面

若不正交，则仍然可以在约束曲面上继续移动使得函数值继续下降.

因此在最优点, 梯度和的方向必定相反或相同，即存在使得：

称为拉格朗日乘子，定义拉格朗日函数

此时的可能为正，可能为负

分别对两个变量求偏导则可得到约束条件，于是原约束优化问题可转化为对拉格朗日函数的无约束优化问题,即在变量为和的情况下寻找拉格朗日函数的极值.

不等式约束的优化问题

对于约束，若在的区域中，则约束条件不起作用.可直接通过条件来获得最优点.等价于将置零，然后对置零得到最优点.

约束条件之所以不起作用，是因为在约束范围内,只要优化到点附近，则必然满足约束条件.

若在上，则和等式约束一样分析，但此时的方向必与相反，即存在常数使得.

之所以两者方向必定相反，是因为如果两者方向相同，则可以往可行区域移动，且继续使得函数值下降.与最优点在上矛盾

整合两种情形，必定满足，因此不等式约束问题可以转化为在如下约束下最小化拉格朗日函数

其中为不等式约束下的拉格朗日乘子，上述三个条件被称为Karush-Kuhn-Tucker（简称KKT）条件.

上述做法可以推广到多个约束，可行域非空的优化问题

引入拉格朗日乘子和,相应的拉格朗日函数为

由不等式约束引入的KKT条件为

一个优化问题可以从两个角度来考察，即“主问题”（primal problem）和“对偶问题”（dual problem）.对于主问题，基于拉格朗日函数，其拉格朗日“对偶函数”(dual function) ,定义为

推导对偶问题时，通常将拉格朗日乘子对求导，并令导数等于0，获得对偶函数的表达形式

若 为主问题可行域中的点，则对任意 和 都有

表示 的分量均大于零

进而有

第一个不等式由下确界定义得到，第二个不等式由增加项为非正数得到。

若著问题的最优值为,则对任意和都有

对偶函数给出了主问题最优值的下界，其取决于和的值，进而引出了一个问题：基于对偶函数能获得的最好下界是什么 ？

这就是主问题的对偶问题，其中和称为“对偶变量”(dual variable),无论主问题的凸性如何，对偶问题始终是凸优化问题。

考虑对偶问题的最优值, 显然有,这称为“弱对偶性”（weak duality）成立;若,则称“强对偶性”（strong duality）成立.此时由对偶问题能获得主问题的最优下界，但是一般的优化问题，强对偶通常不成立。

但是若满足Slater条件:则此时强对偶性成立

• 主问题为凸优化问题，如和均为凸函数，为仿射函数

• 可行域中至少有一点使不等式约束严格成立.

值得注意的是，强对偶性成立时，将拉格朗日函数分别对原变量和对偶变量求导，再令导数等于零，即可得到原变量与对偶变量的数值关系.

项目

测试

• 只能使用BSDF的原理化着色器，其它节点无法在AGP中生效
• 可以使用骨骼动画和形变动画啊
• 无法使用粒子功能，必须要实体化出来单独进行动画设计，

一个场景，两个视角

• 排版问题

• 效果

  • 雨滴飞溅（雨滴的下落动画+碰撞检测+2D粒子效果）
  • 多云：（可以使用遮挡的形式，静态和动态窗口）
  • 下雪：（雪花掉落动画+碰撞检测+2D绘图雪覆盖）
  • 季节效果？
    • 秋天：（树叶下落，可以全屏覆盖，然后启用点击从穿透）

• 整体功能待完成：（日期的信息 与笔记信息分离）

  • 日期时间，及天气获取和存储到每一天的数据中
  • 最重要的是笔记的数据存储结构（结构由功能决定）
    • 首先要确定实现路径：canvas或是原生组件
    • 字符串类型 + 图片类型 两类；不考虑多的
    • 原生组件可以通过foreach+if-else的条件渲染实现排版
    • canvas则需要为每个类添加绘制的方法，然后还需要一个总体的协调的对象实例,来规划绘制. 滚动则是通过绘制的坐标来控制。
  • 留言功能：和笔记功能一样的，只是时间戳上要区分。
  • 定时留言功能：通过笔记的窗口编辑，然后存储，然后在对应的日期显示。