From 31dc619bb53f229a0a9bf79d446c74bafd106dba Mon Sep 17 00:00:00 2001 From: alexhuang221 Date: Mon, 18 Nov 2024 15:58:48 +0800 Subject: [PATCH] Update blog - 2024-11-18 15:58:44 --- .../index.html" | 8 +++----- css/main.css | 2 +- index.html | 2 +- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git "a/2024/11/18/\345\260\201\350\243\235CloudFlare-Worker-HtmlRewriter/index.html" "b/2024/11/18/\345\260\201\350\243\235CloudFlare-Worker-HtmlRewriter/index.html" index 462fce0..bc9019a 100644 --- "a/2024/11/18/\345\260\201\350\243\235CloudFlare-Worker-HtmlRewriter/index.html" +++ "b/2024/11/18/\345\260\201\350\243\235CloudFlare-Worker-HtmlRewriter/index.html" @@ -26,7 +26,7 @@ - + @@ -194,7 +194,7 @@

發表於 - + @@ -285,9 +285,7 @@ 

1
dom.querySelector('.table').after('<div class="footer">資料來源：人事行政總處</div>', { html: true });
-

options 參數

-

{ html: Boolean } 控制 HTMLRewriter 處理插入內容的方式。
如果 html 布林值設定為 true，則內容將被視為原始 HTML。
如果 html 布林值設定為 false 或未提供，內容將被視為文本，並將對其套用正確的 HTML 轉義。

-
+

options 參數

{ html: Boolean }
控制 HTMLRewriter 處理插入內容的方式。如果 html 布林值設為 true，內容會被視為原始 HTML。如果 html 布林值設為 false 或未提供，內容會被視為文字，並套用適當的 HTML 轉義。

實際應用範例

修改部落格網站

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

const getHtml = async (url = "https://aliceric27.github.io/") => {
const response = await fetch(url);    
const dom = new DOMHelper(response);

    // 修改網站標題
    dom.querySelector('title')
       .setInnerText("修改後的網站標題");
  
    // 修改 meta 描述
    dom.querySelector('meta[name="description"]')
       .setAttribute('content', '新的網站描述');
    // 修改所有 p 標籤字體顏色
    dom.querySelector('p')
       .setAttribute('style', 'color: red;');
  
    // 修改 header 標題
    dom.querySelector('.site-title')
       .setInnerText('新的部落格標題');
    
    // 修改副標題
    dom.querySelector('.site-subtitle')
       .setInnerText('新的副標題');
  
    // 修改作者資訊
    dom.querySelector('.site-author-name')
       .setInnerText('新作者名稱');
  
    // 修改文章數量
    dom.querySelector('.site-state-item-count')
       .setInnerText('99');
  
    // 修改 GitHub 連結
    dom.querySelector('.github-corner')
       .setAttribute('href', 'https://github.com/newuser');
  
    // 新增自訂 CSS
    dom.querySelector('head')
       .append('<style>.custom-style { color: red; }</style>', { html: true });
  
    // 移除特定元素
    dom.querySelector('.post-button') //假設移除閱讀全文按鈕
       .remove();
  
    // 在特定位置插入內容
    dom.querySelector('.main-inner')
       .prepend('<div class="custom-header">自訂頁首</div>', { html: true });
  
    // 修改 footer
    dom.querySelector('.footer-inner')
       .setInnerHTML('<div>自訂頁尾內容</div>');
  
    return dom.transform();
}
export default {
  async fetch(request, env, ctx) {
    const result = await getHtml()
    return result;
    // return new Response('Hello World!');
  }
}

diff --git a/css/main.css b/css/main.css index 9342863..0e6722b 100644 --- a/css/main.css +++ b/css/main.css @@ -1294,7 +1294,7 @@ pre code { vertical-align: middle; } .links-of-author a::before { - background: #28ff5c; + background: #f5ff77; display: inline-block; margin-right: 3px; transform: translateY(-2px); diff --git a/index.html b/index.html index 3b1929c..e0fe25f 100644 --- a/index.html +++ b/index.html @@ -186,7 +186,7 @@

發表於 - +