🔧 Feat: modify code edit button (#76)

exampleSite/content/tests/highlight.md

@@ -160,4 +160,4 @@ var _str2Array = (str) => {
 
 ---
 
-{{</* gist spf13 7896402 */>}}
+{{< gist spf13 7896402 >}}

i18n/en.toml

@@ -97,10 +97,10 @@ other = "en"
 other = "Copy to clipboard"
 
 [editLockTitle]
-other = "Unlock editable code block"
+other = "Lock editable code block"
 
 [editUnLockTitle]
-other = "Lock editable code block"
+other = "Unlock editable code block"
 
 [cookieconsentMessage]
 other = "This website uses Cookies to improve your experience."

i18n/zh-CN.toml

@@ -104,10 +104,10 @@ other = "lib/lunr/lunr.segmentit.js"
 other = "复制到剪贴板"
 
 [editLockTitle]
-other = "解锁可编辑代码块"
+other = "锁定可编辑代码块"
 
 [editUnLockTitle]
-other = "锁定可编辑代码块"
+other = "解锁可编辑代码块"
 
 [cookieconsentMessage]
 other = "本网站使用 Cookies 来改善您的浏览体验."

i18n/zh-TW.toml

@@ -104,10 +104,10 @@ other = "lib/lunr/lunr.segmentit.js"
 other = "複製到剪貼板"
 
 [editLockTitle]
-other = "解鎖可編輯代碼塊"
+other = "鎖定可編輯代碼塊"
 
 [editUnLockTitle]
-other = "鎖定可編輯代碼塊"
+other = "解鎖可編輯代碼塊"
 
 [cookieconsentMessage]
 other = "本網站使用 Cookies 來改善您的流覽體驗."

src/js/theme.js

@@ -424,22 +424,21 @@ class Theme {
         if (this.config.code.editable) {
           const $edit = document.createElement('span');
           $edit.classList.add('edit');
-          // this.config.code.editUnLockTitle
-          $edit.insertAdjacentHTML('afterbegin', `<i class="fas fa-lock fa-fw" title="${this.config.code.editLockTitle}"></i>`);
+          $edit.insertAdjacentHTML('afterbegin', `<i class="fas fa-key fa-fw" title="${this.config.code.editUnLockTitle}"></i>`);
           $edit.addEventListener('click', () => {
+            const $iconKey = $edit.querySelector('.fa-key');
             const $iconLock = $edit.querySelector('.fa-lock');
-            const $iconUnLock = $edit.querySelector('.fa-lock-open');
             const $preChromas = $edit.parentElement.parentElement.querySelectorAll('pre.chroma');
             const $preChroma = $preChromas.length === 2 ? $preChromas[1] : $preChromas[0];
-            if ($iconLock) {
-              $iconLock.classList.add('fa-lock-open');
-              $iconLock.classList.remove('fa-lock');
-              $iconLock.title = this.config.code.editUnLockTitle;
+            if ($iconKey) {
+              $iconKey.classList.add('fa-lock');
+              $iconKey.classList.remove('fa-key');
+              $iconKey.title = this.config.code.editLockTitle;
               $preChroma.setAttribute('contenteditable', true);
             } else {
-              $iconUnLock.classList.add('fa-lock');
-              $iconUnLock.classList.remove('fa-lock-open');
-              $iconUnLock.title = this.config.code.editLockTitle;
+              $iconLock.classList.add('fa-key');
+              $iconLock.classList.remove('fa-lock');
+              $iconLock.title = this.config.code.editUnLockTitle;
               $preChroma.setAttribute('contenteditable', false);
             }
           }, false);