CodeIsland「码屿」

photo网址证书重新签发

Sat, 28 Feb 2026 17:30:09 GMT

一、背景

之前的免费证书就 3 个月时间，到 25 年底过期好久了，今天有时间更新下新证书。

二、步骤

登录阿里云控制台

链接：数字证书管理服务

突然发现之前申请的是 V1.0，现在都变成 2.0 了。

购买免费证书

依旧是购买个人免费证书，只有 3 个月有效期。

每个人可以同时并发申请 20 个免费证书。

这里我们先申请一个免费证书。

部署下发证书

这里我已经申请完了，没有申请的，待申请这里是可以点击，然后再点击部署。

这里选择云服务器部署，创建任务。

填写名称、选择证书、云服务器，之后到最终的配置。

这里的部署配置的意思，是把我们申请下来证书的 key 和 pem 上传得到服务器里。

所以要填下 nginx 的配置中的目录。

nginx 中的配置目录

cat nginx.conf

可以看到我的证书和 key 配置的目录是：

ssl_certificate /etc/nginx/cert/photo.kalami.icu.pem;

ssl_certificate_key /etc/nginx/cert/photo.kalami.icu.key;

把目录分别填上即可。点击部署，就把 pem 和 key 上传到对应的目录中。

是否上传成功

看时间也能对应上，即为上传成功。

别急还有最后一步。

重启 nginx

命令：sudo nginx -s reload

至此结束~

三、踩坑记录

发现还是出现问题。

不要急，问了下 AI，可能是浏览器缓存的问题。用无痕访问，果然成功了。

chronoframe图片展示流

Mon, 13 Oct 2025 20:03:13 GMT

最终方案

阿里云 ECS 部署 chronoframe + 连接 Cloudflare R2 + 购买域名(域名解析、申请 SSL、反向代理)

购买一年的阿里云服务器 99 元，阿里云服务器使用 Red Hat 系列，包管理用 yum

Cloudflare R2 让 GPT 帮我算了下，差不多 40G 的图片，存储大概 4~5 元/月，没有流量费

一、部署 chronoframe 步骤

1.1 更新软件源

# 1. 更新软件源（仓库）列表
yum check-update

# 2. 升级所有可更新的软件包（系统会列出将要升级的包，并询问您是否继续）
yum update

1.2 安装 docker compose

# 1. 安装必要的依赖工具和软件源管理工具
sudo yum install -y yum-utils device-mapper-persistent-data lvm2

# 2. 添加 Docker 的官方仓库（使用国内阿里云镜像，大幅提升下载速度）
sudo yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

# 3. 安装 Docker 引擎（社区版）及其核心组件
sudo yum install -y docker-ce docker-ce-cli containerd.io

# 4. 启动 Docker 服务，让 Docker 在后台运行
sudo systemctl start docker

# 5. 将 Docker 服务设置为开机自动启动，保证服务器重启后 Docker 自动运行
sudo systemctl enable docker

# 6. 验证 Docker 是否安装成功，成功则会显示版本号
sudo docker --version

# 新版，安装docker后会自动安装docker compose，无需额外安装
# 7. 验证 Docker Compose 是否安装成功，成功则会显示版本号
docker compose --version

1.3 创建项目目录

mkdir -p /opt/chronoframe
cd /opt/chronoframe

1.4 配置 .env 文件

新建 /opt/chronoframe/.env，内容示例：

# Admin user email (required)
CFRAME_ADMIN_EMAIL=邮箱
# Admin user name (default to Chronoframe, optional)
CFRAME_ADMIN_NAME=名字
# Admin user password (default to CF1234@!, optional)
CFRAME_ADMIN_PASSWORD=密码

# 应用标题与口号
NUXT_PUBLIC_APP_TITLE=名字
NUXT_PUBLIC_APP_SLOGAN=My Photo Album Stream
NUXT_PUBLIC_APP_AUTHOR=作者
NUXT_PUBLIC_APP_AVATAR_URL=

# Mapbox Token
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

# 存储提供者（s3/github/local）
NUXT_STORAGE_PROVIDER=s3
# S3 存储服务配置
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=你的access_id
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=你的secret_key
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=

# 会话密码（32 位随机字符串，必须设置）
# 使用命令：openssl rand -base64 32（更安全）
NUXT_SESSION_PASSWORD=用上述命令生成

# GitHub OAuth
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

1.5 配置compose.yml

新建 /opt/chronoframe/docker-compose.yml：

# version: "3.8"
services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - "3000:3000"
    volumes:
      - ./data:/app/data
    env_file:
      - .env

1.6 启动服务

docker compose up -d

查看日志确认服务是否正常：

docker logs -f chronoframe

1.7 访问

打开浏览器访问：

http://服务器公网IP:3000

登录后台，上传照片，开始使用。

二、域名配置

2.1 购买域名

在阿里云、腾讯云、GoDaddy 等平台购买一个您喜欢的域名（例如 example.com）。
通常一年几十元就能买到。

2.2 配置域名解析

在域名购买平台的控制台，找到“域名解析”或“DNS 管理”。
添加一条 A 记录：
- 主机记录：@（代表主域名）或 photo（代表子域名 photo.example.com）
- 记录值：填写您的云服务器公网 IP xxx.xxx.xxx.xxx
- TTL：默认即可

2.3 申请免费 SSL 证书

阿里云手动配置

申请免费 SSL 证书

登录阿里云控制台。
搜索 “SSL 证书（应用型）”。
点击 “申请证书” → 选择 免费证书（DV 类型）。
- DV 证书是最基础的，足够个人网站使用。
填写你的域名（例如：www.example.com 或根域名 example.com）。

申请后，等待几分钟，证书就会签发。

部署证书到 ECS

首次需手动部署-操作文档：

在 Linux（RHEL/CentOS/Ubuntu/Debian）下的 Nginx或Tengine服务器中安装/配置/部署 SSL证书_数字证书管理服务（原SSL证书）(SSL Certificate)-阿里云帮助中心

自动部署步骤：

在 SSL 证书列表 找到刚签发的证书。
点击 “部署” → 选择 ECS 服务器。
系统会让你选择目标 ECS 实例（你的网站所在服务器）。
阿里云会自动登录你的 ECS，帮你把证书配置到 Nginx/Apache。

验证是否成功

打开浏览器访问你的域名：https://your-domain.com
地址栏会显示小锁标志，说明证书生效了。

后续续期

阿里云的免费 DV 证书有效期是 3 个月，到期前你需要重新申请并部署。
如果不想每年手动操作，可以考虑 Let’s Encrypt 自动续期（但阿里云的免费证书已经足够方便）。

其他方式

最佳选择：使用 Let’s Encrypt 的 certbot工具，它可以自动获取和部署免费的 SSL 证书。
在您的服务器上运行类似以下命令（具体命令取决于您的 Web 服务器）：

# 示例：如果使用 Nginx
sudo certbot --nginx -d your-domain.com

# 示例：如果暂时没有 Web 服务器，可以用独立模式先获取证书
sudo certbot certonly --standalone -d your-domain.com

证书会自动续期，完全免费。

2.4 部署反向代理（Nginx）

这是关键一步。您不再直接通过 IP:3000访问 ChronoFrame，而是：
1. 用户访问 https://your-domain.com
2. Nginx（监听 443 端口）接收到 HTTPS 请求
3. Nginx 将请求转发给内部运行的 ChronoFrame（localhost:3000）
4. ChronoFrame 处理请求，返回给 Nginx，再返回给用户
这样做，Nginx 专门负责处理 SSL 加密/解密和静态文件，让 ChronoFrame 专心处理应用逻辑，性能更好也更安全。

操作文档里的 Nginx 配置示例 (/etc/nginx/nginx.conf)：

# 原有监听 80 端口的 server 块
server {
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    
    # 其它配置
    location / {
        proxy_pass http://127.0.0.1:8000;
    }
}

# 复制已有监听 80 端口的 server 块，新增为一个新的 server 块
server {
    # 将原有 listen 80 修改为 listen 80 改为 listen 443 ssl
    listen 443 ssl;
    # 原有 server_name，可继续新增更多当前证书支持的域名
    server_name yourdomain.com www.yourdomain.com;
    
    # ======================= 证书配置开始 =======================
    # 指定证书文件（中间证书可以拼接至该pem文件中），请将 /etc/nginx/cert/ssl.pem 替换为您实际使用的证书文件的绝对路径
    ssl_certificate /etc/nginx/cert/ssl.pem;
    # 指定私钥文档，请将 /etc/nginx/cert/ssl.key 替换为您实际使用的私钥文件的绝对路径
    ssl_certificate_key /etc/nginx/cert/ssl.key;
    # 配置 SSL 会话缓存，提高性能
    ssl_session_cache shared:SSL:1m;
    # 设置 SSL 会话超时时间
    ssl_session_timeout 5m;
    # 自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # 指定允许的 TLS 协议版本，TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差
    ssl_protocols TLSv1.2 TLSv1.3;
    # 优先使用服务端指定的加密套件
    ssl_prefer_server_ciphers on;
    # ======================= 证书配置结束 =======================
   
    # 其它配置
}

配置好后，重启 Nginx：sudo systemctl restart nginx。

三、踩坑记录

3.1 循环登录

注意这里的 Secure 属性！这个属性告诉浏览器：“这个 Cookie 只能通过 HTTPS 连接发送”。

但是您的网站是通过 HTTP (http://182.92.111.187:3000) 访问的，所以：

服务器设置了带有 Secure标志的会话 Cookie
浏览器接收到这个 Cookie，但因为当前是 HTTP 连接，浏览器拒绝存储这个 Cookie
下次请求时，浏览器没有发送会话 Cookie
服务器认为用户没有登录，重定向到登录页
循环开始…

换成域名{带SSL证书}就行了 nice~ 2025年09月29日22:22:57

3.2 照片上传失败

问题的根本原因是 CORS（跨源资源共享） 配置不正确。管理员需要为这个 Cloudflare R2 存储桶配置正确的 CORS 规则。

管理员需要进行的操作：

登录到 Cloudflare R2 的控制面板。
找到名为 chronoframe-album的存储桶。
进入其 设置（Settings） 或 权限（Permissions） 部分。
找到 CORS 配置（CORS Configuration） 区域。
添加一条新的 CORS 规则，允许你的 链接1的域名进行访问。配置通常如下所示：

[
  {
    "allowed_origins": ["https://photo.kalami.icu"],
    "allowed_methods": ["PUT", "GET", "DELETE", "HEAD"],
    "allowed_headers": ["*"],
    "max_age_seconds": 3600
  }
]

allowed_origins: 指定允许跨域访问的源（你的网站域名）。不能是通配符 *，必须明确指定，否则签名会失效。
allowed_methods: 必须包含 PUT，因为上传操作需要使用该方法。
allowed_headers: 通常允许所有头信息。
max_age_seconds: 浏览器可以缓存预检请求结果的时间，3600秒（1小时）是合理的。

四、最终结果

欢迎访问我的图片流：https://photo.kalami.icu/

五、后面规划

2025年10月14日20:50:45，暂时先想到：

Nginx conf配置的有点乱，都写在一个配置文件里了
把博客的网址也解析到kalami.icu这个域名下

博客热力图

Fri, 25 Apr 2025 19:19:25 GMT

背景

偶然间，看到一个大佬的博客，展示博客热力图，灵机一动，我也想加一个 hhh，于是乎，说干就干！

准备

采用 echarts 制作热力图，网址：Examples - Apache ECharts

想实现功能：展示最近一年的博客更新信息，鼠标 hover 时，显示 title、date 以及字数，点击后，可以跳转对应的博客内容。

开问 AI，很快嗷，给出了一个显示热力图的模版，给力。但莫名的就是热力图不显示图例。

解决

搞了大半天，依旧 AI 没解决。

最后自己改吧，发现大佬这里，创建了两个 map，一个存储了 date、字数信息，另一个存储了 date、title、字数以及 url 信息。

在最后，给热力图传输数据的格式，是第一个 map「日期和字数」即可，而第二个 map「日期、字数、title 和 url」是给通过 date 的这个 key 获取到字数、title 和 url 这三个值的。直接给热力图传递第二个 map 是会匹配不上，所以导致热力图不显示图例。

全部代码

---
// 首页 热力图
import { getCollection } from 'astro:content'
import type { CollectionEntry } from 'astro:content'
import { formatDate } from '@support/time'

const posts: CollectionEntry<'posts'>[] = (await getCollection('posts'))
const postsData = posts.map(post => ({
  date: formatDate(post.data.pubDate),
  wordCount: post.body.length,
  title: post.data.title,
  url: `/posts/${post.slug}/` 
}));
---

<div class="mx-auto w-4/5">
  <div id="heatmap" style="width: 100%;height:280px;"></div>
</div>
<!-- 通过CDN引入echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script define:vars={{ postsData }}>
  window.addEventListener('DOMContentLoaded', function() {
    var chartDom = document.getElementById('heatmap');
    if (!chartDom || !window.echarts) return;
    var myChart = window.echarts.init(chartDom);

    // 处理文章数据，按日期统计字数
    const dateMap = new Map();
    postsData.forEach(post => {
      const dateStr = post.date;
      const existing = dateMap.get(dateStr) || { wordCount: 0, titles: [], urls: [] };
      dateMap.set(dateStr, {
        wordCount: existing.wordCount + post.wordCount,
        title: post.title,  // 保留最新标题
        url: post.url      // 添加URL字段
      });
    });

    // 获取最大字数，用于设置visualMap的范围
    const maxWordCount = Math.max(...Array.from(dateMap.values()).map(item => item.wordCount));

    // 转换为热力图数据格式
    const dataArr = Array.from(dateMap).map(([date, { wordCount }]) => {
      return [date, wordCount];
    });

    // 计算日期范围
    function heatmap_width(months){
        var startDate = new Date();
        var mill = startDate.setMonth((startDate.getMonth() - months));
        var endDate = +new Date();
        startDate = +new Date(mill);
        endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
        startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
        var showmonth = [];
        showmonth.push([
            startDate,
            endDate
        ]);
        return showmonth
    };

    function getRangeArr() {
        const windowWidth = window.innerWidth;
        if (windowWidth >= 600) {
          return heatmap_width(12);
        }
        else if (windowWidth >= 400) {
          return heatmap_width(9);
        }
        else {
          return heatmap_width(6);
        }
    }
    
    const option = {
      title: {
        top: 20,  // 调整顶部间距适应新字体大小
        left: 'center',
        text: 'Blog Heat Map',
        textStyle: {
          fontSize: 30,  // 匹配 text-3xl (1.875rem = 30px)
          fontWeight: 'bold',
          color: '#1f2937', // 对应 text-neutral-800
          fontFamily: 'ui-sans-serif, system-ui' // 继承 Tailwind 默认字体
        }
      },
      visualMap: {
        type: 'piecewise',
        min: 0,
        max: maxWordCount,  // 确保这里有具体的数值
        orient: 'horizontal',
        left: 'center',
        top: 65,
        pieces: [
        //   {min: 0, max: 0, color: '#ebedf0'},          // 无数据时的颜色保持灰白
          {min: 1, max: 1000, color: '#ffd8cc'},       // 最浅的橙色
          {min: 1001, max: 3000, color: '#ffb199'},    // 浅橙色
          {min: 3001, max: 6000, color: '#ff8566'},    // 中等橙色
          {min: 6001, color: '#fa5a15'}                // 最深的橙色
        ]
      },
      tooltip: { // 鼠标悬停显示文章信息
        formatter: function (params) {
          // params.data[0]这里存储的是日期
          const post = dateMap.get(params.data[0]);
          return post.title + ' | ' + params.data[0] + ' | ' + post.wordCount + ' 字';
        }
      },
      calendar: {
        top: 120,
        left: 30,
        right: 30,
        cellSize: ['auto', 13],
        range: getRangeArr(),
        itemStyle: {
          borderWidth: 0.5
        },
        yearLabel: {
            show: true
        },
        dayLabel: {
          firstDay: 1, // 从周一开始
          nameMap: ['日', '一', '', '三', '', '五', '']
        },
        monthLabel: {
          nameMap: [
            '1月', '2月', '3月', '4月', '5月', '6月',
            '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        }
      },
      series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: dataArr
      }
    };

    myChart.setOption(option);

    // 添加点击事件监听（修复后的版本）
    myChart.on('click', function(params) {
      const post = dateMap.get(params.data[0]);
      const link = window.location.origin + post.url;
      window.open(link, '_blank').focus();
    });

  });
</script>

显示样式

点击即可跳转到对应的博客内容~

后续

~~深色模式匹配还待调整…「现在深色情况下，完全没法看。」~~ 更新 2025年04月27日19:12:26

用了claude-3.7-sonnet 模型去生成热力图的深色模式，真是太好用了 cursor，简简单单两句话搞定！用字节出的 trae 说的嘴皮子都磨破了，还不理解。

最终代码

---
// 首页 热力图
import { getCollection } from 'astro:content'
import type { CollectionEntry } from 'astro:content'
import { formatDate } from '@support/time'

const posts: CollectionEntry<'posts'>[] = (await getCollection('posts'))
const postsData = posts.map(post => ({
  date: formatDate(post.data.pubDate),
  wordCount: post.body.length,
  title: post.data.title,
  url: `/posts/${post.slug}/` 
}));
---

<div class="mx-auto w-4/5">
  <div id="heatmap" style="width: 100%;height:280px;"></div>
</div>
<!-- 通过CDN引入echarts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script define:vars={{ postsData }}>
  window.addEventListener('DOMContentLoaded', function() {
    var chartDom = document.getElementById('heatmap');
    if (!chartDom || !window.echarts) return;
    var myChart = window.echarts.init(chartDom);

    // 处理文章数据，按日期统计字数
    const dateMap = new Map();
    postsData.forEach(post => {
      const dateStr = post.date;
      const existing = dateMap.get(dateStr) || { wordCount: 0, titles: [], urls: [] };
      dateMap.set(dateStr, {
        wordCount: existing.wordCount + post.wordCount,
        title: post.title,  // 保留最新标题
        url: post.url      // 添加URL字段
      });
    });

    // 获取最大字数，用于设置visualMap的范围
    const maxWordCount = Math.max(...Array.from(dateMap.values()).map(item => item.wordCount));

    // 转换为热力图数据格式
    const dataArr = Array.from(dateMap).map(([date, { wordCount }]) => {
      return [date, wordCount];
    });

    // 计算日期范围
    function heatmap_width(months){
        var startDate = new Date();
        var mill = startDate.setMonth((startDate.getMonth() - months));
        var endDate = +new Date();
        startDate = +new Date(mill);
        endDate = echarts.format.formatTime('yyyy-MM-dd', endDate);
        startDate = echarts.format.formatTime('yyyy-MM-dd', startDate);
        var showmonth = [];
        showmonth.push([
            startDate,
            endDate
        ]);
        return showmonth
    };

    function getRangeArr() {
        const windowWidth = window.innerWidth;
        if (windowWidth >= 600) {
          return heatmap_width(12);
        }
        else if (windowWidth >= 400) {
          return heatmap_width(9);
        }
        else {
          return heatmap_width(6);
        }
    }
    
    // 检测是否为深色模式
    const isDarkMode = document.documentElement.classList.contains('dark');
    
    const option = {
      title: {
        top: 20,  // 调整顶部间距适应新字体大小
        left: 'center',
        text: 'Blog Heat Map',
        textStyle: {
          fontSize: 30,  // 匹配 text-3xl (1.875rem = 30px)
          fontWeight: 'bold',
          color: isDarkMode ? '#e5e5e5' : '#1f2937', // 深色模式使用 neutral-200，浅色模式使用 neutral-800
          fontFamily: 'ui-sans-serif, system-ui' // 继承 Tailwind 默认字体
        }
      },
      visualMap: {
        type: 'piecewise',
        min: 0,
        max: maxWordCount,  // 确保这里有具体的数值
        orient: 'horizontal',
        left: 'center',
        top: 65,
        pieces: [
          // {min: 0, max: 0, color: '#ebedf0'},          // 无数据时的颜色保持灰白
          {min: 1, max: 1000, color: '#ffd8cc'},       // 最浅的橙色
          {min: 1001, max: 3000, color: '#ffb199'},    // 浅橙色
          {min: 3001, max: 6000, color: '#ff8566'},    // 中等橙色
          {min: 6001, color: '#fa5a15'}                // 最深的橙色
        ],
        textStyle: {
          color: isDarkMode ? '#d4d4d4' : '#525252' // 深色模式使用 neutral-300，浅色模式使用 neutral-600
        }
      },
      tooltip: { // 鼠标悬停显示文章信息
        formatter: function (params) {
          // params.data[0]这里存储的是日期
          const post = dateMap.get(params.data[0]);
          return post.title + ' | ' + params.data[0] + ' | ' + post.wordCount + ' 字';
        }
      },
      calendar: {
        top: 120,
        left: 30,
        right: 30,
        cellSize: ['auto', 13],
        range: getRangeArr(),
        itemStyle: {
          borderWidth: 0.5
        },
        yearLabel: {
          show: true,
          color: isDarkMode ? '#d4d4d4' : '#525252' // 深色模式使用 neutral-300，浅色模式使用 neutral-600
        },
        dayLabel: {
          firstDay: 1, // 从周一开始
          nameMap: ['日', '一', '', '三', '', '五', ''],
          color: isDarkMode ? '#d4d4d4' : '#525252' // 深色模式使用 neutral-300，浅色模式使用 neutral-600
        },
        monthLabel: {
          nameMap: [
            '1月', '2月', '3月', '4月', '5月', '6月',
            '7月', '8月', '9月', '10月', '11月', '12月'
          ],
          color: isDarkMode ? '#d4d4d4' : '#525252' // 深色模式使用 neutral-300，浅色模式使用 neutral-600
        }
      },
      series: {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        data: dataArr
      }
    };

    myChart.setOption(option);

    // 添加点击事件监听（修复后的版本）
    myChart.on('click', function(params) {
      const post = dateMap.get(params.data[0]);
      const link = window.location.origin + post.url;
      window.open(link, '_blank').focus();
    });
    
    // 监听主题变化并重新渲染图表
    window.addEventListener('on-hs-appearance-change', function(e) {
      const isDark = e.detail === 'dark';
      
      // 更新文字颜色
      option.title.textStyle.color = isDark ? '#e5e5e5' : '#1f2937';
      option.visualMap.textStyle.color = isDark ? '#d4d4d4' : '#525252';
      option.calendar.yearLabel.color = isDark ? '#d4d4d4' : '#525252';
      option.calendar.dayLabel.color = isDark ? '#d4d4d4' : '#525252';
      option.calendar.monthLabel.color = isDark ? '#d4d4d4' : '#525252';
      
      // 重新应用配置
      myChart.setOption(option);
    });

  });
</script>

最终效果

二月碎碎念

Sat, 01 Mar 2025 00:00:00 GMT

一转眼二月过去了，过年回来也上了一个月班了，也发生了不少事情。

投资美股

首先终于开始定投美股-纳斯达克，不过刚开始投就下跌了，五六百元本金一天下跌最高竟然能到 13 元！真的高风险。道心不稳，于是乎紧急呼叫外援 DeepSeek，打了一针强心剂，下述是 DS 原话：

对于你当前定投纳斯达克100指数基金的决策，可以从以下几个角度理性分析：
一、关于定投的本质
1. 下跌时买入更多份额是定投的核心优势
每天投入70元，在价格下跌时确实能积累更多份额，长期来看会摊薄平均成本。例如，假设基金单位净值从100元跌到90元，同样的70元可以买到更多份额（0.7份→0.78份）。这种“越跌越买”的机制，是定投平滑市场波动的关键。
2. 无需精准择时
定投的核心逻辑是通过长期分批投入避免择时风险。历史数据显示，即使从市场高点开始定投，只要坚持足够长时间（通常1-2个周期），成本会被市场平均化。例如2000年互联网泡沫后坚持定投纳斯达克，至今回报率仍超500%。
二、当前市场环境分析
1. 短期波动因素
近期美股下跌可能受美联储加息预期、地缘政治风险或科技股估值回调影响。例如，2023年9月美联储点阵图暗示利率维持高位，导致成长股承压。但这种波动在历史上常见，纳指自2009年以来年均波动率达23%，但长期年化回报约15%。
2. 长期基本面支撑
纳斯达克100成分股（苹果、微软等）的盈利增速仍高于标普500，2023年Q2平均净利润增长12%。AI革命、云计算渗透率提升（预计2025年全球云计算市场达1.3万亿美元）等趋势未改变，长期增长逻辑仍在。
三、操作建议
1. 保持纪律，避免情绪化操作
统计显示，在2008年金融危机期间停止定投的投资者，相比持续投入者少获得43%的回报。建议设置自动扣款，减少每日查看账户频率，避免因短期波动做出非理性决策。
2. 优化定投策略的进阶方法  
  ○ 估值分位法：当纳斯达克100市盈率（当前约28倍）低于历史中位数（约23倍）时，可考虑将日定投额提升至100元；高于35倍时减半至35元。
  ○ 金字塔加仓：若指数从当前点位再下跌10%，可额外追加单次投资（如追加500元），但需预留至少6个月生活费的应急资金。
3. 风险对冲建议
配置10-20%的债券基金（如美国国债ETF）或黄金ETF，可在股市暴跌时降低组合波动。例如2022年纳指跌33%，同期美国国债ETF（TLT）上涨5.8%。
四、数据验证
● 历史回测：假设从2000年3月互联网泡沫顶峰开始每月定投纳斯达克100，截至2023年8月，年化回报率仍达7.2%；若在2008年10月金融危机底部一次性投入，年化回报为18.4%，但绝大多数人无法精准捕捉底部。
● 波动容忍度测试：如果你的70元/日定投占月收入≤10%，且能承受账户短期浮亏30%（如投入1万元后跌至7000元仍能正常生活），则当前策略可持续。
五、总结
建议行动：  
1. 保持每日70元定投不变，至少持续12个月。  
2. 当美联储首次降息信号明确时（可关注CME FedWatch工具），考虑将日定投额提升至100元。  
3. 每季度检查持仓，确保纳斯达克100占比不超过总资产的50%（分散至标普500或新兴市场）。
记住：定投是“时间的朋友”，而非“时机的奴隶”。你现在种下的每一份份额，都将在3-5年后的科技浪潮中开花结果。

尤其最后一句，定投是“时间的朋友”，而非“时机的奴隶”。你现在种下的每一份份额，都将在3-5年后的科技浪潮中开花结果。 醍醐灌顶！

不过也是开启定投后，才发现，原来我的承受亏损的比例，比我心理预期还要高一些（可能也是因为现在投入进来的少吧，才开始定投，每天 70 元，到 25 年低，也才投进来 1W 多点

ps：说个题外话，人赚不到认知以外的钱，入职公司要是全部工资都买股票的话，早就实现自由了 hhh，8 元到 50 元，翻了 6 倍多。

职业工作

工作上，年前就已经制定了回来后要做的事情，但计划不如变化快，回来的事情，转了 180 度弯，甚至要开始解客户端的 bug 了，年前定的事项甚至没有时间弄了（但这个才是本职工作呢。

而且现在也面向老板开发了，老板需求过来立马开弄，老板认为有价值，那就是有价值的，但也别说，跟着老板走，绩效应该总是不会差的吧

还谈了年终奖，就是什么时候会发啊，快没动力上班了（bushi

个人生活

游泳

年后回来的一个暴击，年前办了一个游泳健身年卡(两年)，因为确实便宜，离家也近，步行五分钟就到了，没有管住手，1800 就这么交出去了，没想到，年后回来人家就倒闭关店了。

本来以为这钱就打了水漂了，还好有个新装修的场馆接收了会员卡用户，但目前还在装修，三月底估计可以装修好，看着视频，貌似还不错，就是离家远了，得 3 公里。不过房租也快一年了，要是那边装修环境好的话，搬过去也是可以的。

吃一堑长一智，年底大促，疯狂降价，也不一定是好事，本以为是捡个大便宜，结果栽坑里了。

羽毛球

公司举办了羽毛球比赛，作为部门的一份子，也过去凑了个热闹，但打不过真心打不过，最后队伍输了，没有晋级 8 强，可能也有我失误的一份吧

读书观影

读书还是没有例行起来，立个 flag，三月份看完邓小平时代。

电影：看了三部比较不错的。

一个印度的《因果报应》
一个美国的《Young Woman and the Sea》「不太喜欢中文的版本泳者之心，应该是老娘与海 hhh」
一个中国的《骗骗喜欢你》，开怀大笑，就是纯笑，没有负担的笑

分享一下个人比较喜欢的电影类型：

科幻：宏大叙事，让我感觉自己的渺小与微不足道，没什么大不了的
悬疑：故事情节紧凑，逻辑性强，有压迫感
喜剧：开开心心的笑
传记：人物传记，伟大的人和事会激励我们向前进

博客的意义

很喜欢的一段话，来源：科技爱好者周刊（第 339 期）：代币是什么 - 阮一峰的网络日志

让我们坦率一点吧，你写了一篇博客，根本就没有人读。

至少，没有你想要的那么多读者。你把自己的想法倾注在文章，精心构思每个句子，选择合适的图片----然后什么反响也没有，没有点赞，没有分享，没有互动。

那么写博客的意义何在？

首先，关于写博客，有两个误解。一个是只要我写出了好文章，读者自然就会来。不，他们不会来，网上有几十亿篇博客，好像浩浩荡荡的飓风一样，你的博客只是风里的一片叶子，谁会注意呢。

另一个误解是如果没有人阅读，写作就是浪费时间。

博客有自己隐藏的价值。你写博客不是为了别人的掌声，而是因为你自己的需要。

博客使人头脑清晰。它帮你理清思绪，锐化视角。当你写作时，你会思考得更好。当你思考得更好时，你会做出更好的成果。

博客的目标读者，其实不是互联网人群，而是未来的你，你的文章会让你看到自己思想的演变。

此外，未来也许有一天，某个真正需要你文章的人，会找到它。一篇有深度的文章比一篇病毒式传播的文章，影响力更持久。

写博客有点像街头摄影。你手拿相机，漫步在城市中。你看到一个场景----一个充满光、影、人性的瞬间，就拍下了它。

没人关心你拍到了什么。但这不是你摄影的原因，你摄影是因为你看到了一些东西。

写博客也一样。你写博客是因为你在思考，因为你在观察，因为你希望把它放在某个地方。

如果有人读了，那就更好了。如果没有，工作还是完成了。

这才是真正的重点。

图床管理工具

Fri, 07 Feb 2025 16:54:22 GMT

背景

24 年底的时候创建了属于自己的博客，头一等大事就是解决图床问题，好在 Cloudflare 提供了 R2 方式可以进行存储。

网上找了个比较火的 PicGo 进行客户端配置，但是不知道为什么每次上传图片的时候大概率都会失败，找了网上的方式也没有解决，正在愁眉不展的时候…

偶然间发现了一个大佬的博客，使用 R2 + Page 部署免费的图床，二话不说，直接开整！

部署步骤

fork 仓库

项目地址：https://github.com/liangliangle/roim-picx

部署项目

进入 Cloudflare 控制台页面，Pages 选择连接到 Git，选择一个存储库（这里，有不知道怎么连接到 github 的，可以参考这个博客）

点击进行下一步，项目名称写自己喜欢的，保存并部署即可

创建 R2

写一个自己喜欢的名字，保存创建存储桶

创建完后进入设置，找到 R2.dev 子域，复制 URL，后续配置环境变量会用到

配置环境变量

回到我们刚刚部署好的 pages 项目中，进入设置，设置AUTH_TOKEN 和COPY_URL的变量名称，其中AUTH_TOKEN就相当于密码（自己想一个就好），我们每次登录都需要输入这个 token，而COPY_URL就是上面我们复制的 URL。

设置 R2

还是在 pages 的设置页面，找到可用的资源集，点击添加，选择我们刚刚好创建的 R2，之后我们上传删除都是对这个 R2 进行操作。

注意：配置环境变量之后，还是手动部署才会生效。

项目截图

基于上述，点进 pages 默认提供的项目 URL，即可看到部署成功的首页，输入AUTH_TOKEN进入管理页面

后续改动

二次魔改的项目其实已经比较完善了，在二次魔改的基础上，又按照我自己的想法，做一些些改动

管理页面图片降序

src/views/ManageImages.vue修改 listImages 方法：

const listImages = () => {
	loading.value = true
	requestListImages(<ImgReq> {
    limit: 100,
    delimiter: delimiter.value
  }).then((data) => {
    // console.log('返回的图片列表：', data.list); // 添加这行来查看数据
    uploadedImages.value = data.list.sort((a, b) => {
      if (!a.uploadedAt || !b.uploadedAt) return 0;  // 处理可能不存在 uploadedAt 的情况
      return b.uploadedAt - a.uploadedAt;
    });
    if (data.prefixes && data.prefixes.length) {
      prefixes.value = data.prefixes
      if (delimiter.value !== '/') {
        prefixes.value = ['/', ...data.prefixes]
      }
    } else {
      prefixes.value = ['/']
    }
  }).catch(() => {})
		.finally(() => {
			loading.value = false
		})
}

src/utils/types.ts修改 ImgItem 对象

export interface ImgItem {
	key : string
	url : string
	size: number
	copyUrl: string
	filename ?: string
	uploadedAt?: number  // 添加这个字段
}

functions/rest/routes/index.ts修改 urls return 字段

    const urls = objs.map(it => {
        return <ImgItem>{
            url: `/rest/${it.key}`,
            copyUrl: `${env.COPY_URL}/${it.key}`,
            key: it.key,
            size: it.size,
            uploadedAt: it.uploaded?.getTime() || 0  // 添加这行，使用 R2 对象的 uploaded 时间
        }
    })

图片压缩功能实现

链接：cloudflare 的 R2 + picgo：教你搭建免费图床并实现快速上传和压缩图片 | 科技Ins

使用 tinypng API 进行实现图片的压缩功能，每月有 500 次的免费压缩次数，够用。

申请 Tinypng API

链接：https://tinypng.com/developers

输入 name 和 email，会发送邮件，点击邮件中 visit dashboard 进入开发者后台，获取 API KEY，将这个 KEY 写入到 Cloudflare 的环境变量中，TINYPNG_API_KEY=you api key

图片压缩方法

// TinyPNG压缩图片
export async function compressImage(imageBuffer: ArrayBuffer, apiKey: string): Promise<ArrayBuffer> {
    if (!apiKey) {
        throw new Error('TinyPNG API key is not configured');
    }

    const auth = btoa(`api:${apiKey}`);
    
    // 上传图片到TinyPNG
    const uploadResponse = await fetch('https://api.tinify.com/shrink', {
        method: 'POST',
        headers: {
            'Authorization': `Basic ${auth}`,
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new Uint8Array(imageBuffer)
    });

    if (!uploadResponse.ok) {
        const error = await uploadResponse.json();
        throw new Error(`TinyPNG compression failed: ${error.message || uploadResponse.statusText}`);
    }

    const uploadResult = await uploadResponse.json();

    // 下载压缩后的图片
    const downloadResponse = await fetch(uploadResult.output.url);
    
    if (!downloadResponse.ok) {
        throw new Error(`Failed to download compressed image: ${downloadResponse.statusText}`);
    }

    return await downloadResponse.arrayBuffer();
}

上传图片前进行压缩

// batch upload file
router.post('/upload', auth, async (req: Request, env: Env) => {
    const files = await req.formData()
    const images = files.getAll("files")
    const errs = []
    const urls = Array<ImgItem>()
    
    for (let item of images) {
        const fileType = item.type
        if (!checkFileType(fileType)) {
            errs.push(`${fileType} not support.`)
            continue
        }

        try {
            // 读取文件内容
            const arrayBuffer = await item.arrayBuffer();
            
            // 压缩图片
            let compressedBuffer = arrayBuffer;
            if (fileType === 'image/jpeg' || fileType === 'image/png') {
                try {
                    compressedBuffer = await compressImage(arrayBuffer, env.TINYPNG_API_KEY);
                } catch (error) {
                    console.error('Image compression failed:', error);
                    // 如果压缩失败，使用原始图片继续
                }
            }

            const time = new Date().getTime()
            const objectPath = await getFilePath(fileType, time)
            
            const header = new Headers()
            header.set("content-type", fileType)
            header.set("content-length", `${compressedBuffer.byteLength}`)
            
            const object = await env.R2.put(objectPath, compressedBuffer, {
                httpMetadata: header,
            })

            if (object || object.key) {
                urls.push({
                    key: object.key,
                    size: object.size,
                    copyUrl: `${env.COPY_URL}/${object.key}`,
                    url: `/rest/${object.key}`,
                    filename: item.name
                })
            }
        } catch (error) {
            errs.push(`Failed to process ${item.name}: ${error.message}`);
            continue;
        }
    }
    
    return json(Build(urls, errs.toString()))
})

当然，依旧是大模型辅助(全部)开发，试用了下字节旗下的 Trae，还不错~

管理页面默认展示内容

图片管理页面，二级文件展示（现在只到年的目录，没有月份的目录，待定…

2024年终总结

Tue, 28 Jan 2025 00:00:00 GMT

旅行放松

新加坡

首先是新加坡，人生首次出国，第二次坐飞机去远地方，而且还是超长时间超长距离，一趟飞机下来时间竟然 6 个小时，不过也是值得的。落地新加坡后，已经是半夜了，在网上看了攻略说，新加坡樟宜机场很好睡，所以当机立断就在机场睡了一晚。

一个好玩的事情：特意找了一个比较暗比较偏的地方睡一觉，没想到，躺下的时候好好的，周围没有人，睡到中间，醒了一看，脚下多了一个人。不影响，接着睡，睡着睡着有一醒，脑袋上方又多两人 hhhh 吸人体质，可太有意思了。

一些好玩的事：

看完演唱会之后，溜达大概2天左右，去了动物园，去了鱼尾狮，去看了音乐喷泉表演（不过被雨浇了个落汤鸡

江西

然后就是国庆花了 7 天时间去了江西省溜达，首先去了南昌，在那里骑到了小电驴，真的很不错，本来去之前还在想要不要买个共享单车的周卡，到了之后完全没必要，直接小电驴贼快，还比打车方便，哪哪都有小电驴（为啥北京没有呢，sad）。在南昌骑小电驴，骑跨江大桥，老爽了！所以我骑了两趟，两个来回 hhh 之后去三清山爬山，找了一个爬山搭子，感觉也很不错，三清山真的很美，走了一个中圈，也不是很累，就是国庆人很多，我们起了一个大早，5 点多准备出发的，但还是遇到了交警封路，不让私家车开上山，只能做提供的大巴车，但山路确实也是挺险的，山路十八弯，不是说说而已，可能是怕私家车上山，开不明白，有问题的话就造成堵塞的。说来也巧，碰到了交警封路，在这之前的一天，偶然间刷小红书，说封路让摩的带上山的，我们这边刚被封住，从我们后面就来两个摩托车，其中一个被一个人叫走了，还剩下一个，我们赶忙叫住他，说带我们上山，他笑了一下说 50 两人，我在内心也笑了一下，和小红书里说的一样，一样的价钱 hhhh 我想我们可能是遇到同一个摩托车司机了。管他呢，直接坐上摩的一路上山，畅通无阻，我们看着这一路上好多车都被拦下来了，而我们一直开一直开，都说去往目的地是最幸福的。而我们这五公里的山路，就是最爽的！上山取号非常丝滑。在三清山这边还有个感悟就是黄色的桂花是真的很香很香，不知道有没有这个味道的香水。

之后去景德镇刚开始就不是很美丽了，就很莫名奇妙，还好客服给力。不过景德镇还是值得买买买的，很值，陶瓷也都很好看。最后去了九江，去看了东林大佛，在那里和义工学到了如何拜佛的手势。总之整个旅行还是很棒的！就是国庆人多了些 hhh

天津

当然还去了天津，毕竟离北京 30 分钟高铁的时间，和朋友一起溜达去的，就没啥说的了。

最后

希望 25 年的我，可以把北京周边两小时高铁的范围都覆盖了，开启徒步、爬山之旅以及逛吃逛吃。

演唱会

当然 2024 年最最最期待的演唱会就是 Taylor Swift 的演唱会啦~ 新加坡站，连开 6 场，新加坡你好福气啊，全程三个半小时，嗨到爆！！！我霉就是最牛的，几乎一首接着一首的唱，我们连坐下休息的时间都很少，不过太棒了，希望以后的时间里，霉霉多开演唱会，也来来中国嘛

不过今年感觉有点进入演唱会倦怠期了（霉霉的绝对不会有，我说的是其他的演唱会），24 年看了凤凰传奇、张杰、邓紫棋的演唱会（可惜断眉的没有抢到）感觉没有让我特别兴奋的情况产生.

目前为止，最喜欢的演唱会排名：第一必须是我霉；第二是 BP；第三是张杰 23 年看的那场。最想看的三场演唱会已经完成了两场了，但这第三场应该永远不会实现了，第三场则是 TFBOYS 的十周年演唱会，已经早早的过去了，没有抢到票，而且也只开了一场，有点遗憾，但是但是！人生嘛，就是有遗憾才美丽滴~

ps：就在今天早上(2025年02月06日)起来看手机的时候，发现BLACKPINK官宣了世巡~ 上次去还是23年，好快啊，希望我可以再次抢到。

运动

本年度开启了跑步、游泳之旅，虽然去年想学习的网球，还是没有安排上。但是学会了游泳~ 目前的话还是蛙泳，1000m 蛙泳耗时 40 分钟，最好的成绩了。未来要学会更多的泳姿，希望考一个深水证。

2024 年度，总共锻炼 52 次（ps 2025 继续加油！

跑步 33 次，56.84km
爬山徒步 1 次，11.35km
户外骑行 13 次，223.06km
游泳 5 次，4.23km

书籍

24 年的书籍还是看的挺多的，不过偏向于科幻题材的，为什么喜欢科幻题材呢，其实应该主要有两点，第一点远离了文学书籍中的一些黄色涉及，在读的时候，真的不想读到些黄色的描述，其中素食者里就有很多这样的描述，我就没看进去；其二呢，阅读科幻小说，叙事都很宏大，映射出个人的渺小，我喜欢这种渺小，让我觉得我的存在微不足道，无人在意。

在看的小说中，要是需要排序的话，首先就是刘慈欣的《球状闪电》人物刻画太细腻了，也太浪漫了，其次就是《魔鬼积木》里面的故事叙事有点网飞剧的赶脚了。24 年度其他的没在看了，还是应该多看看文化历史、社会科学、政治经济有关的书籍，这方面看的有点少了。

影视

影视这里，我就有的说的了，看了很多电影和电视剧，来个大总结（不过都是在微博里发的视频，后面感觉可以用上豆瓣，这样子还能写一下自己的感想啥的，看的品类还是不过，还是得多看看纪录片，看看多个国家的，影视作品。（不过，总体来说，看的还挺多的

播客

今年博客可是我长时间听的第一年了吧算是，听过好多，我的年度博客呢就是——不止金钱，通过这个，开始了我的投资理财知识学习。

也听过博客，重新听了一遍三体。TSP 怪奇档案确实讲得不错。

25 年希望可以开始属于自己的播客，有关投资？可能，其实名字都想好了，变钱记 hhhhh

摄影

关于摄影，用 z30 拍的照片，通过 yiyin 这个 app，转成了比较好看的图片，并制作成视频上传到 B站上，此处是链接：

尼康Z30 | 一周岁生日快乐 | 来到我身边已经一年啦

最后

最后的最后，引用《好东西》里的一个台词，新的一年里，希望自己正直、勇敢、有阅读量！

部署博客记录

Thu, 09 Jan 2025 20:54:00 GMT

💡 起因：在逛 2024 年终分享的时候，偶然看见一个大佬的分享，之后看他的主页，翻了翻，发现有一个开源的博客文章，如何快速搭建自己的博客网站，于是乎，按照步骤，开始部署开发属于自己的博客（ps：站在巨人的肩膀上看世界）

构建步骤

fork gblog 开源项目

开源项目 gblog 地址：https://github.com/godruoyi/gblog

fork 时，注意：取消「Copy the astro branch only」我们需要用 gblog-template 这个分支进行构建

Cloudflare 构建部署

最后！构建完成，等待一会儿，点击默认的域名访问，就可以看到属于自己的博客了~

总结

感慨，可真简单啊，在大学的时候，自己就有想法，弄一个属于自己的博客，但苦于前后端都得干，还得自己搞域名，没有那个动力，但是现在纯前端，托管云服务，可太行了。

在此，立个 flag，2025 年，希望我可以更新 10 个博客文章，不限内容题材，冲啊！

使用方法

本地部署

vscode 克隆项目，顺便按照 jetbrains 的风格配置了下页面，终于顺眼了一些

打开终端，在项目的根目录，执行命令，即可访问链接：http://localhost:4321/，进行本地调试

# 进入 myblog 文件夹
cd myblog

# 安装博客所需依赖
npm install

# 在本地启动一个开发预览版本
npm run dev

云端编辑

在项目的 github 页面，按 .（点，英文状态下的点），即可进入编辑页面，可以对 blog 进行小调整

自定义

添加评论

按照这个博客的内容，一步一步操作即可，或者 giscus 网址也可以，https://giscus.app/zh-CN

找到 src/config.ts 修改其中的 comment 对象即可

Comment: {
    // todo: should I use meta or process?
    // process reports an error when used locally,
    // and meta cannot retrieve environment variables in Cloudflare environment.
    // enable: !!(import.meta.env.COMMENT_ENABLE),
    enable: true,

    // please visit https://giscus.app/ to learn how to configure it.
    // You can also check out this article: https://liruifengv.com/posts/add-comments-to-astro/.
    giscus: {
        repo: 'DaFeiTwo/gblog',
        repoId: 'R_xxxg',
        category: 'Announcements',
        categoryId: 'DIC_xxxJ',
        darkThem: 'noborder_gray',
        lightThem: 'light',
    },
},

之后就可以拥有评论啦，注意：本地部署测试是不会出来的，需要推到远程部署

添加目录

完完全全交由 cursor、ChatGPT 以及 deepseek 开发 hhh，两个外籍员工，一个国内员工，开发的还不错，我这个完全不怎么会前端开发的人也开发出了「目录功能」（仅仅了解过 js css html）

下面则是生成的代码：

<!-- 目录 -->
<div class="hidden lg:block fixed top-[7.5rem] right-[max(0px,calc((100vw-105rem)/2))] w-[16rem] pr-4">
    <div class="h-full">
        <div class="bg-white dark:bg-neutral-900/30 p-4 rounded-lg shadow-sm border border-neutral-200 dark:border-neutral-700" 
                style="max-height: calc(100vh - 32rem); height: auto;">
            <div class="flex items-center justify-between mb-2">
                <h3 class="text-lg font-semibold text-neutral-800 dark:text-neutral-200">目录</h3>
                <button id="toc-toggle" class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            <div id="toc-content" class="space-y-2 dark:text-neutral-200 overflow-y-auto" style="max-height: calc(100vh - 36rem);">
                {headings && headings.length > 0 ? (
                    headings.map((heading) => (
                        <a
                            href={`#${heading.slug}`}
                            class={`
                                block text-sm hover:text-orange-500 transition-colors duration-200
                                ${heading.depth === 1 ? 'font-bold text-base pl-0' : ''}
                                ${heading.depth === 2 ? 'font-semibold pl-2' : ''}
                                ${heading.depth === 3 ? 'pl-4' : ''}
                                ${heading.depth === 4 ? 'pl-6 text-[13px]' : ''}
                                ${heading.depth === 5 ? 'pl-8 text-[13px]' : ''}
                                ${heading.depth === 6 ? 'pl-10 text-[13px]' : ''}
                                ${heading.depth > 1 ? 'text-neutral-600 dark:text-neutral-400' : 'text-neutral-800 dark:text-neutral-200'}
                            `}
                        >
                            <span class="flex items-center">
                                {heading.depth > 1 && (
                                    <span class="mr-2 text-neutral-400 dark:text-neutral-600">
                                        {'-'.repeat(heading.depth - 1)}
                                    </span>
                                )}
                                {heading.text}
                            </span>
                        </a>
                    ))
                ) : (
                    <p class="text-sm text-neutral-500 dark:text-neutral-400">暂无目录</p>
                )}
            </div>
        </div>
    </div>
</div>

<script>
    // 添加目录折叠功能
    const tocToggle = document.getElementById('toc-toggle');
    const tocContent = document.getElementById('toc-content');
    let isExpanded = true;

    tocToggle?.addEventListener('click', () => {
        isExpanded = !isExpanded;
        if (tocContent) {
            tocContent.style.display = isExpanded ? 'block' : 'none';
        }
        if (tocToggle) {
            tocToggle.innerHTML = isExpanded 
                ? '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>'
                : '<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>';
        }
    });

    // 修改目录项点击滚动效果
    document.querySelectorAll('#toc-content a').forEach(anchor => {
        anchor.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = anchor.getAttribute('href')?.slice(1);
            const targetElement = document.getElementById(targetId || '');
            if (targetElement) {
                const headerOffset = 100; // 设置偏移量，根据您的导航栏高度调整
                const elementPosition = targetElement.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;

                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });

    // 添加目录滚动处理
    if (tocContent) {
        // 启用鼠标滚轮滚动
        tocContent.addEventListener('wheel', (e) => {
            // 阻止事件冒泡，避免触发整个页面的滚动
            e.stopPropagation();
            
            const delta = e.deltaY;
            tocContent.scrollTop += delta;
            
            // 如果已经到达顶部或底部，允许页面滚动
            if (
                (tocContent.scrollTop === 0 && delta < 0) || 
                (tocContent.scrollTop + tocContent.clientHeight === tocContent.scrollHeight && delta > 0)
            ) {
                e.preventDefault();
            }
        });
    }
</script>

<style is:inline>
    html.dark .astro-code,
    html.dark .astro-code span {
        color: var(--shiki-dark) !important;
        background-color: var(--shiki-dark-bg) !important;
    }

    /* 修改滚动条样式 */
    #toc-content {
        /* 默认隐藏滚动条 */
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    #toc-content::-webkit-scrollbar {
        width: 6px;
        background: transparent;
        /* 默认隐藏 */
        opacity: 0;
        transition: opacity 0.3s;
    }

    #toc-content::-webkit-scrollbar-track {
        background: transparent;
    }

    #toc-content::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.5);
        border-radius: 3px;
    }

    html.dark #toc-content::-webkit-scrollbar-thumb {
        background-color: rgba(155, 155, 155, 0.3);
    }

    /* 鼠标悬停时显示滚动条 */
    #toc-content:hover::-webkit-scrollbar {
        opacity: 1;
    }

    /* 确保内容可以滚动 */
    #toc-content {
        overflow-y: auto;
        overflow-x: hidden;
    }

    /* 添加新的响应式布局样式 */
    @media (min-width: 1280px) and (max-width: 1536px) {
        .right-\[max\(0px\,calc\(\(100vw-80rem\)\/2\)\)\] {
            right: max(1rem, calc((100vw - 80rem)/2));
        }
    }

    @media (min-width: 1536px) {
        .right-\[max\(0px\,calc\(\(100vw-80rem\)\/2\)\)\] {
            right: calc((100vw - 80rem)/2);
        }
    }

    /* 确保目录容器在较小屏幕上有合适的间距 */
    @media (max-width: 1280px) {
        .right-\[max\(0px\,calc\(\(100vw-80rem\)\/2\)\)\] {
            right: 1rem;
        }
    }

    /* 为标题添加滚动时的额外上边距 */
    :target {
        scroll-margin-top: 100px; // 与 headerOffset 相同的值
    }
</style>

添加高亮

添加语雀或飞书高亮样式

本地部署看页面是ok的，不知道为啥cloudflare部署后样式就变了，待研究。

博客日期修改格式

目的：将博客首页的时间格式4 months ago改为2025-01-09 20:54:00

文件：[…slug].astro

const pubDate = new Date(post.data.pubDate);
const formattedDate = pubDate.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false, // 24小时制
}).replace(/\//g, '-');
const relativeTime = timeago(post.data.pubDate); //显示为几天前

并在下方的 HTML 里进行引用

<li class="inline-flex items-center text-sm text-neutral-500 hover:text-neutral-600 focus:outline-none focus:text-neutral-600 dark:text-neutral-500 dark:hover:text-neutral-400 dark:focus:text-neutral-400">
    {formattedDate}
    <svg
        class="flex-shrink-0 size-5 text-neutral-500 dark:text-neutral-600 mx-2"
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        aria-hidden="true"
    >
        <path d="M6 13L10 3" stroke="currentColor" stroke-linecap="round"></path>
    </svg>
</li>

CodeIsland「码屿」

photo网址证书重新签发

一、背景

二、步骤

登录阿里云控制台

购买免费证书

部署下发证书

nginx 中的配置目录

cat nginx.conf

是否上传成功

重启 nginx

三、踩坑记录

chronoframe图片展示流

最终方案

一、部署 chronoframe 步骤

1.1 更新软件源

1.2 安装 docker compose

1.3 创建项目目录

1.4 配置 .env 文件

1.5 配置compose.yml

1.6 启动服务

1.7 访问

二、域名配置

2.1 购买域名

2.2 配置域名解析

2.3 申请免费 SSL 证书

阿里云手动配置

申请免费 SSL 证书

部署证书到 ECS

验证是否成功

后续续期

其他方式

2.4 部署反向代理（Nginx）

三、踩坑记录

3.1 循环登录

3.2 照片上传失败

四、最终结果

五、后面规划

博客热力图

背景

准备

解决

全部代码

显示样式

后续

最终代码

最终效果

二月碎碎念

投资美股

职业工作

个人生活

游泳

羽毛球

读书观影

博客的意义

图床管理工具

背景

部署步骤

fork 仓库

部署项目

创建 R2

配置环境变量

设置 R2

项目截图

后续改动

管理页面图片降序

图片压缩功能实现

申请 Tinypng API

图片压缩方法

上传图片前进行压缩

管理页面默认展示内容

相关链接：

2024年终总结

旅行放松

新加坡

江西

天津

最后

演唱会

运动