Changed index page initialization to use runOnHtmlDone

Author: apqx

404.html

@@ -12,9 +12,6 @@
 <script>
     const cardE = document.querySelector(".content-card");
     cardE.style.display = "none";
-    if (cardE.classList.contains("fade-in-animation")) {
-        cardE.classList.remove("fade-in-animation");
-    }
 </script>
 <section style="text-align: center;">
     <h1 style="font-size: 4.6rem;

_posts/original/2024-03-07-解决阿里云OSS无CDN时的流量风险.md

@@ -10,11 +10,11 @@ cover:
 tags: Code Blog 云计算 阿里云 OSS 对象存储 Referer 函数计算 CDN 网络攻击
 ---
 
-对个人博客而言阿里云的`OSS对象存储`服务非常适合存放诸如图片、视频、`JS`、`CSS`的静态资源，尤其非备案的海外站点，把资源托管在国内云上是在无法使用`CDN`的条件下加速访问的几乎唯一解，从我2年来的使用体验来看对速度和稳定性都十分满意。
+对个人博客而言阿里云的`OSS对象存储`服务非常适合存放图片、视频、`JS`和`CSS`之类的静态资源，尤其非备案的海外站点，把资源托管在国内云上是在无法使用`CDN`的条件下加速访问的几乎唯一解，从我2年的使用体验来看对速度和稳定性都十分满意。
 
 ![](https://apqx.oss-cn-hangzhou.aliyuncs.com/blog/original/20240305/aliyun_oss_overview_thumb.jpg){: loading="lazy" class="clickable clickShowOriginalImg" alt="Aliyun OSS overview" }
 
-阿里`OSS`并不“廉价”，但普通博客存储的数据不会很多，流量也不会很大，以`标准存储`+[按量计费](https://www.aliyun.com/price/product?spm=a2c4g.11186623.0.0.14e17bbeBxYDQ9#/oss/detail/ossbag){: target="_blank" }计算，每GB存储0.12元，每GB流量0.25～0.5元，我的博客每月费用不过1元左右，约等于免费。
+`OSS`并不“廉价”，但普通博客存储的数据不会很多，流量也不会很大，以`标准存储`+[按量计费](https://www.aliyun.com/price/product?spm=a2c4g.11186623.0.0.14e17bbeBxYDQ9#/oss/detail/ossbag){: target="_blank" }计算，每GB存储0.12元，每GB流量0.25～0.5元，我的博客每月费用不过1元左右，约等于免费。
 
 ## 非正常
 
@@ -31,7 +31,7 @@ tags: Code Blog 云计算 阿里云 OSS 对象存储 Referer 函数计算 CDN 
 
 有些案例阿里云会减免一部分受攻击的费用，但毕竟它确实向运营商付出了外网流量成本，所以剩余费用还是要用户支付。对使用`OSS`的小博主，这种巨额流量像一把悬在头上的达摩克利斯之剑，随时落下。
 
-首先`Referer防盗链`对这种恶意流量攻击是没用的，伪造`Referer`非常简单，它只能起到防止被其它站点`盗链`的作用。此外最直观的解决方法就是`流量封顶`、`带宽限制`和`IP请求数限制`，但奇怪的是不止阿里云，其它云服务商的`对象存储`也都不提供这类细粒度控制功能。而它们的`CDN内容分发网络`却提供，并且流量费用更便宜，大概只有`OSS`的一半，所以外套一层`CDN`再配合它更细致的流量、带宽控制手段就是应对这种攻击行为最合适的方法。
+首先`Referer防盗链`对恶意流量攻击是没用的，伪造`Referer`非常简单，它只能起到防止被其它站点`盗链`的作用。此外最直观的解决方法就是`流量封顶`、`带宽限制`和`IP请求数限制`，但奇怪的是不止阿里云，其它云服务商的`对象存储`也都不提供这类细粒度控制功能。而它们的`CDN内容分发网络`却提供，并且流量费用更便宜，大概只有`OSS`的一半，所以外套一层`CDN`再配合它细致的流量、带宽控制手段就是应对这种攻击行为最合适的方法。
 
 只不过大陆法规不允许非备案站点使用国内`CDN`，如果用国外`Cloudflare`这样无需备案、无限流量的免费`CDN`在国内访问又会是南辕北辙。本来低延时的`OSS`请求经`CDN`到国外绕一圈后，虽然面对流量攻击无需回源不会产生流量费用，但速度必然下降，与使用`OSS`的加速初衷背道而驰，称其“减速`CDN`”也不为过。
 
@@ -41,9 +41,9 @@ tags: Code Blog 云计算 阿里云 OSS 对象存储 Referer 函数计算 CDN 
 
 ## 函数计算
 
-按照以上思路，需要搭建一个`HTTP服务`来执行`OSS`的权限变更操作，基于`Serverless`的`Function Compute函数计算`是一个很好的选择。`Serverless`即无需购置`服务器`，只要提供一个匹配`HTTP`请求的`函数`，它会在云服务商收到请求时被触发执行，其余时间则不消耗计算资源，也不产生费用，是`按量付费`思路下的最优解。
+按照以上思路，需要搭建一个`HTTP服务`来执行`OSS`的权限变更操作，基于`Serverless`的`Function Compute函数计算`是一个好选择。`Serverless`即无需购置`服务器`，只要提供一个匹配`HTTP请求`的程序，它会在云服务商收到`请求`时被触发执行，其余时间不消耗计算资源，也不产生费用，是`按量付费`思路的最优解。
 
-[阿里云的函数计算](https://www.aliyun.com/product/fc){: target="_blank" }费用非常低，低到什么程度呢，调用价格`0.009元/万次`，算力价格`0.00009元/vCPUx秒`，内存价格`0.000009元/GBx秒`，对这种很少触发的监控需求来说是等于0的。
+[阿里云的函数计算](https://www.aliyun.com/product/fc){: target="_blank" }费用非常低，低到什么程度呢，调用价格`0.009元/万次`，算力价格`0.00009元/vCPUx秒`，内存价格`0.000009元/GBx秒`，对这种很少触发的监控需求是等于0的。
 
 一个调用`OSS`权限变更`API`的示例：
 
@@ -84,10 +84,12 @@ private fun shutdownOSS() {
 }
 ```
 
-注意`HTTP`触发的`函数计算`和`Spring`、`Ktor`处理`HTTP`请求的行为并不一样，阿里云收到请求会触发对应`函数`执行，在`函数`中返回`HTTP`响应后其就会被立即终止，抛入其它线程的异步任务也不会存活，所以必须在执行完所需操作后才能返回响应。而且`函数`默认是[同步调用](https://help.aliyun.com/document_detail/2513634.html#p-5n8-0bh-2w1){: target="_blank" }，报警请求在触发其执行后会等待响应，如果超过一定时间不回复，服务端收到超时反馈也会导致`函数`在未完成的情况下被终止。
+不同云服务商的`函数计算`接口不同，很多都需要引入`SDK`按照规定的方式接收`Event`事件。阿里云的解决方案则更通用化，只是转发`请求`，能使用流行的`Spring`、`Ktor`等框架。其`HTTP`触发器收到`请求`后会在指定配置的实例中启动用户上传的程序，直接把`请求`转发到实例的`80`端口，收到`响应`即判断任务完成，然后终止程序。
 
-`函数计算`中与`同步调用`相对的还有[异步调用](https://help.aliyun.com/document_detail/2513634.html#p-ohe-t8x-ik6){: target="_blank" }，阿里云会对`Header`里标识`异步调用`的请求直接返回`202`，然后再触发对应`函数`的后台执行，可用来处理一些耗时任务。对操作`OSS`而言，2核心4GB的实例`冷启动`执行完成需要2秒，为避免报警等待超时，应该定义一个轻量的同步`Trigger`，让其在触发操作`OSS`的`异步`任务后立即返回，这样既能启动耗时操作，也不会让报警请求等待过长时间。
+注意`函数计算`启动的`Ktor`，其生命周期和在普通服务器上并不一样，返回`HTTP响应`后会被立即终止，抛入后台线程的任务不会存活，所以必须在执行完所有操作后才能返回`响应`。而且`函数`默认是[同步调用](https://help.aliyun.com/document_detail/2513634.html#p-5n8-0bh-2w1){: target="_blank" }，如果超过一定时间不回复`报警请求`，`函数计算`收到超时反馈也会导致程序在未完成的情况下被终止。
 
-创建`Trigger`是因为报警配置只能指定`URL`，不能自定义`Header`，导致不能触发阿里云`函数计算`的`异步调用`，所以需要中间人。
+`函数计算`中与`同步调用`相对的还有[异步调用](https://help.aliyun.com/document_detail/2513634.html#p-ohe-t8x-ik6){: target="_blank" }，阿里云会对`Header`里标识`异步调用`的`请求`先返回`202`，再触发对应程序的后台执行，更适合处理耗时任务。操作`OSS`的`JVM`程序从`冷启动`到执行完成需耗时数秒（本例是2秒），为避免`报警`等待超时，应该定义一个轻量的同步`Trigger`，让其在触发`异步`任务后立即返回，这样既能启动耗时操作也不会让`报警请求`等待过长时间。
 
-做完这些之后，测试一下，如果成功的话那把悬在头上的达摩克利斯之剑也就可以扔掉了。
+创建`Trigger`是因为报警配置只能指定`URL`，不能自定义`Header`，导致不能触发`异步调用`，所以需要中间人。
+
+做完测试一下，如果成功那把悬在头上的达摩克利斯之剑就可以扔掉了。

npm/dist/blog-404-v2.0.0.js

@@ -33,6 +33,7 @@ body {
     @include cardElevationDark();
 }
 
+// 文章卡片的默认位置向下偏移，且变为透明
 .fade-in-animation {
     transform: translateY(var(--card-animation-translate-y));
     opacity: 0;
@@ -43,6 +44,7 @@ body {
     // will-change: transform, opacity;
 }
 
+// 启动动画，文章卡片向上移动到原位置
 .fade-in-animation.fade-in-animation--start {
     transform: translateY(0);
     opacity: 1;

npm/dist/blog-index-v2.0.0.js

@@ -1,12 +1,16 @@
 // import "./contentCard.scss"
 
-export function initContentCard(startAnimation: boolean) { 
-    if (startAnimation) {
-        startContentCardAnimation()
-    }
-}
-
-export function startContentCardAnimation() {
+/**
+ * 卡片默认是偏移和透明的，初始化卡片使其恢复到原位置和不透明
+ * @param withAnimation 是否使用动画
+ */
+export function initContentCard(withAnimation: boolean) {
     const cardE = document.querySelector(".content-card.fade-in-animation")
-    cardE?.classList.add("fade-in-animation--start")
+    if (withAnimation) {
+        // 启动动画，卡片恢复到原位置和不透明度
+        cardE?.classList.add("fade-in-animation--start")
+    } else {
+        // 不启动动画，删除使卡片偏移、透明的动画class
+        cardE?.classList.remove("fade-in-animation")
+    }
 }

npm/dist/blog-post-v2.0.0.js

@@ -208,19 +208,14 @@ export const SEARCH_DIALOG_WRAPPER_ID = "search-dialog-wrapper"
 export const ABOUT_DIALOG_WRAPPER_ID = "about-dialog-wrapper"
 export const PREFERENCE_DIALOG_WRAPPER_ID = "preference-dialog-wrapper"
 
-interface RootDialog {
-    root: Root
-    dialog: MDCDialog | null
-}
-
 // 缓存每种dialog的root和dialog实例，即使该类型dialog的内容变化，其仍是同一个dialog对象
 // 每个tag都使用自己单独的Dialog
 let dialogContainerE: HTMLElement | null = null
 let rootDialogMap = new Map<string, Root>()
 
 export function showDialog(_contentElement: JSX.Element, _dialogWrapperId: string) {
     // 如果此时html还未加载完成，确实可能出现为null的情况
-    if (document.readyState != "complete") return
+    if (document.readyState === "loading") return
     dialogContainerE = document.querySelector("#dialog_container")
     let root: Root | undefined
     if (rootDialogMap.has(_dialogWrapperId)) {

npm/dist/blog-scaffold-v2.0.0.js

@@ -2,7 +2,7 @@
 import { showShortLinkJumpDialog } from "../component/dialog/ShortLinkJumpDialog";
 import { consoleDebug } from "../util/log";
 import { runOnHtmlDone, runOnPageDone } from "../util/tools";
-import { initContentCard, startContentCardAnimation } from "../component/contentCard";
+import { initContentCard } from "../component/contentCard";
 
 runOnHtmlDone(() => {
     initContentCard(false)
@@ -22,7 +22,7 @@ function checkJump() {
     consoleDebug("Url path = " + urlPath)
     // https://mudan.me/op01
     // https://mudan.me/opera
-    var matches = urlPath.match(RegExp("^/((op|og|rp|pt|ot)..|index-opera|opera|repost|poetry|share|print|kfc)$"))
+    var matches = urlPath.match(RegExp("^/((op|og|rp|pt|ot)\\d\\d|index-opera|opera|repost|poetry|share|print|kfc)$"))
     consoleDebug("Url matches = " + matches)
     if (matches != null && matches.length > 0) {
         // 检查是否符合格式，取出pid
@@ -31,9 +31,9 @@ function checkJump() {
     }
     if (pid == null) {
         // 不是短链跳转，如果处于404页，显示404提示（默认是不显示的）
-        const e404 = document.querySelector(".content-card") as HTMLElement;
-        if (e404 != null) {
-            e404.style.display = "block"
+        const eCard = document.querySelector(".content-card")
+        if (eCard != null) {
+            (eCard as HTMLElement).style.display = "block"
         }
         return
     }

npm/src/component/contentCard.scss

@@ -11,7 +11,7 @@ import { Post } from "../component/react/post/BasePostPaginateShow"
 import { GridIndexList } from "../component/react/GridIndexList"
 import { MDCRipple } from "@material/ripple"
 
-runOnPageDone(() => {
+runOnHtmlDone(() => {
     initIndexTopCover()
     initIndexList()
 })

npm/src/component/contentCard.ts

@@ -38,7 +38,7 @@
         {%- break %}
         {% endif -%}
         {%- if post.categories contains "opera" and post.hideFromIndex != true %}
-        <li class="grid-item grid-index-li">
+        <li class="grid-item grid-index-li" style="display: none;">
             <a class="index-a mdc-card grid-index-card grid-index-card__ripple" href="{{ post.url }}">
                 <section>
                     {%- if post.index-cover != null %}