博客网站添加每日语录

阿凯2025-07-172025-12-24

在博客首页加一个“每日语录”模块，不仅能提升用户体验，还能为你的网站增加灵魂感 ✨ 以下为完整的实现方案，无需后台数据库，自动从公共 API 获取每日一句，适用于的建站环境（宝塔 + Nginx + WordPress 或静态博客）：

效果展示（每天自动更新）

? “愿你走出半生，归来仍是少年。”
—— 每日一句

使用公共语录 API

1. 在网页中插入以下 HTML 和 JS

在你博客首页模板中（如 WordPress 的 header.php 或 Hexo 的主题模板）合适位置添加以下代码：

<div id="daily-quote" style="padding: 10px; background-color: #f5f5f5; border-radius: 8px; margin: 20px 0; text-align: center; font-style: italic;">
  ? 正在加载今日语录...
</div>

<script>
  fetch('https://v1.hitokoto.cn/?c=a')  // 可换成你喜欢的其他API
    .then(response => response.json())
    .then(data => {
      const quote = data.hitokoto;
      const from = data.from ? ` —— ${data.from}` : '';
      document.getElementById('daily-quote').innerText = `? ${quote} ${from}`;
    })
    .catch(() => {
      document.getElementById('daily-quote').innerText = '? 今日语录加载失败，请稍后再试。';
    });
</script>

2. 推荐几个中文语录 API 选择

API

接口地址

内容风格

一言网（hitokoto.cn）

https://v1.hitokoto.cn/

文艺、动漫、哲理等

金山词霸每日一句

https://sentence.iciba.com/index.php?c=dailysentence&m=getdetail&title=2023-07-17

英语学习类

思否句子

https://api.oioweb.cn/api/common/oneSentence

文艺短句

每日一句（小歪API）

https://api.xygeng.cn/one

支持繁简切换

如何嵌入到博客里？

✔ WordPress 用户：

打开后台 → 外观 → 主题文件编辑器
找到 header.php 或 footer.php 或 index.php，在合适位置粘贴上面的代码
（比如 <div id="content"> 下方）—注：找不到见下面。
保存后访问首页，即可看到每日语录

✔ 静态博客用户（Hexo / Hugo）：

编辑主题模板（如 layout/_partial/header.ejs）或 index.html，插入代码
重新部署网站即可

? 可选增强功能

功能

说明

? 加日期

可显示“2025年7月17日每日一句”

? 自定义字体

让语录更美观，如引号装饰、居中加阴影

? 多语录切换

每次加载随机显示一条

? 本地缓存

避免 API 每次都加载，减少请求数

如果你只想首页显示？

那你可以加一个判断语句，只让语录出现在首页：

<?php if (is_home()  is_front_page()) : ?>
  <div id="daily-quote" style="...">? 正在加载每日一句...</div>
  <script>
    fetch('https://v1.hitokoto.cn/?c=a')
      .then(res => res.json())
      .then(data => {
        document.getElementById('daily-quote').innerHTML =
          `? 「${data.hitokoto}」<br><small>—— ${data.from  '佚名'}</small>`;
      })
      .catch(() => {
        document.getElementById('daily-quote').innerText = '? 今日语录加载失败';
      });
  </script>
<?php endif; ?>

在header 文件中找不到标签，但是在template/views/home.php下找到了。

template/views/home.php 文件，是我的博客首页的核心模板，它的结构也很清晰：

<body>
  <div id="core-next-app">
    ...
    <main class="container">
      <div class="main-warp">
        <!-- ✅ 在这里开始显示首页内容 -->

将“每日语录模块”插入在这行之前：

1 2	<?php do_action('core_next_ad', 'home1', 0, 10);

请将以下完整代码插入到 template/views/home.php 的 <div class="main-warp"> 下方（即 do_action('core_next_ad', ...) 前面）：

<?php if (is_home()  is_front_page()) : ?>
<div id="daily-quote" style="
background: #eaf6ff;
margin: 20px auto;
padding: 20px;
max-width: 960px;
border-left: 5px solid #3b9eff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
font-size: 16px;
line-height: 1.6;
color: #333;
text-align: center;
">
? 正在加载今日语录...
</div>

<script>
fetch('https://v1.hitokoto.cn/?c=a')
.then(res => res.json())
.then(data => {
document.getElementById('daily-quote').innerHTML =
` 「${data.hitokoto}」<br><small>—— ${data.from  '佚名'}</small>`;
})
.catch(() => {
document.getElementById('daily-quote').innerText = ' 今日语录加载失败';
});
</script>
<?php endif; ?>

优化升级版本

支持暗色模式，随机 API，多条语录切换，加日期可显示“年月日每日一句”，本地缓存。 ? 完整升级版 HTML + JS（直接替换旧代码）

<?php if (is_home()  is_front_page()) : ?>
<div id="daily-quote-box" style="margin: 0 auto 20px auto; max-width: 100%; text-align: center;"></div>

<script>
(function() {
  const today = new Date();
  const dateKey = today.toISOString().split('T')[0];
  const storageKey = 'daily_quote_' + dateKey;

  const apiList = [
    'https://v1.hitokoto.cn/?c=a',
    'https://api.oioweb.cn/api/common/oneSentence',
    'https://api.xygeng.cn/one'
  ];

  function formatDate(date) {
    const y = date.getFullYear();
    const m = date.getMonth() + 1;
    const d = date.getDate();
    return `${y}年${m}月${d}日 每日一句`;
  }

  function applyTheme() {
    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    const box = document.getElementById('daily-quote-box');
    box.style.background = isDark ? '#2b2d30' : '#eaf6ff';
    box.style.color = isDark ? '#f0f0f0' : '#333';
    box.style.borderLeft = isDark ? '5px solid #5dade2' : '5px solid #3b9eff';
    box.style.padding = '20px';
    box.style.borderRadius = '10px';
    box.style.boxShadow = '0 4px 12px rgba(0,0,0,0.08)';
    box.style.fontSize = '16px';
    box.style.lineHeight = '1.6';
  }

  function renderQuote(q) {
    const html = `
      <div style="font-weight:bold; margin-bottom:10px;">? ${formatDate(today)}</div>
      <div style="margin-bottom:10px">?「${q.text}」<br><small>—— ${q.from}</small></div>
    `;
    document.getElementById('daily-quote-box').innerHTML = html;
    applyTheme();
  }

  function fetchQuote(callback) {
    const url = apiList[Math.floor(Math.random() * apiList.length)];

    fetch(url)
      .then(res => res.json())
      .then(data => {
        let text = '', from = '佚名';
        if (data.hitokoto) {
          text = data.hitokoto;
          from = data.from  'hitokoto';
        } else if (data.data && data.data.text) {
          text = data.data.text;
          from = data.data.from  'oioweb';
        } else if (data.data && data.data.content) {
          text = data.data.content;
          from = data.data.origin  'xygeng';
        }

        if (text) callback({ text, from });
        else throw new Error('无内容');
      })
      .catch(() => {
        callback({ text: '? 今日语录加载失败，请刷新试试～', from: '' });
      });
  }

  const cached = localStorage.getItem(storageKey);
  if (cached) {
    renderQuote(JSON.parse(cached));
  } else {
    fetchQuote(function(q) {
      localStorage.setItem(storageKey, JSON.stringify(q));
      renderQuote(q);
    });
  }

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
})();
</script>
<?php endif; ?>