title: Argon 主题博客 1:1 复刻指南 (joeyblog风格)
date: {{date}}
tags:
– WordPress
– Argon
– 静态博客

– SOP

[!info] 核心工作流提醒
所有修改和写作都在 LocalWP 本地完成。
流程：本地修改 -> Simply Static 静态化 -> GitHub Desktop 推送 -> Cloudflare 自动部署。

🛠️ 一、 首页“打字机效果”实现

要实现带有光标闪烁、自动回删的打字机特效，我们需要用到 Argon 主题的自定义功能。

1. 设置副标题占位符：
   • 进入 WP 后台 -> 外观 -> Argon 主题设置 -> 页头。
   • 找到 Banner 副标题，清空原来的文字，填入以下 HTML 代码：

     <span id="typed-subtitle"></span>
     

2. 注入打字机脚本：
   • 在 Argon 主题设置 的左侧菜单往下拉，找到 脚本 (Scripts)。
   • 在 页脚自定义 HTML (Footer Custom HTML) 的框里，粘贴以下代码：

     
     <script src="[https://cdn.jsdelivr.net/npm/typed.js@2.0.12](https://cdn.jsdelivr.net/npm/typed.js@2.0.12)"></script>
     <script>
     document.addEventListener("DOMContentLoaded", function() {
      var typed = new Typed('#typed-subtitle', {
        // 在这里修改你想轮播的句子，用英文单引号包围，逗号隔开
        strings: ['没有BUG的代码是不完美的！', '一个喜欢研究技术的男孩', 'Welcome to Joey Blog!'],
        typeSpeed: 60,   // 打印速度
        backSpeed: 30,   // 回删速度
        startDelay: 500, // 开始前的延迟
        backDelay: 2000, // 停留多长时间后开始回删
        loop: true,      // 是否无限循环
        showCursor: true, // 是否显示闪烁的光标
        cursorChar: '|'   // 光标的形状
      });
     });
     </script>
     

🎨 二、 核心外观与视觉配置

[!tip] 视觉核心：毛玻璃与背景图的配合
目标网站干净的高级感，来源于高饱和度的背景图和半透明卡片的对比。

• 主题色设置： 进入 主题设置 -> 基本，选择蓝色系（如 #2193b0），勾选“跟随页面背景图自动调整”。
• 毛玻璃开启： 进入 主题设置 -> 卡片，勾选“启用毛玻璃效果”，模糊半径建议设为 12px。
• Banner 背景图： 进入 主题设置 -> 页头，上传一张清晰度高、色彩丰富的风景/抽象背景图（这是卡片透出好看颜色的关键）。
• 隐藏多余元素： 进入 主题设置 -> 文章，取消勾选“显示文章目录”。

📇 三、 侧边栏“精致名片”复刻

目标网站没有使用原生的排版，我们用自定义 HTML 强行复刻视觉比例。

1. 进入后台 -> 外观 -> 小工具。
2. 在 左侧栏小工具 中添加一个 自定义 HTML 区块。
3. 标题留空，直接粘贴以下代码（数字可手动修改）：

   “`html