Update blog - 2024-11-18 15:58:44

aliceric27 · Nov 18, 2024 · 31dc619 · 31dc619
1 parent e632f6d
commit 31dc619
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/2024/11/18/封裝CloudFlare-Worker-HtmlRewriter/index.html b/2024/11/18/封裝CloudFlare-Worker-HtmlRewriter/index.html
@@ -26,7 +26,7 @@
 <meta property="og:description" content="將 CloudFlare Worker 的 HtmlRewriter 封裝成類似 jQuery 的 DOM 操作">
 <meta property="og:locale" content="zh_TW">
 <meta property="article:published_time" content="2024-11-18T06:54:37.000Z">
-<meta property="article:modified_time" content="2024-11-18T07:47:21.506Z">
+<meta property="article:modified_time" content="2024-11-18T07:58:05.602Z">
 <meta property="article:author" content="Wei">
 <meta property="article:tag" content="Backend">
 <meta property="article:tag" content="Tools">
@@ -194,7 +194,7 @@ <h1 class="post-title" itemprop="name headline">
       <span class="post-meta-item-text">發表於</span>
 
 
-      <time title="創建時間：2024-11-18 14:54:37 / 修改時間：15:47:21" itemprop="dateCreated datePublished" datetime="2024-11-18T14:54:37+08:00">2024-11-18</time>
+      <time title="創建時間：2024-11-18 14:54:37 / 修改時間：15:58:05" itemprop="dateCreated datePublished" datetime="2024-11-18T14:54:37+08:00">2024-11-18</time>
     </span>
     <span class="post-meta-item">
       <span class="post-meta-item-icon">
@@ -285,9 +285,7 @@ <h4 id="after-content-options"><a href="#after-content-options" class="headerlin
 <p>在元素之後插入內容<br>參數: <code>content</code> (string), <code>options</code> (object)<br>返回: <code>this</code></p>
 </blockquote>
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.table&#x27;</span>).<span class="title function_">after</span>(<span class="string">&#x27;&lt;div class=&quot;footer&quot;&gt;資料來源：人事行政總處&lt;/div&gt;&#x27;</span>, &#123; <span class="attr">html</span>: <span class="literal">true</span> &#125;);</span><br></pre></td></tr></table></figure>
-<h3 id="options-參數"><a href="#options-參數" class="headerlink" title="options 參數"></a><code>options</code> 參數</h3><blockquote>
-<p><code>&#123; html: Boolean &#125;</code> 控制 HTMLRewriter 處理插入內容的方式。<br>如果 <code>html</code> 布林值設定為 <code>true</code>，則內容將被視為原始 HTML。<br>如果 <code>html</code> 布林值設定為 <code>false</code> 或未提供，內容將被視為文本，並將對其套用正確的 HTML 轉義。</p>
-</blockquote>
+<h3 id="options-參數"><a href="#options-參數" class="headerlink" title="options 參數"></a><code>options</code> 參數</h3><p><code>&#123; html: Boolean &#125;</code><br>控制 HTMLRewriter 處理插入內容的方式。如果 html 布林值設為 true，內容會被視為原始 HTML。如果 html 布林值設為 false 或未提供，內容會被視為文字，並套用適當的 HTML 轉義。</p>
 <h2 id="實際應用範例"><a href="#實際應用範例" class="headerlink" title="實際應用範例"></a>實際應用範例</h2><h3 id="修改部落格網站"><a href="#修改部落格網站" class="headerlink" title="修改部落格網站"></a>修改部落格網站</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="keyword">const</span> <span class="title function_">getHtml</span> = <span class="keyword">async</span> (<span class="params">url = <span class="string">&quot;https://aliceric27.github.io/&quot;</span></span>) =&gt; &#123;</span><br><span class="line"><span class="keyword">const</span> response = <span class="keyword">await</span> <span class="title function_">fetch</span>(url);    </span><br><span class="line"><span class="keyword">const</span> dom = <span class="keyword">new</span> <span class="title class_">DOMHelper</span>(response);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 修改網站標題</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;title&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerText</span>(<span class="string">&quot;修改後的網站標題&quot;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改 meta 描述</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;meta[name=&quot;description&quot;]&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setAttribute</span>(<span class="string">&#x27;content&#x27;</span>, <span class="string">&#x27;新的網站描述&#x27;</span>);</span><br><span class="line">    <span class="comment">// 修改所有 p 標籤字體顏色</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;p&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setAttribute</span>(<span class="string">&#x27;style&#x27;</span>, <span class="string">&#x27;color: red;&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改 header 標題</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.site-title&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerText</span>(<span class="string">&#x27;新的部落格標題&#x27;</span>);</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 修改副標題</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.site-subtitle&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerText</span>(<span class="string">&#x27;新的副標題&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改作者資訊</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.site-author-name&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerText</span>(<span class="string">&#x27;新作者名稱&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改文章數量</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.site-state-item-count&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerText</span>(<span class="string">&#x27;99&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改 GitHub 連結</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.github-corner&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setAttribute</span>(<span class="string">&#x27;href&#x27;</span>, <span class="string">&#x27;https://github.com/newuser&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 新增自訂 CSS</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;head&#x27;</span>)</span><br><span class="line">       .<span class="title function_">append</span>(<span class="string">&#x27;&lt;style&gt;.custom-style &#123; color: red; &#125;&lt;/style&gt;&#x27;</span>, &#123; <span class="attr">html</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 移除特定元素</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.post-button&#x27;</span>) <span class="comment">//假設移除閱讀全文按鈕</span></span><br><span class="line">       .<span class="title function_">remove</span>();</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 在特定位置插入內容</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.main-inner&#x27;</span>)</span><br><span class="line">       .<span class="title function_">prepend</span>(<span class="string">&#x27;&lt;div class=&quot;custom-header&quot;&gt;自訂頁首&lt;/div&gt;&#x27;</span>, &#123; <span class="attr">html</span>: <span class="literal">true</span> &#125;);</span><br><span class="line">  </span><br><span class="line">    <span class="comment">// 修改 footer</span></span><br><span class="line">    dom.<span class="title function_">querySelector</span>(<span class="string">&#x27;.footer-inner&#x27;</span>)</span><br><span class="line">       .<span class="title function_">setInnerHTML</span>(<span class="string">&#x27;&lt;div&gt;自訂頁尾內容&lt;/div&gt;&#x27;</span>);</span><br><span class="line">  </span><br><span class="line">    <span class="keyword">return</span> dom.<span class="title function_">transform</span>();</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="keyword">async</span> <span class="title function_">fetch</span>(<span class="params">request, env, ctx</span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> result = <span class="keyword">await</span> <span class="title function_">getHtml</span>()</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">    <span class="comment">// return new Response(&#x27;Hello World!&#x27;);</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
 
 

diff --git 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
@@ -186,7 +186,7 @@ <h2 class="post-title" itemprop="name headline">
       <span class="post-meta-item-text">發表於</span>
 
 
-      <time title="創建時間：2024-11-18 14:54:37 / 修改時間：15:47:21" itemprop="dateCreated datePublished" datetime="2024-11-18T14:54:37+08:00">2024-11-18</time>
+      <time title="創建時間：2024-11-18 14:54:37 / 修改時間：15:58:05" itemprop="dateCreated datePublished" datetime="2024-11-18T14:54:37+08:00">2024-11-18</time>
     </span>
     <span class="post-meta-item">
       <span class="post-meta-item-icon">