PHP 實現網頁區塊定時自動更新：隨機名言、每日運勢等動態內容

許多虛擬主機支援 PHP 但不提供資料庫，透過文字檔儲存資料搭配 JavaScript 輸出，即可在靜態網頁中嵌入定時更新的動態內容。本文示範如何實作每 15 分鐘輪換一次的隨機英文諺語區塊，並延伸至每日星座運勢等應用。

核心原理

1. 資料儲存在文字檔，每行一筆記錄
2. PHP 讀取檔案內容到陣列
3. 以目前時間為種子計算隨機索引，確保固定間隔內輸出相同內容
4. 輸出 JavaScript document.write() 程式碼
5. 靜態頁面用 <script src="xxx.php"></script> 嵌入

資料檔準備

建立 quotes.txt（UTF-8 編碼），每行一條中英對照諺語：

Actions speak louder than words. 事實勝於雄辯。
A journey of a thousand miles begins with a single step. 千里之行，始於足下。
Better late than never. 遲做總比不做好。
Don't count your chickens before they hatch. 不要未卜先算。
Every cloud has a silver lining. 塞翁失馬，焉知非福。

PHP 輸出腳本 quote_widget.php

<?php
// 設定標頭
header('Content-Type: application/javascript; charset=utf-8');
header('Cache-Control: public, max-age=900'); // 15 分鐘快取

// 設定
$dataFile = __DIR__ . '/quotes.txt';
$interval = 900; // 15 分鐘 = 900 秒

// 讀取資料
if (!is_readable($dataFile)) {
    echo "console.error('資料檔案不存在或不可讀');";
    exit;
}

$lines = file($dataFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
if (empty($lines)) {
    echo "console.error('資料檔案為空');";
    exit;
}

// 計算固定間隔的隨機索引
$seed = floor(time() / $interval);
mt_srand($seed);
$index = mt_rand(0, count($lines) - 1);
$quote = $lines[$index];

// 輸出 JavaScript
echo "document.write(" . json_encode($quote, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) . ");";
?>

靜態頁面嵌入方式

<!-- 在想顯示名言的位置放入 -->
<div class="quote-widget">
    <script src="quote_widget.php"></script>
</div>

<!-- 若需指定編碼 -->
<script src="quote_widget.php" charset="utf-8"></script>

進階應用：每日星座運勢

資料結構 horoscope.json

{
    "aries": {"date": "3/21-4/19", "fortune": "今日適合啟動新計劃..."},
    "taurus": {"date": "4/20-5/20", "fortune": "財運平穩，適合理財規劃..."},
    ...
}

PHP 輸出 horoscope_widget.php

<?php
header('Content-Type: application/javascript; charset=utf-8');
header('Cache-Control: public, max-age=86400'); // 快取一天

$dataFile = __DIR__ . '/horoscope.json';
$sign = $_GET['sign'] ?? 'aries'; // 可由前端傳入星座

if (!is_readable($dataFile)) exit;

$data = json_decode(file_get_contents($dataFile), true);
if (!isset($data[$sign])) $sign = 'aries';

$item = $data[$sign];
$html = "<div class='horoscope'>"
      . "<h4>{$item['date']} 運勢</h4>"
      . "<p>{$item['fortune']}</p>"
      . "</div>";

echo "document.write(" . json_encode($html, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_AMP) . ");";
?>

前端星座選擇器

<select id="zodiac-select" onchange="loadHoroscope(this.value)">
    <option value="aries">牡羊座</option>
    <option value="taurus">金牛座</option>
    ...
</select>
<div id="horoscope-container"></div>

<script>
function loadHoroscope(sign) {
    const container = document.getElementById('horoscope-container');
    container.innerHTML = '<script src="horoscope_widget.php?sign=' + sign + '"></script>';
}
// 預設載入
loadHoroscope('aries');
</script>

編碼相容性處理

若主站為 Big5/GB2312，Widget 為 UTF-8，需在 PHP 輸出前轉碼：

<?php
// 在輸出前加入
$output = mb_convert_encoding($output, 'big5', 'utf-8');
header('Content-Type: application/javascript; charset=big5');
?>

效能優化建議

• 啟用 OPcache 減少 PHP 編譯開銷
• 設定適當的 HTTP 快取標頭（max-age、ETag）
• 資料檔較大時考慮 SQLite 或 Redis 替代文字檔
• 使用 CDN 加速 Widget 載入

此技術適用於任何需要定時更新的片段內容：新聞輪播、優惠碼展示、隨機圖片、每日一句等。若需更複雜的互動（如使用者點擊、狀態保持），建議改用 AJAX 載入 JSON 資料並由前端渲染。