我的 CSS 设置

Dayu

2025年10月27日 18:35

续《如果你想使用这套 WordPress 主题》，最近更新了博客的 CSS 设置，分享给有需要的朋友。

整体设计以文字为主，少装饰性元素。不用颜色引导，而用灰阶节奏和留白。

ChatGPT 辅助设计，有问题可以帮忙反馈在评论区！

以下是完整 CSS：

html,
body {
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  font-weight: 400;
  line-height: 1.6;
  color: #222;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* ---------- 桌面基础版 ---------- */
.entry-content {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  font-size: 1rem;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #222;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
}

.entry-content p {
  margin: 1.2em 0;
  text-indent: 1.8em;
  word-break: break-word;
  overflow-wrap: break-word;
}

.entry-content h1 + p,
.entry-content h2 + p,
.entry-content h3 + p,
.entry-content h4 + p {
  text-indent: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: "Noto Serif SC", "Source Han Serif SC", serif;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
  letter-spacing: 0.01em;
  margin: 2.4em 0 1em;
  text-indent: 0;
}

.entry-content h1 {
  font-size: 1.6rem;
  text-align: center;
  line-height: 1.3;
  margin: 0 0 2rem;
  color: #000;
}

.entry-content h2 {
  font-size: 1.25rem;
  border-left: 3px solid #000;
  padding-left: 0.6em;
}

.entry-content h3 {
  font-size: 1.1rem;
  color: #444;
  border-left: 2px solid #aaa;
  padding-left: 0.6em;
}

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-size: 1rem;
  color: #444;
  border-left: none;
  padding-left: 0;
  margin-top: 2em;
}

/* 链接 */
.entry-content a {
  color: #555;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: color 0.2s ease, text-underline-offset 0.2s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0.05);
}
.entry-content a:hover,
.entry-content a:focus-visible {
  color: #000;
  text-underline-offset: 4px;
  outline: none;
}
.entry-content a:focus-visible {
  background-color: rgba(0,0,0,0.03);
}

/* 列表 */
.entry-content ul,
.entry-content ol {
  margin: 1.2em 0 1.2em 1.8em;
  padding: 0;
  line-height: 1.8;
  color: #222;
}
.entry-content li {
  margin: 0.4em 0;
  padding-left: 0.3em;
  text-indent: 0;
  line-height: 1.8;
}

/* 引用块 */
.entry-content blockquote {
  margin: 2em 0;
  padding: 0.8em 1em;
  border-left: 3px solid #aaa;
  background-color: #fafafa;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
}
.entry-content blockquote p {
  margin: 0.8em 0;
  text-indent: 0;
}
.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

/* 行内代码 & 代码块 */
.entry-content code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9em;
  background-color: #f5f5f5;
  padding: 0.15em 0.4em;
  border-radius: 3px;
  color: #000;
}
.entry-content pre {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 0.9rem;
  line-height: 1.6;
  background-color: #f5f5f5;
  color: #000;
  padding: 1em;
  border-radius: 4px;
  overflow-x: auto;
  margin: 2em 0;
  border: 1px solid #e0e0e0;
  -webkit-overflow-scrolling: touch;
}

/* 图片与图注 */
.entry-content figure {
  margin: 2em auto;
  text-align: center;
  max-width: 100%;
}
.entry-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 4px;
}
.entry-content figcaption {
  text-align: center;
  color: #666;
  font-size: 0.9em;
  line-height: 1.5;
  margin-top: 0.6em;
  letter-spacing: 0.02em;
}

/* 分隔线 */
.entry-content hr {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 3rem auto;
  width: 60px;
}

/* 表格 */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-size: 0.95rem;
  line-height: 1.6;
}
.entry-content th,
.entry-content td {
  border: 1px solid #ddd;
  padding: 0.6em 0.8em;
  text-align: left;
  vertical-align: top;
}
.entry-content th {
  background-color: #fafafa;
  font-weight: 500;
  color: #000;
}

/* ---------------- 手机优化 ---------------- */
@media (max-width: 600px) {
  .entry-content {
    font-size: 1.1rem;
    line-height: 1.9;
    padding: 1.5rem 1.25rem 3rem; /* 左右加宽，让列表不贴边 */
    max-width: 100%;
  }

  .entry-content p {
    margin: 1em 0;
  }

  .entry-content h2,
  .entry-content h3,
  .entry-content h4 {
    margin: 1.8em 0 0.6em;
  }

  .entry-content h2 {
    border-left-width: 2px;
    padding-left: 0.5em;
    font-size: 1.2rem;
    line-height: 1.4;
  }

  .entry-content h3 {
    border-left-width: 2px;
    padding-left: 0.5em;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .entry-content blockquote {
    margin: 1.5em 0;
    padding: 0.8em;
    border-left-width: 2px;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .entry-content ul,
  .entry-content ol {
    margin-left: 2.2em;   /* 增大缩进，避免子弹点靠屏幕 */
    margin-right: 0.8em;  /* 给右侧留白 */
    padding-left: 0.6em;
  }

  .entry-content li {
    padding-left: 0.4em;
    line-height: 1.8;
  }

  .entry-content pre {
    padding: 0.8em;
    font-size: 0.9rem;
    border-radius: 3px;
  }

  .entry-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .entry-content th,
  .entry-content td {
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  .entry-content hr {
    margin: 1.8rem auto;
    width: 50px;
  }

  .entry-content a {
    padding: 0.1em 0.15em;
  }
}

/* ---------------- 平板优化 ---------------- */
@media (min-width: 600px) and (max-width: 1024px) {
  .entry-content {
    max-width: 640px;
    font-size: 1.075rem;
    line-height: 1.85;
    padding: 2rem 1.5rem 4rem;
  }

  .entry-content h2 {
    border-left-width: 2px;
    padding-left: 0.6em;
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .entry-content h3 {
    border-left-width: 2px;
    border-left-color: #999;
    padding-left: 0.6em;
    font-size: 1.15rem;
    line-height: 1.45;
  }

  .entry-content blockquote {
    margin: 1.8em 0;
    padding: 1em;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .entry-content pre {
    font-size: 0.9rem;
    padding: 1em;
  }
}

Dayu
WordPress 插件 – 旅行地图 WP Travel Map 2025年9月2日 04:57

WordPress 插件 – 旅行地图 WP Travel Map

Dayu

2025年9月2日 04:57

最近又做了一个极简风格的 WordPress 旅行地图插件，用于记录去过的地方。

展示页：https://anotherdayu.com/travelmap/ （近期更新调试中）

提醒：Mapbox 地图部分有合规风险，服务器在境内做过备案的博主谨慎使用，有关站风险！

功能特点

通过短代码在任何页面显示地图
Excel 导入导出
智能地点搜索
多种地图类型，支持 2D 或 3D
可以在地点描述中添加链接（可直接跳转），比如在这里写的博客

安装

前往 Github 下载插件：https://github.com/DayuGuo/wp_travel_map
在 WordPress 后台安装并激活插件
进入WordPress 左侧边栏的「旅行地图 > 设置」，配置 Mapbox 访问令牌。需要注册 mapbox 账号，每月有 5w 次免费载入次数，个人博客完全够用。
使用「旅行地图」菜单管理地点
在页面或文章中使用短代码显示地图，如下：

Dayu
WordPress 友情链接插件 Simple 版 2025年8月27日 21:19

WordPress 友情链接插件 Simple 版

Dayu

2025年8月27日 21:19

这个项目基于并 fork 于 wp_friendlinks_manager（作者 @Jack），仅修改了样式和风格以适配自己的博客。所以名称就叫 wp_friendlinks_manager_simple。

展示页面: 友邻 – Another Dayu

增加的核心功能：如半年以上未更新，会在友邻的名称后加 🕊 小鸽子 emoji。

下载地址：https://github.com/DayuGuo/wp_friendlinks_manager_simple 。

教程见 Jack 的博客：又一个 WordPress 友情链接插件。

Dayu
减肥前的准备工作 – Strava Running Sync WordPress 插件 2025年8月27日 18:11

减肥前的准备工作 – Strava Running Sync WordPress 插件

Dayu

2025年8月27日 18:11

最近想开始减肥，作为一个博客作者，准备工作当然是做一个 WordPress 跑步骑行插件（捂脸）。

Strava Running Sync 的灵感来源于 Running Page，可自动同步 Strava 跑步数据并在网站上进行可视化展示。

展示页面：https://anotherdayu.com/runningpage/

功能特性

🏃‍♀️ 多运动支持 – 自动同步跑步、步行、骑行等运动数据
📊 统计展示 – 显示总距离、总时长、平均配速等统计信息
🗺️ 地图可视化 – 在交互式地图上展示运动轨迹
📋 数据表格 – 以表格形式展示详细的活动列表，适配电脑和手机端
🎯 类型筛选 – 支持按运动类型筛选数据
🔄 定时同步 – 支持每小时自动同步最新数据

安装与配置

1. 创建Strava应用

访问 Strava API设置页面
点击「Create App」创建新应用
填写应用信息：

Application Name: 你的应用名称
Category: 选择适当的分类
Club: 可留空
Website: 你的网站地址（如 https://anotherdayu.com/）
Authorization Callback Domain: 你的域名（如：example.com），重要：Authorization Callback Domain 只填写域名，不要包含协议和路径。（如 anotherdayu.com）

回调URL配置说明：如果你的 WordPress 安装在子目录或使用自定义域名，可以在插件设置中修改回调 URL。

最后需要保存 Client ID 和 Client Secret

2. 安装插件

前往 Github 下载插件：https://github.com/DayuGuo/strava-running-sync 。
将插件文件夹上传到 /wp-content/plugins/ 目录；或直接在插件页面上传插件压缩包安装。
在 WordPress 后台激活插件。

3. 配置插件

在 WordPress 后台进入「Strava Running」设置页面（侧边栏）
填入从 Strava 获取的 Client ID 和 Client Secret
点击「连接到Strava」按钮完成 OAuth 授权
配置显示选项（地图样式、自动同步等）
点击「立即同步」进行首次数据同步
插件基于 Mapbox，需申请账号并获取 Mapbox Access Token。

使用方法

短代码参数

所有短代码都需要在两侧添加 []

使用 strava_running_display 短代码在页面或文章中显示跑步数据。

支持的参数：

type – 显示类型
both – 同时显示统计、地图和表格（默认）
stats – 仅显示统计信息
map – 仅显示地图
table – 仅显示数据表格
limit – 显示的活动数量（默认50）
map_height – 地图高度（默认500px）

示例

技术支持

如遇到问题或需要技术支持，请：

检查 WordPress 和 PHP 版本兼容性
确认 Strava API 配置正确
验证回调 URL 配置
查看 WordPress 错误日志

开源协议

本插件采用 GPL v2 协议开源。

享受跑步，享受数据！🏃‍♀️💨

Dayu
Keyboard Maestro – 实现 Screennote 的功能 2025年7月31日 18:32

Keyboard Maestro – 实现 Screennote 的功能

Dayu

2025年7月31日 18:32

今天看到李如一推荐了一款很有趣的软件： Screenotate，可以在截图后自动进行 OCR 文本识别，并将文本和图片保存为便于检索的 HTML 文件。

不过，Screenotate 无法与其他截图软件（如 CleanShot X）联动，自身的截图功能也相对基础。

最终，我决定用 Keyboard Maestro 来复刻它的核心功能。得益于 KM 内置了 OCR action，配置过程非常简单。

项目逻辑是：每次有新图片文件被添加到该文件夹，对其进行 OCR，然后将文本放入同文件名的 txt 文件。

想尝试的朋友可以去我的 Github 下载。仅需改下图中的文件夹地址，换成自己的本地文件夹即可。

Dayu
目前使用的 WordPress 插件 2024年11月24日 15:59

目前使用的 WordPress 插件

Dayu

2024年11月24日 15:59

以下是我目前使用的WordPress插件，共 11 个：

UpdraftPlus，核心备份插件，免费版支持定期备份到 Google Drive。近期迁移了一次，安装好WordPress和该插件，再关联一下 Google 账号即可备份成功，体验很好。
Blocksy 主题 + 插件，目前在使用的主题，免费版够用，可自定义选项多，颜值高。
Polylang，多语言插件，免费版功能齐全，中英文界面可同时 SEO 索引，增强博客覆盖面。
Antispam Bee，屏蔽广告评论。
Post SMTP，邮件发送插件，更简单的配置 SMTP。
Wenprise Better Emails，提供邮件模板，美化邮件。
WP Super Cache，网站缓存插件，提升网站加载速度。
WPS Hide Login，安全插件，可以自定义WordPress登录页面URL。
Rank Math SEO，SEO 优化插件，增强搜索引擎可见度。
Meow Gallery，图片画廊插件。
Juicer，社交媒体聚合插件，能为国内用户展示 Twitter 时间线。

目前已有足够的舒适度，之后会偏重稳定性，于是关闭了插件和主题的自动更新。除了安全性更新，尽量不动。

除了 Blocksy，都用的免费版。但 Blocksy 其实也没用到几个付费功能，只是比较喜欢，且长期使用，支持一下。

在 Jack 的帮助下，最近管理面板换成了 1Panel，舒适度比 AMH 要高一些，操作也更简单。

截图留念！

普通视图

功能特点

安装

功能特性

安装与配置

1. 创建Strava应用

2. 安装插件

3. 配置插件

使用方法

短代码参数

示例

技术支持

开源协议