<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>技术成长笔记 - 我的技术碎碎念</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f8f9fa;
            max-width: 800px;
            margin: 0 auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
            min-height: 95vh;
        }

        header {
            text-align: center;
            margin-bottom: 20px;
            padding-top: 20px;
        }

        header h1 {
            color: #333;
            font-size: 1.8em;
            cursor: pointer;
        }

        header p {
            color: #666;
            font-size: 1em;
        }

        .container {
            flex: 1;
        }

        .article-list {
            list-style: none;
            padding: 0;
        }

        .article-item {
            background-color: #fff;
            margin-bottom: 15px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.2s;
            cursor: pointer;
        }

        .article-item:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        }

        .article-title {
            color: #0056b3;
            font-size: 1.3em;
            margin-top: 0;
            margin-bottom: 10px;
        }

        .article-desc {
            color: #666;
            font-size: 0.95em;
            margin-bottom: 10px;
        }

        .article-meta {
            font-size: 0.85em;
            color: #999;
            text-align: right;
        }

        #detail-view {
            display: none;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-top: 10px;
        }

        .back-btn {
            display: inline-block;
            padding: 8px 15px;
            background-color: #f0f0f0;
            color: #333;
            text-decoration: none;
            border-radius: 4px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: background 0.2s;
            font-size: 0.9em;
        }

        .back-btn:hover {
            background-color: #e0e0e0;
        }

        .detail-title {
            font-size: 1.5em;
            color: #222;
            margin-top: 0;
        }

        .detail-meta {
            font-size: 0.85em;
            color: #999;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        .detail-content {
            color: #444;
            line-height: 1.8;
            font-size: 1.05em;
        }

        .detail-content p {
            margin-bottom: 15px;
        }

        .detail-content code {
            background-color: #f4f4f4;
            padding: 2px 4px;
            border-radius: 4px;
            color: #d63384;
            font-family: monospace;
        }

        .detail-content pre {
            background-color: #f4f4f4;
            padding: 15px;
            border-radius: 6px;
            overflow-x: auto;
            color: #333;
            line-height: 1.4;
        }

        .detail-content pre code {
            background-color: transparent;
            padding: 0;
            color: inherit;
        }

        footer {
            text-align: center;
            padding: 20px 0;
            margin-top: 30px;
            border-top: 1px solid #eee;
            font-size: 0.9em;
            color: #777;
        }

        footer a {
            color: #777;
            text-decoration: none;
        }

        footer a:hover {
            color: #0056b3;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <header>
        <h1 onclick="showList()">我的技术成长笔记</h1>
        <p>随手记录，日常的技术探索与学习心得。</p>
    </header>

    <div class="container">
        <!-- 列表视图 -->
        <ul class="article-list" id="list-view">
            <li class="article-item" onclick="showDetail(0)">
                <h2 class="article-title">记一次 Nginx 代理跨域问题的解决过程</h2>
                <div class="article-desc">
                    在前后端分离的开发日常中，跨域是个绕不开的话题。今天记录一下使用Nginx配置解决OPTIONS预检请求以及真实请求头暴露的方法。
                </div>
                <div class="article-meta">2026-02-18 发布</div>
            </li>
            <li class="article-item" onclick="showDetail(1)">
                <h2 class="article-title">Docker 容器时区同步的几种方案比较</h2>
                <div class="article-desc">
                    Java应用扔进Docker后，常常发现打印的日志时间比宿主机晚了8个小时。这是因为容器内默认使用UTC时区，这里总结了修改Dockerfile、映射宿主机时区文件等三种实用方式。
                </div>
                <div class="article-meta">2025-11-22 发布</div>
            </li>
            <li class="article-item" onclick="showDetail(2)">
                <h2 class="article-title">深入理解 JavaScript 的事件循环机制 (Event Loop)</h2>
                <div class="article-desc">宏任务和微任务总是让人头疼。梳理了一遍 V8 引擎中的事件流转过程，从 setTimeout 到
                    Promise 队列，附带一些常见的输出题解析。
                </div>
                <div class="article-meta">2025-08-05 发布</div>
            </li>
        </ul>

        <!-- 详情视图 -->
        <div id="detail-view">
            <div class="back-btn" onclick="showList()">← 返回列表</div>
            <h2 class="detail-title" id="d-title"></h2>
            <div class="detail-meta" id="d-meta"></div>
            <div class="detail-content" id="d-content"></div>
        </div>
    </div>

    <footer>
        <div class="icp">
            <!-- 根据您的要求配置了工信部的超链接及正确的备案号 -->
            <a href="https://beian.miit.gov.cn/" target="_blank">豫ICP备2026007933号</a>
        </div>
    </footer>

    <script>
        // 伪装的内容数据源
        const articles = [
            {
                title: "记一次 Nginx 代理跨域问题的解决过程",
                meta: "2026-02-18 发布",
                content: `
                    <p>当我们的前端应用部署在 <code>http://localhost:8080</code>，而后端应用跑在 <code>http://localhost:3000</code> 时，Ajax 请求必然会遇到跨域限制。这通常由浏览器的同源策略（Same-Origin Policy）强行拦截。</p>
                    <p>在不修改后端代码的情况下，最优雅的做法是用 <b>Nginx 做反向代理</b>。</p>
                    <p>我们在 nginx.conf 中增加 server 块监听 80 端口，配置如下：</p>
<pre><code>location /api/ {
    proxy_pass http://localhost:3000;
    
    # 允许所有域名跨域
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';
    
    # 预检请求直接返回204
    if ($request_method = 'OPTIONS') {
        return 204;
    }
}</code></pre>
                    <p>这样前端依然请求本域下的 <code>/api/...</code>，Nginx 无缝将请求转接给后端，浏览器便不再产生安全性抱怨了。</p>
                `
            },
            {
                title: "Docker 容器时区同步的几种方案比较",
                meta: "2025-11-22 发布",
                content: `
                    <p>相信大家部署服务时都遇到过 Java 日志慢 8 小时的问题。容器环境默认读取 UTC 标准时间，以下提供我常用的修复策略。</p>
                    <h3>方案一：挂载 localtime (推荐)</h3>
                    <p>在执行 <code>docker run</code> 时，直接将宿主机的时区文件挂载到容器内：</p>
<pre><code>docker run -v /etc/localtime:/etc/localtime:ro ...</code></pre>
                    <p>这种方式最方便，只要宿主机时间对，容器里的时间就绝对不会错。</p>
                    <h3>方案二：修改 Dockerfile 设置系统变量</h3>
                    <p>如果是自己 build 镜像，可以通过环境变量强制设定：</p>
<pre><code>ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone</code></pre>
                    <p>对于在 Kubernetes 等编排工具下不方便轻易挂载宿主机实体文件时，这种内建的做法最稳妥。</p>
                `
            },
            {
                title: "深入理解 JavaScript 的事件循环机制 (Event Loop)",
                meta: "2025-08-05 发布",
                content: `
                    <p>我们知道 JS 是单线程语言。为了避免长耗时的 I/O 操作阻塞主线程，引入了事件循环。主要的执行栈包含了：</p>
                    <ul>
                        <li><b>宏任务 (Macrotask)</b>：整体 script 代码，setTimeout，setInterval，I/O...</li>
                        <li><b>微任务 (Microtask)</b>：Promise.then，MutationObserver，process.nextTick...</li>
                    </ul>
                    <p>执行逻辑是：清空当前宏任务中的所有同步代码 -> 然后清空当前执行栈下所有的微任务队列 -> 渲染页面 -> 提取下一个宏任务以此循环。</p>
                    <p>务须记住：微任务的优先级高于下一次宏任务的执行。遇到 <code>Promise</code> 要明白它的 executor 函数是同步执行的，但其生成的 <code>then()</code> 方法会被推进微任务队列排队等待当前宏任务执行完毕后立即执行。</p>
                `
            }
        ];

        // 显示详情
        function showDetail(index) {
            document.getElementById('list-view').style.display = 'none';
            document.getElementById('detail-view').style.display = 'block';

            const item = articles[index];
            document.getElementById('d-title').innerText = item.title;
            document.getElementById('d-meta').innerText = item.meta;
            document.getElementById('d-content').innerHTML = item.content;

            window.scrollTo(0, 0);
        }

        // 返回列表
        function showList() {
            document.getElementById('detail-view').style.display = 'none';
            document.getElementById('list-view').style.display = 'block';

            // 清理内容防止闪烁
            setTimeout(() => {
                if (document.getElementById('detail-view').style.display === 'none') {
                    document.getElementById('d-title').innerText = '';
                    document.getElementById('d-content').innerHTML = '';
                }
            }, 200);
        }
    </script>
</body>

</html>