昨天我們完成了重要的「分句」功能，
邁出這重要的一步之後，
很多功能就可以輕易完成了。

舉例來說，
我們先來完善昨天的 title 顯示功能吧。

這次的修改，主要集中在 content.js。

• 第一步驟（Alt+1）：先進行分句、再備份翻譯前的原始內容。
  • 這裡調換了【分句】和【備份 HTML】的順序。
    主要是因為我們隨後會用到的是【分句後的原始 HTML】。
  • 除了備份原始 HTML，也針對各句備份原始的文字。

    // 分句
    document.body.innerHTML = addSentTag2HTML(document.body.innerHTML);

    // 備份分句後的原始 HTML
    body0 = document.body.innerHTML;

    // 備份各句原始文字
    document.querySelectorAll("sent").forEach((node, i)=>{
        orig_texts[i] = node.textContent
    });

• 第二步驟（Alt+2）：啟動 Google 翻譯，自動捲動頁面，

  • 這部分沒有改變。

• 第三步驟（Alt+3）：備份翻譯後的頁面內容。

  • 類似第一步驟，除了備份翻譯後整個網頁的 HTML，也把各句的翻譯文字備份起來。

    // 備份翻譯後 HTML
    body1 = document.body.innerHTML;

    // 備份各句翻譯後文字
    document.querySelectorAll("sent").forEach((node, i)=>{
        tran_texts[i] = node.textContent
    });

• 最後是切換翻譯（Alt+上）：
  • 切換整個網頁分句後的 HTML。
  • 利用各句的原文&譯文記錄，藉由 title 顯示另一種語言。

// 切換原文、譯文
    translated = !translated
    if (translated) {
        document.body.innerHTML = body1;
        document.querySelectorAll("sent").forEach((node, i)=>{
            node.title = orig_texts[i]
        });
        console.log("Alt+上: 已切換為譯文，title 顯示原文。")
    }
    else {
        document.body.innerHTML = body0;
        document.querySelectorAll("sent").forEach((node, i)=>{
            node.title = tran_texts[i]
        });
        console.log("Alt+上: 已切換為原文，title 顯示譯文。")
    }

完成以上修改之後，重新啟動外掛，
按照 Alt+1、2、3 的步驟執行，最後記得要關閉 Google 翻譯。
接下來只要使用【Alt+上】的快速鍵，就可以切換翻譯了。

而且，此時若將滑鼠游標移動到句子上方，
就會顯示另一種語言的文字。
這樣一來，
原文與譯文的對照就變得非常方便，
無論是在看譯文時想看原文，或是在看原文時想看譯文，
全都可以藉由 title 所浮現的文字，
非常優雅的呈現出來。

至此，翻譯文字的對照閱讀方面，
就可以算是達到相當理想的程度了。

但 sent 標籤的強大用處，絕對遠不止如此！！
比方說，我們再舉個例子好了。
當滑鼠游標移動到某個句子時，
除了浮現出另一種語言之外，
假設我們希望正在看的這個句子，
能以更醒目的方式呈現出來。

先說明一下做法好了。
我們打算讓每個句子都對滑鼠游標【進入】與【離開】的動作做出反應。
比方說，改用不同的顏色來呈現文字。

這種外觀上的改變，通常就會用到 CSS。
我們的 content.css 終於可以派上用場了！

滑鼠游標【進入】與【離開】事件的偵測，
會用到 onmouseenter 和 onmouseleave 這兩個事件，
（有興趣的話，也可以了解一下 onmouseover 和 onmouseout 事件）

我們打算讓 sent 這個標籤，在遇到 onmouseenter 事件時，
就在 class 屬性中添加一個 active 的類別。
遇到 onmouseleave 的事件時，
則把 active 這個 class 屬性移除。

然後我們可以在 content.css 檔案中，
針對 .active 這個類別，定義不同的文字顏色。
這樣應該就可以達到所要的效果了。

相關的程式碼，這裡就不多提了。
有興趣的人，請直接查看 Github 上的程式碼。

git clone https://github.com/betterTrans/betterTranslation.git

不過在查看程式碼之前，
建議您可以先動手嘗試一下，
自己寫幾行程式，
看看能不能達到所要的效果。

熟練程式技能的技巧無他，
無非是多嘗試多熟練而已。
嘗試錯誤的過程，
有時怎麼做都不對，確實會覺得很悶，
但只要耐住性子，把問題一一釐清，
一旦執行後突然撥雲見日，
瞬間就可以把之前的苦悶一掃而空，
那種暢快的感覺也是無可取代的！

希望各位繼續勇於嘗試、多方學習，
明天我們再一起繼續前進吧！

^_^