Quantcast
Channel: WFU BLOG

提供網址重新導向的免費服務﹍redirect.pizza

$
0
0
url-redirect-pizza.jpg-提供網址重新導向的免費服務﹍redirect.pizza如果有買網址的話,網址商後台都會有轉址服務,有時管理的子網域一多,可能需要變動一下網址,以配合不同需求。例如原本部落格放在 www.自訂網域.com,後來業務變多以後,想將部落格挪到 blog.自訂網域.com,這時就可設定「網址重新導向」,將 www 子網域用 301 轉址導向 blog 子網域。 但要這麼做還得另外確認一件事,也就是網址商是否提供「路徑轉址」的功能。我的網址商是 Google Domains,下圖為轉址設定畫面: url-redirect-pizza-1.jpg-提供網址重新導向的免費服務﹍redirect.pizza可看到 Google Domains 提供了:
  • 301、302 轉址
  • 路徑轉址
  • SSL 轉址
後來從客戶那才發現,很多網址商都沒有「路徑轉址」的功能,例如知名的 Godaddy 沒有,更不用說台灣的小網址商了。 還好在網路上找到幾個免費的轉址服務,不必搬到 Google Domains 也能進行轉址。經測試後,功能最強的是 redirect.pizza,請見本篇的介紹與操作說明。

一、redirect.pizza 介紹

進入「價格頁面」後,可看到免費版功能如下:
  • 可使用 5 筆轉址紀錄:如果 www 與裸網域都轉到同一網址的話,就會用掉 2 筆紀錄
  • 每月轉址使用量 10 萬次:如果日轉址流量超過 3333 次的話,就得使用付費版了
  • 支援 HTTPS:這很重要,不是每個免費轉址服務都有
從免費版的限制來看,如果每月轉址次數太多,付費版的費用不便宜,可以考慮網址商改用 Google Domains 比較划算。

二、操作說明

1. 註冊帳號url-redirect-pizza-2.jpg-提供網址重新導向的免費服務﹍redirect.pizza進入「redirect.pizza」後,點擊右上角「Get Started」進行註冊,可選擇 Google 帳號登入。 2. 新增轉址進入轉址頁面: url-redirect-pizza-3.jpg-提供網址重新導向的免費服務﹍redirect.pizza點擊右上角「Create redirect」來新增轉址。 url-redirect-pizza-4.jpg-提供網址重新導向的免費服務﹍redirect.pizza上圖的範例,是將 wfublog.comwww.wfublog.com這兩個網址,同時都跳轉到 service.wfublog.com,屬於 2 對 1 轉址。(大部分情形會是 1 對 1 轉址)
  • Source URL(s):填入所有要轉址的來源
  • Destination URL:填入轉址的目的地
  • Redirect type:如果是永久性轉址選 301(移轉 SEO 權重);如果是暫時性轉址選 302(不移轉 SEO 權重)
  • Path forwarding:此為「路徑轉址」功能,務必要啟用
  • Tracking:免費版勾選了也看不到紀錄,此選項無所謂
完成後按左下角「Create redirect」。 3. 修改網址商 DNSurl-redirect-pizza-5.jpg-提供網址重新導向的免費服務﹍redirect.pizza轉址建立好後,會出現類似上圖訊息。注意每個網址需要進行的動作,後面都有對應的說明,範例如下:
  • wfublog.com:注意這一行粗體的提示字串為紅色底線處的 "A",需要到網址商後台修改 DNS 的方式為,新增(或修改) A 紀錄為 "@",指向圖中 REQUIRED 欄位的 89.106.200.1(改成自己看到的 IP 位址)
  • www.wfublog.com:注意這一行粗體的提示字串為紅色底線處的 "CNAME",需要到網址商後台修改 DNS的方式為,修改 CNAME 紀錄中的 "www",指向圖中 REQUIRED 欄位的 edge.redirect.pizza(改成自己看到的字串)
網址商 DNS 還沒修改好前,上圖 DNS 欄位會看到旋轉中。 url-redirect-pizza-6.jpg-提供網址重新導向的免費服務﹍redirect.pizza修改好後,也許等一段時間回來,看到上圖 DNS 欄位顯示綠色打勾,DETECTED 欄位也有資訊,就代表轉址成功了。
更多網路線上工具:

部落格定時自動備份服務

$
0
0
blog-auto-backup.jpg-部落格定時自動備份服務之前經歷「Blogger 網誌被刪除」事件,為了防止日後再發生意外,開發了部落格定時自動備份工具,如此隨時可將備份資料移轉到新的網站、或是新的平台,沒有任何後顧之憂。 由於處理了相當多網站,此工具已可作為一項服務,有需要自動備份網站的話請用文末聯絡表單與本站聯繫。 (圖片出處: pxhere.com)

一、備份方式

1. API 工具根據不同部落格平台,操作對應的 API 取得文章、留言等相關資料。以本站為例,會操作 Blogger API 取得以下資料:
  • 文章 HTML 內容
  • 標籤
  • 靜態網頁(/p/xxxx.html)
  • 所有留言
2. Google 試算表所有取得資料會存放在 Google 試算表: blog-auto-backup-1.jpg-部落格定時自動備份服務上圖工作表儲存了「文章」相關備份資料 blog-auto-backup-2.jpg-部落格定時自動備份服務上圖工作表儲存了「留言」相關備份資料 blog-auto-backup-3.jpg-部落格定時自動備份服務上圖工作表儲存了「靜態網頁」相關備份資料 3. 定期執行根據文章更新頻率,可以自訂備份工具的執行週期,例如每日、一週、一個月等。

二、製作部落格匯入檔

在 Google 試算表儲存的所有備份資料,剛來有需要時,可依照不同平台的需求,來製作匯入檔,例如:
  • Blogger
  • WordPress
如有其他平台的需求,請提供匯入檔範例,來判斷匯入檔格式,以製作對應的匯入檔。

三、聯絡表單

如您需要部落格自動備份功能的話,請填寫下面的表單與我聯繫:
稱呼:(必填)
電子郵件:(必填)
填寫表單網址:(必填)
填寫表單目的:(必填)
請詳細描述您的需求、問題或意見:(必填)
更多本站相關服務:

Blogger 如何自訂縮圖、封面圖尺寸

$
0
0
很久以前曾寫過「Blogger 封面圖+縮圖 各種呈現方式」,說明如何在首頁顯示文章縮圖,在文章頁顯示封面圖。現在 Blogger 範本提供了非常實用的語法,可直接對縮圖、封面圖進行裁切,調整為任意長寬比例,本篇就來看看如何實作。 不過奇特的是,這麼重要且強大的功能,跟上一篇「Blogger 日期格式化詳解」一樣,Blogger 官方沒有釋出任何公告或說明文件,只有網路流傳的資訊。我猜測原因是,自從 2017 年「Blogger 推出官方 RWD 範本」後,就不希望使用者亂改範本了吧?畢竟許多不熟語法的新手,按著網路水準參差不齊的文章亂改範本,所造成的各種奇怪問題與客訴,責任並不在官方。那麼 Blogger 自此不公開重要語法說明文件,大概是為自己省麻煩吧! 所以,本站長久以來的原則都是,請「官方 RWD 範本」使用者接受預設效果,沒事別動範本內容。本篇的教學,除非特別註明適用於「官方 RWD 範本」,否則一律以「官方 "非RWD"範本」為主。同時,請具備基本的 HTML 基本語法知識後,再來閱讀本文。沒有任何語法基礎的使用者,建議交由專業人士處理。 (圖片出處: unsplash.com)

一、參考資料

1. resizeImage Blogger 新增 resizeImage 這個工具函數,可對圖片調整比例、裁切,完整使用語法及參數可參考這篇文章: 簡單說明一下操作方式: <img expr:src='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>
  • data:post.firstImageUrl → 這是文章的首圖網址
  • 800 → 代表設定成 800px 寬
  • 5:3 → 代表圖片會裁切成這個長寬比例
  • 最重要的一點,經實測結果發現,寬度數值及比例這兩個參數前面,一定要有空格,否則語法無法執行
2. 自訂背景圖如果將圖片用於背景圖,那麼裁切圖片尺寸的 CSS 語法可參考這個討論串: 使用以下的 CSS 語法: {background-image:url(<b:eval expr='resizeImage(data:post.firstImageUrl, 800, "5:3")'/>)}

二、改首頁縮圖尺寸

製作首頁文章縮圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「三、首頁縮圖+文摘」。修改縮圖尺寸之前是利用 CSS 設定,實際上瀏覽器還是要載入原圖尺寸,所以載入時間較久。 現在直接裁切縮圖尺寸的方法為,從原本語法中找到以下字串: <img expr:src='data:post.firstImageUrl'/>改成下面的語法: <img expr:src='resizeImage(data:post.firstImageUrl, 300, "1:1")'/>參數修改請參考「一、參考資料」→「1. resizeImage」即可,同時 CSS 也不需再另外設定圖片尺寸了。

三、改文章封面圖尺寸

製作文章頁面封面圖的操作可參考「Blogger 封面圖+縮圖 各種呈現方式」→「二、文章標題前後擺封面圖」。修改縮圖尺寸之前是利用 CSS 設定,實際上瀏覽器還是要載入原圖尺寸,所以載入時間較久。 現在直接裁切縮圖尺寸的方法為,從原本語法中找到以下字串: <img expr:src='data:post.firstImageUrl'/>改成下面的語法: <img expr:src='resizeImage(data:post.firstImageUrl, 1000, "16:9")'/>參數修改請參考「一、參考資料」→「1. resizeImage」即可,同時 CSS 也不需再另外設定圖片尺寸了。

四、改熱門文章小工具縮圖尺寸

以前 Blogger 範本中,熱門文章小工具的縮圖標記語法是 data:post.thumbnail,產生的縮圖網址無法被 resizeImage 這個新的語法工具支援。如果你使用的是 Blogger 官方舊範本,建議可以先移除原本的熱門文章小工具,從後台重新新增一個熱門文章小工具,就會產生新的縮圖資料標記 data:post.featuredImage,這樣就能確保成功修改縮圖尺寸。 產生完新的熱門文章小工具後,在範本中找到以下程式碼區間: <b:widget id='PopularPosts1' locked='false' title='熱門文章' type='PopularPosts'> ... ~ ... </b:widget>在這個區間中,可找到縮圖相關語法如下: <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;) : data:post.thumbnail' var='image'>
  • 預設縮圖寬度為 72px,改為自己想要的寬度即可
  • 預設縮圖長寬比例為 1:1,改為自己想要的比例即可

五、官方 RWD 範本

以上的說明都是針對「官方非 RWD 範本」,如果使用官方 RWD 範本想要調整縮圖尺寸,可直接參考以下兩篇文章:

六、處理 RWD 圖片

最後,開頭的參考資料語法中,還有一個工具 sourceSet 可以處理 RWD 圖片,不過我認為意義不大,因為真正的大尺寸圖片、需要 RWD 的圖片都在文章中。而 sourceSet 無法處理網頁上最多、最需要自適應,也就是文章中的圖片,所以不去瞭解這個工具也沒什麼關係。 關於 RWD 圖片我曾寫過「製作 RWD 自適應圖片 讓手機自動載入小圖」可瞭解基本概念,而想要讓 Blogger 文章中的圖片都能改用自適應圖片語法,可直接使用我開發的這個工具即可:
更多「Blogger 語法」相關文章:

網站救援服務﹍復原被刪除的部落格文章

$
0
0
blog-post-rescue.jpg-網站救援服務﹍復原被刪除的部落格文章之前經歷「Blogger 網誌被刪除」事件,為了救回被刪除的一列相關網站,開發了網站救援工具,可以從網路現存的備份頁面,爬取文章相關內容。 由於處理了相當多網站,此工具已可作為一項服務,有需要網站救援的話請用文末聯絡表單與本站聯繫。 (圖片出處: unsplash.com)

一、救援管道

網站救援跟硬碟救援的概念有點像又不太一樣,硬碟資料不見了,必須用工具從硬碟磁區想辦法將檔案碎片拼湊回來。而網站若是被刪除,想要救回所有文章的話,得想辦法從整個浩瀚的網路上,看看是否有哪些地方曾經備份過你的文章資料。 如果網站很冷門,沒有任何其他網站想要收集,那麼在沒有任何網路備份的情況下,將沒有任何救援的機會。這也就是說,除非網路上能找到曾蒐集你文章的蛛絲馬跡,才能把各處的文章碎片收集起來,盡可能恢復原本的網站內容。 過去我們痛恨某些抄襲網站直接複製貼上我們的文章內容,但此時反而要感謝他們幫我們進行異地備份。以下列舉一些能找回文章碎片的管道:
  • Wayback Machine:最主要的網路備份服務
  • RSS 閱讀器:有人曾訂閱網站的話就能找到備份
  • 瀏覽器快取:從瀏覽器快取有機會找到近期的快取頁面內容
  • 瀏覽器搜尋:搜尋自己的文章標題或內容,或許能從抄襲網站找到內容

二、Wayback Machine

Wayback Machine」( 網站時光機)這個網路服務備份了世界上多數網站的內容,也是主要的救援管道。如果你的網站越熱門,這個服務備份的內容也會越頻繁、越多,可以說是目前最強的網頁救援武器。 但他並非營利網站,所以伺服器的運作會有優先工作排程,不可能即時備份所有網站的文章,這也就是說可能會有時間差,例如以目前 2024 這個時間點,他最多只能備份到 3 個月前的文章。將來網站更多、伺服器更累的情況,能備份到什麼程度誰也說不准。 總之這是個佛心也是最強的網站備份服務,然而終究無法備份所有的內容。但我多次需要靠此服務救援客戶文章,所以已經 donate 多次,未來如果有需要本站協助救援的話,費用的一部分也會包含對此網站的捐獻。

三、RSS 閱讀器及瀏覽器

1. RSS 閱讀器如果網站夠熱門的話,在許多 RSS 閱讀器可能會有讀者訂閱,那麼就能找到完整的文章備份,例如「Feedly RSS 閱讀器」。 那麼跟「Wayback Machine」相比,「RSS 閱讀器」可能是唯一能夠找回所有文章的管道。但若是沒有任何讀者訂閱的話,RSS 閱讀器也將找不到半篇文章的蹤跡。 2. 瀏覽器快取由於 Google 已經宣佈「不再提供"網頁庫存"服務」,那麼只能從其他瀏覽器的快取試著尋找蛛絲馬跡了,例如在這些瀏覽器輸入 site:網址然後試著從搜尋結果,看看有沒有提供快取頁面了。

四、救援工具說明

1. Wayback Machine本站救援工具主要會爬 Wayback Machine 的資料,並儲存以下內容:
  • 文章 HTML 內容
  • 標籤
  • 留言
blog-post-rescue-1.jpg-網站救援服務﹍復原被刪除的部落格文章爬完的資料會儲存在 Google 試算表,上圖為文章相關資料。 blog-post-rescue-2.jpg-網站救援服務﹍復原被刪除的部落格文章上圖為爬取留言的紀錄 2. RSS 閱讀器及瀏覽器如果能在 RSS 閱讀器找到訂閱備份的話,本站也有工具可以爬取所有文章內容。 不過 RSS 閱讀器的缺點為,無法紀錄標籤及留言,所以經由此管道的話,只能備份文章內容。 3. 瀏覽器快取如果要從瀏覽器快取取的文章備份,缺點是必須每個頁面逐一手動複製內容,這件事沒辦法程式化。 如果能在瀏覽器快取找到備份頁面,本站可提供工具,簡化手動複製的時間,快速一鍵取得相關內容。 4. 製作部落格匯入檔在 Google 試算表儲存的所有備份資料,可以依照不同平台的需求,來製作匯入檔,例如:
  • Blogger
  • WordPress
如有其他平台的需求,請提供匯入檔範例,來判斷匯入檔格式,以製作對應的匯入檔。

五、聯絡表單

如您需要網站救援的話,請填寫下面的表單與我聯繫:
稱呼:(必填)
電子郵件:(必填)
填寫表單網址:(必填)
填寫表單目的:(必填)
請詳細描述您的需求、問題或意見:(必填)
更多「資訊安全」相關文章:

Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧

$
0
0
adsense-singapore-tax-residency.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧去年(2023)11月收到 Adsense 後台通知,需要提交「新加坡稅務資訊」,沒想到前前後後搞了 2 個月以上才塵埃落定。一方面這件事真的很麻煩,一方面這也是 Adsense 自己的鍋,沒事趕在年底要使用者做這件事,搞得積極先處理的人通通做白工,到了 2024 年又得重新申請。 去年底申請完文件並提交 Adsense 的那一刻,後台畫面立刻自動秀出有效期限為 2023.12.31,這不是在搞事嗎?其實也差沒幾天,Adsense 何不 2024 年 1 月再提醒使用者就好? 總之「新加坡稅務資訊」的效期只有一年,且固定每年 12 月 31 日失效,所以我們只要每年年初申請就好,此證明文件不需要費用。為了將來作業方便,以下為我研究並紀錄最簡便的申請流程,以及跟國稅局經辦人員溝通後的處理技巧。

一、如何申請證明文件

1. 別上傳身份證根據 Adsense 專家 Alice 的說明「如何在Google AdSense後台加入稅務資訊」,Adsense 需要的證明文件是「稅務居住地證明」,那麼上傳身份證是不夠的,因為身份證無法證明稅務。 正確的作法是跟國稅局申請「稅務居住地證明」,正式的文件名稱為「居住者證明」。 2. 申請管道親赴國稅局申請除了花時間,也不見得每個人都方便前往國稅局,那麼線上申請會是比較快的管道。 不過線上申請需要通過身份驗證,有兩種管道: 請依照財政網頁的提示,來搞定憑證、讀卡機並成功登入。 3. 申請核發居住者證明身份驗證都沒問題後,最後可經由「我的E政府」這個網頁來進行線上申請流程: adsense-singapore-tax-residency-1.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧點擊「我要線上申辦」進入申請頁面。

二、如何填寫「居住者證明」表單

adsense-singapore-tax-residency-2.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧上圖為申請頁面,開始填寫之前,最好先檢查 Adsense 後台資料,確保填寫的內容一致。 adsense-singapore-tax-residency-3.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧先叫出 Adsense 留下的付款資訊,記下自己的英文姓名、及英文地址資料。 開始填寫表單:
  • 第一部分的 1~6 填入基本資訊,英文的部份請對照 Adsense 留下的資料
  • 第 8 點有兩個選項,如果直接選擇第一列並選「新加坡」的話,就必須填寫許多額外第二部份、第三部份的內容,不但麻煩,而且幾乎都是不知道怎麼填寫的項目。
  • 後來跟國稅局經辦人員通過電話,她建議我第 8 點填寫第二列,並填入「中華民國與新加坡租稅協定」,這樣的內容跟第一列一模一樣,但就不必填寫第二部份、及大多數第三部份的內容了
adsense-singapore-tax-residency-5.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧第一部分第 8 點選第二列的話,這裡第三部份只需要勾選「申請年度」就好,上圖是我去年底(2023)申請的畫面。 然而年初申請的話,我第二次有問國稅局經辦人員,是否要等到 2 月才能申請 2024 年度,還是 1 月就能申請?她是回答我網頁上如果 1 月時能勾選就代表可以,不行的話就等 2 月。 adsense-singapore-tax-residency-6.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧接下來的畫面要先驗證信箱才能繼續。 adsense-singapore-tax-residency-7.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧還需要上傳身份證正反面圖檔。 adsense-singapore-tax-residency-8.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧最後須按「新增資料」,然後按「我要申辦」送出資料,至此完成線上申請流程。

三、「居住者證明」文件

送出表單不久後就會收到郵件通知,內容大致是預計完成日(約 2 個禮拜)、受理機關、受理人員、聯絡電話等等,有問題的話可以打給經辦人員。 adsense-singapore-tax-residency-9.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧作業完成後證明文件會以掛號寄出,上圖為我 2024 第二次申請的文件,重點為紅框標示的年份「2024」,今年才能申請通過。 將上面這份文件完整拍下後,接下來要提供給 Adsense。

四、提交新加坡稅務資訊

進入 Adsense 後台 → 付款 → 設定 → 管理稅務資訊 → 新加坡稅務資訊: adsense-singapore-tax-residency-10.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧一般如果是部落客的話,按照以上內容填寫即可,上傳自己的「居住者證明」文件後提交,大約一個星期後就可通過了。 adsense-singapore-tax-residency.jpg-Adsense「新加坡稅務資訊」線上申請流程紀錄+心得技巧

五、沒申請稅務資訊的影響

我認為目前算是「新加坡稅務資訊」的宣導期,並沒有真正開始執行,所以還沒看到災情傳出,那麼沒申請稅務資訊的影響究竟為何,其實說不太準。大概要等到第一個受害者案例,才能知道實際影響為何。 不過可以根據官網文章「稅務居住地資訊、非美國預扣稅與申報」的說明來探究一二:
透過 Google 產品賺取收益...以及/或透過位於愛爾蘭、新加坡或美國的 Google 實體收款...Google 有責任從支付給你的款項中預扣稅款。提交稅務資訊,可協助我們套用正確的預扣稅率並及時付款。 如果你的國家/地區與你透過 Google 產品營利的國家/地區簽有租稅協定,你可能享有減免優惠。 不填寫這份表單會有什麼影響? → 支付給你的款項可能會扣除較高的扣繳稅額。
台灣的 Adsense 收益是透過 Google 新加坡公司發放,那麼根據當地稅務法規,Google 新加坡撥款之前必須根據稅率進行預扣款,這個數字是多少我們並不清楚。 因為剛好台灣跟新加坡有租稅協定,那麼只要申請「新加坡稅務資訊」並提供給 Adsense 留存的話,就可享有免稅資格,也就是 Google 新加坡不會進行預扣款。 結論就是:有申請「新加坡稅務資訊」的話 Adsense 收益絕對不會有損失,但沒申請的話 Adsense 收益就有可能被新加坡扣稅。
更多 Adsense 相關文章:

取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧

$
0
0
evernote-to-upnote-skill.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧Evernote 曾是滿足我所有需求的筆記軟體,無論是工作、客戶管理、寫程式等都離不開他,也付費支持了好多年。然而不知何時開始,Evernote 費用不斷調漲,功能是越加越多沒錯,但其實我都不需要啊!即便用的是付費版,但每月上傳量根本連免費版 60MB 的 1/4 都不到(內容主要是文字),所以後來又用回免費版了,覺得錢花得沒那個價值。 如果 Evernote 有提供輕量版功能的話,我還是願意付費的,基本上舊版 Legacy 就符合我三大需求:
  • 筆記軟體基本功能,執行快速、操作方便
  • 搜尋功能快速準確
  • 筆記能有效分類、整理
2023 年 Evernote 被收購後,聽說新版本 V10 是由新團隊開發的,原本的開發人員大多被裁了,難怪越做越沒人想用,軟體最初的精神已經失去,新團隊只著眼收割獲利。那時就開始注意替代品的社群討論,滿多試用者推薦 UpNote 是最接近原始 Evernote 精神的軟體,我也準備有空就來研究。 前幾天 Legacy 版突然不給登入(這篇文章寫於 2024 年初),我想這應該就是告別的時候了,Evernote 曾宣佈 Legacy 只能使用到 2024 某個日期。此時再次想起 UpNote,但實在沒閒暇研究,只好先下載 V10 擋著用,結果體驗相當差、難用、速度又慢,而且還跳出通知免費版只能有 50 個筆記!現在的 V10 根本天價,是我以前付費的 2 倍價格以上... 誰會想付更貴的價格,來使用更差的產品呢?所以硬著頭皮開始試用 UpNote、及其他筆記軟體,果然大家的看法是正確的,UpNote 的確是最符合我三大需求的類 Evernote 軟體。雖然有一些缺點,但優點似乎更多,幾天測試下來相當滿意,能成功脫離 Evernote 新團隊的綁架也讓內心舒坦不少,以下就來分享從 Evernote 轉換到 UpNote 的流程與心得技巧。

一、軟體操作說明與介紹

1. 官網說明以下列出開始之前,需要知道的重要相關連結: 2. 軟體介紹本篇的內容純粹根據我個人使用的角度,主要專注在基本的筆記功能,不會對 UpNote 進行詳細的功能介紹。因此想要全方位了解此工具的話,可參考這篇網路教學: 3. 軟體費用根據官網說明「Pricing」(Chrome 可翻譯為中文來閱讀),免費版最多只有 50 個筆記,但這個軟體收費相當便宜:
  • 一個月只要美金 1 元,相當於台幣 30 元
  • 如果一次付清可終身使用,我在 iPhone 可用 NT. 690 買斷
  • iOS, Mac, Android, Windows, Linux 這些裝置都能同步使用

二、匯出與匯入技巧

1. 匯入 Evernote 必須先付費「匯入 Evernote」這個功能免費版無法使用,所以一開始我必須先花 1 美金買一個月來測試,不過用了幾天確定沒什麼大問題後,就立刻果斷付費買下終身版,這個金額甚至比當初我買 Evertnote 一年的費用還便宜。 2. 匯出 Evernote 技巧匯出 Evernote 所有筆記是一件麻煩的事,Evernote 不想讓人跳槽所以匯出功能絕對不會寫得方便。還好網路有國外網友寫了工具「evernote-backup」讓這件事變得簡單,請下載這個工具: 然後可參考這篇文章「從印象筆記到Obsidian」→「使用第三方Evernote-backup 工具」,使用 Windows 命令執行 3 道指令,完成後即可快速匯出所有 Evernote 筆記。 需要注意的是,過程中需要輸入 Evernote 帳號密碼,如果有設定兩階段驗證的話,還需要接著輸入驗證碼。 3. 匯入 Evernote 技巧evernote-to-upnote-skill-1.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧叫出 UpNote 設定後,選擇「從 Evernote 匯入」 evernote-to-upnote-skill-2.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧點擊「選擇 .enex 檔案」,可選擇多個筆記本檔案一次大量匯入。 也可注意一下圖中的限制說明,例如大於 20MB 的附件不會匯入。

三、優缺點比較

以下是我用了幾天之後,跟 Evernote 相比之下的優缺點項目,以及解決方法。不過這些都只是我會需要用到的功能,不代表全面性的評測。 1. 不如 Evernote 之處先說說不方便的地方:
  • 截圖:顯而易見的是截圖功能,雖然把這算缺點有點冤枉,畢竟非筆記工具的必要功能 → 由於長年都是使用 Evernote 內建工具截圖後進行簡單圖片編修,現在必須另外找順手的截圖及簡易編修軟體代替。(最後找到 Greenshot 這個輕量軟體使用)
  • 捷徑:Upnote 沒有捷徑功能,用來替代的功能為「快速存取」,但只能設定單則筆記可出現在「快速存取」,不像 Evernote 也可把整個筆記本放在捷徑 → 還好 Upnote 發現一個驚喜,筆記本可以設定巢狀結構,不像 Evernote 只能設定兩層,所以我把筆記本的巢狀結構設定完善後,要前往特定筆記本也快速許多,不像 Evernote 要往下捲很久才能找到某筆記本
  • 刪除:刪除筆記較麻煩,不像 Evernote 按 del就能刪除筆記 → UpNote 必須按拗手的組合鍵 Ctrl+Backspace才能刪除,也許是怕誤刪的設計吧
  • 快速鍵:Upnote 快速鍵較少,例如關閉視窗沒有快速鍵,不像 Evernote 按 Ctrl-W可關閉 → Upnote 畢竟還很年輕,我有寫信建議增加快速建,未來越成熟後應該會改善。目前的話所有需要快速鍵的功能,或是需要改用更好按的按鍵組合,我都另外用快速鍵軟體自行設定,方便日常作業操作。
  • 滑鼠:拖曳功能還不太行,例如無法像 Evernote 將某記事拖曳到另一個記事本 → 總之 Upnote 還年輕,也不斷在更新,希望之後能逐步改善細部的使用者操作體驗。
2. 比 Evernote 更好之處 UpNote 輸 Evernote 的部份大多是在小地方、小細節,也就是操作的便利性,這些是大公司的強項。不過幾天用下來,發現 UpNote 很多 Evernote 沒有的功能真的很強、很方便,這也體現小公司的創新能力:
  • 巢狀結構:Evernote 一直以來只能使用兩層記事本,導致我的記事本列得一長串。UpNote 可使用真正的無限巢狀結構,終於能有系統的組織記事本
  • 目錄功能:這是 UpNote 的創新功能,在筆記內所設定的任何大標題(H1~H6)都能自動成為目錄,在側邊筆記資訊欄位看到,點擊後能快速前往,方便在內容較長的筆記內找資料,超級實用!
  • 折疊功能:這是 UpNote 近期新增的功能,同樣非常實用,可以設定將一大段內容摺疊起來,讓較長的筆記內容看起來比較不雜亂。
  • 開啟速度:UpNote 開啟筆記、顯示筆記內容都是瞬開,Evernote 舊版 Legacy 沒任何問題,新版 V10 開啟筆記的速度只有災難可以形容。
  • 版面編排:UpNote 的排版、文字、圖示等等,比 Evernote 看起來寬敞不少,眼睛很舒服
  • 筆記圖案:所有 UpNote 的筆記、筆記本都可自訂圖案,比較美觀
  • 圖片尺寸:將圖片貼入 UpNote 時,可選擇顯示「大、中、小」尺寸,方便快速調成適合版面的大小,不用拖拉半天
  • Markdown:UpNote 支援 Markdown 語法,可大幅加快文字輸入、編輯速度。雖然目前我很少用 Markdown,不過既然內建了這個功能,哪天有空就會來研究
  • 筆記本:Evernote 一個筆記只能隸屬於一個筆記本,而 UpNote 可以為一個筆記設定多個筆記本,如此就不用複製一樣的內容到其他筆記本
  • 編輯選單:這是 UpNote 近期新增的功能,在筆記內輸入斜線 "/"就能叫出所有常用編輯功能,實在太方便且實用,熟練後完全可以不必動到滑鼠。
  • YT 影片:Evernote 支援看 YouTube 影片的功能,但無法放大全螢幕。在 UpNote 內嵌 YouTube 影片後,全螢幕沒問題,原本的快速鍵也都適用。

四、操作優化(快速鍵)

UpNote 有許多快速鍵須同時按 Ctrl + Shift,不是很方便操作,所以我另外用快速鍵軟體「Hotkeyz」改成比較順手的按法,以下列出我比較常用的修改:
  • 搜尋全部筆記:預設 Ctrl+Alt+G→ 我改成 Alt+1
  • 複製到 UpNote:預設 Ctrl+Shift+Alt+V→ 我改成 Win+A,類似以前 Evernote 的用法
  • 視窗放大:沒有預設快速鍵,此為我常用的功能,所以有另外設定
  • 專注模式:預設 Ctrl+Shift+F→ 我改成 Alt+3
  • 關閉視窗:沒有預設快速鍵,此為我常用的功能,所以有另外設定
  • 切換資訊面板:預設 Ctrl+Shift+I→ 我改成 Ctrl+I
  • 內嵌 YT 影片:預設 Ctrl+Shift+Y→ 我改成 Ctrl+Y

五、實用技巧

以下簡單介紹幾個實用的技巧,可以增加工作效率: 1. 目錄功能筆記內容很長、且不確定要搜尋什麼字串時,找資料常常要捲很久,在這種情況下可為每個段落設定大標題,操作方法為按快速鍵 Ctrl+1 ~ Ctrl+6,就能分別設定 H1 ~ H6 大標題,而這些大標題,會自動成為該筆記的目錄。 evernote-to-upnote-skill-3.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧如上圖,兩個紅框的大標題都是按了 Ctrl+2設定成 H2,然後按 Ctrl+Shift+I開啟資訊面板,右手邊即可看到對應的目錄,要找的資料一目了然,點擊後就可立刻跳到該段落。 2. 折疊功能除了前面使用目錄的技巧,還可利用設定「折疊區塊」的技巧,將整個段落收合起來,這樣筆記內容就變得簡潔了。 evernote-to-upnote-skill-4.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧如上圖,選取整個要折疊的區塊,包含標題,選擇「折疊區段」的功能,或是按快速鍵 Ctrl+.evernote-to-upnote-skill-5.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧效果如上圖,隨時可以開合此區塊,右邊的選項圖示點進去還有底色等設定。 3. 斜線選單斜線選單是 UpNote 最近新增的超實用功能,只要按下斜線 "/"就能建立各種物件及編輯功能,例如大標題、表格、清單、日期...等等,詳細操作說明請見官網文件「Slash menu」(Chrome 可翻譯為中文來閱讀)。 evernote-to-upnote-skill-6.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧如上圖,在筆記內輸入斜線後,會自動出現選單,對照一下就知道這選單的順序就是下方工具欄位的順序。如果輸入的是 "/h2"就會設定 H2 標題。 evernote-to-upnote-skill-7.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧如果輸入的是 "/ta",系統會預期我們要輸入的是 table,便會出現表格選項讓我們選擇。所以如果常常使用某個功能的話,不妨記一下對應的英文,使用斜線選單就能快速建立相關物件。 4. Markdown Markdown 是能讓輸入速度翻倍的語法,詳細說明書可參考官網文件「How to Use Markdown with UpNote」(Chrome 可翻譯為中文來閱讀)。 5. 儲存搜尋如果常常使用某個搜尋結果的話,可以將之儲存起來,日後可直接取用,不必重複搜尋。 evernote-to-upnote-skill-8.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧例如在上圖的搜尋結果旁,有個「儲存搜尋」的圖示,按下後即可儲存。 evernote-to-upnote-skill-9.jpg-取代 Evernote 的輕量筆記軟體 UpNote﹍轉換心得與使用技巧這個搜尋結果會出現在「所有筆記」這裡,展開就可看到,將來點此處就不用重新搜尋了。

六、補充

UpNote 是個 2 人團隊,我相信這兩人其實就是開發人員,同樣身為開發人員我很清楚,產品開發早期會很希望得到各種面向的回饋,所以看到 UpNote 設定頁面有意見反應的聯絡 Email,我很快就把這段期間的使用建議傳送過去,沒想到隔一個小時就收到回覆。 所以我相信任何建設性的意見,研發團隊都會列入更新的考量。如果你也喜歡 UpNote 的話,可花點時間提供回饋,只要某些相同需求的數量夠多,相信將來會看到實現的一天。
更多 Windows 軟體心得:

Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃

$
0
0
blogger-rescue.jpg-Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃多年前曾寫過「Blogger 刪了你的網站怎麼辦?」,是因為知名網站「阿榮福利味」一度被 Blogger 刪除,結果前陣子我也遭遇類似狀況,發生了網站無預警被刪除的事件,而且牽連甚廣。當然我的狀況跟阿榮不太一樣,不過既然都是正當合法在經營網站,不會有違法違規的行為,自然申訴一段時間後 Google 也就恢復了網站。 前面那篇文章有提到一段話:「若是資金充足的話,商業性網站可以自架站,避免還要處理模糊地帶的事情。」,而這次出事的網站正是 "將來"預備商業化的網站。這樣的網站即使現在還未商業化,也早早會面對商業競爭及各種攻防。就算問心無愧沒有侵權行為、也沒有任何模糊地帶的事需要處理,依舊未能承受住這一波的攻擊。舉個常見的例子,許多無辜的 FB 粉絲團正是在網軍刻意的瘋狂檢舉之下,被官方給停了權,即便是不斷申訴抗爭及透過關係處理,也得好幾個月後才能恢復權限。 所以現在網站雖然恢復了,但我可不想同樣的事情再度發生,本篇除了紀錄我的救援流程,也會對預防措施及進行自架站的策略方針進行規劃。

一、申訴過程

1. 先確保沒有違規想要救回被刪除的 Blogger 網址,先決條件為 100% 確定沒有違反 Blogger 使用條款,否則神仙難救。如果你自知已經違反規定的話,也許先做好救不回網誌的心裡準備,可以跳過這個章節,直接看「二、救援網誌文章」及接續內容,準備建立新的網誌或搬到其他平台。 不確定有沒有違反規定的話,可參考「Blogger 網站突然消失了怎麼辦」→「一、網址被刪除的情形及原因」,詳細檢查「Blogger 政策」,逐條逐字詳細檢視並比對自己的狀況。 目前看到能恢復 Blogger 網站的案例,例如「阿榮福利味」、「Penny's House」、以及我的網站,都是因為沒有違規(也代表很倒楣),所以須再強調一次,想救回被刪除的 Blogger 網站,請先確保沒有違反 Blogger 使用條款。 2. 申訴過程能確定沒有違反規定後,接下來就是走申訴流程。基本上 email 都會收到網誌移除通知,按照說明及郵件內的連結進行就是了。 由於每個案例的狀況都不一樣,所以不會有統一的制式流程能參考,按照官方要求的申訴流程進行後,接下來能做的就是等待而已,直到恢復的時間點到來。 Penny 的案例花了 3 個月,阿榮福利味感覺好一陣子才恢復,我的網站費時一個月以上,這些時間點供參考。 3. Google 窗口遇到這種事會讓人比較洩氣的是,不會有 Google 窗口對接,導致有些動作你進行了也不知道有沒有效,如果能找到 Google 窗口的話至少能確定方向是否正確。 Penny 的案例她有找到一個 Google 窗口,雖然事後來看還是要走完申訴流程,但至少讓 Penny 回到正軌。而我的案例則是有人給我 Google 窗口提供的相關資訊,事後來看那些資訊並沒有超出我在「Blogger 政策」頁面逐字檢視所看到的內容,也就是說靠著我自身的理解仍是可完成申訴流程,不過至少能讓我確定做的是對的。 那麼此事我能提供的經驗會是,若人脈廣能找到 Google 窗口自然是最好,如若不然,詳讀「Blogger 政策」的每個字,也是能獲得所有必要資訊來完成申訴流程。

二、救援網誌文章

1. 是否定期備份網站網誌被刪除通常是無預警的,絕大多數站長不會有定期備份網站的習慣,倉促之間會煩惱過去多年的心血如何救回。 手動備份不太符合人性,總會有忘記執行的時候。過去寫過「部落格文章如何全自動備份」,如果有建立起自己的備份機制,發生意外時就不會手足無措。 若沒有任何備份的話,請參考接下來的管道,設法盡可能救回大部份的文章。 2. 從 Wayback Machine 找回備份可參考「忘了備份要如何救回部落格網站文章」,利用「Wayback Machine」來爬回所有文章備份。 如果網誌被刪除無法恢復,必須重新建立網站的話,那麼得從 Wayback Machine 取得以下完整資訊才行:
  • 文章 HTML 內容
  • 標籤
  • 留言
  • 靜態網頁(/p/xxxx.html) → 如果網站有建立這類頁面的話
3. 從 Bing 快取找回備份 Wayback Machine 除了不一定會備份到所有網頁,也可能備份速度沒那麼快,只能抓到三個月前發布的文章。畢竟世界上有那麼多網站且數量越來越多,我們無法強求非營利組織的伺服器能運作地那麼快。 那麼三個月內的文章要如何找到備份呢?瀏覽器快取頁面是一個選擇,然而 Google 前陣子已經宣佈「不再提供"網頁庫存"服務」,目前我找到的方法是是利用 Bing 瀏覽器,方法如下: blogger-rescue-1.jpg-Blogger 網誌被刪除的救援處理紀錄+預防措施+未來規劃
  1. 利用 site 指令找出網站的文章
  2. 按「工具」→ 設定日期區間,例如最近的三個月
  3. 篩選出來的文章中,看看網址後方有沒有「下三角」圖示,點擊後若有「快取版」,就能取得備份文章頁面了
4. 網站救援服務如果網站或文章遭到意外,需要救援服務的話,可參考這篇「網站救援服務﹍復原被刪除的部落格文章」,並與聯絡本站。

三、網址重新導向

網站被刪除後,Blogger 同時也會封鎖原網址,在封鎖期間不允許使用原網址。如果網站用途是提供線上服務的話,這麼一來會很麻煩,因為服務會面臨中斷的危機,該服務的使用者及新訪客會找不到網站。 解決方式有兩個途徑:
  • 暫時搬到別的平台 → 就可繼續使用原網址
  • 建立新的網站,使用臨時網址 → 然後設定網址重新導向,將原網址設定 301 或 302 轉到臨時網址
如果要設定「網址重新導向」,還有一點必須注意,除了首頁要轉址,所有文章頁面也必須轉址,這代表網址商要能提供「路徑轉址」的功能。 發生此次事件後才發現知名的 Godaddy 沒有「路徑轉址」功能,台灣的小網址商也沒有,還好後來找到一個完美的免費線上服務「redirect.pizza」,完整的使用心得與說明可參考「提供網址重新導向的免費服務﹍redirect.pizza」。

四、備份機制

前面提到的自動備份機制,可以複製網站文章內容,缺點是網站若被刪除的話,無法復原所有的留言資料,而有些站長恰恰是很珍惜所有訪客的留言。 為此我開發了一個自動備份工具,可以自訂備份週期,自動備份以下內容:
  • 文章 HTML 內容
  • 標籤
  • 靜態網頁(/p/xxxx.html)
  • 所有留言
有了以上資料後,可據以製作 Blogger 匯入檔(xml 格式),隨時可以恢復或重建網站內容。如果有站長需要這樣的工具,可參考這篇「部落格定時自動備份服務」,並與聯絡本站。

五、自架站考量

文章開頭有提到,那個將來會商業化的網站,為了應對商業攻防,必須搬到自架站才能避免再發生如同此次的意外,而這也是過去一兩個月我在研究的事。 詳細的考量過程及解決各種難題有太多主題需要紀錄,後續也會逐一發佈相關文章,這裡簡單說明最終做出的決定:
  • WP 是最知名的自架站平台,但後端需要投入時間熟悉 php 語言,還需要煩惱主機、流量等各種問題,費用也昂貴,無法列入優先選擇。
  • 利用 GitHub Pages 自架站,沒有 WP 需要煩惱的各種後端、主機、流量問題,也不需要費用。
  • 使用 Hexo 架站工具,同樣是熟悉的 JS 環境,不須額外學習新的語言。
  • 搭配 Cloudflare 可以讓 GitHub Pages 不必公開,可免費創建無限網站、無限流量
那麼對於 GitHub Pages + Hexo + Cloudflare 自架站有興趣的讀者,可再關注我後續的心得分享。
更多 Blogger 相關主題文章:

2024 如何讓 Win10 停止通知自動更新

$
0
0
win10-stop-auto-update.jpg-如何讓 Win10 徹底停止自動更新前陣子換新電腦,安裝完 Windows 10 很重要的一件事,是避免系統自動更新,原因及解決方法已紀錄在這篇「如何讓 Win10 徹底停止自動更新」。 以現在的時間點 2024 來說,最近檢驗過該篇的作法,對當初那台筆電仍然是有效的。然而同樣的作法對新電腦卻是無效,為何是如此呢?仔細想了想,原因大致如下:
  • 上一篇的原理,是修改 Win10 更新時會檢查的伺服器位址,讓系統找不到正確的伺服器導致更新失敗。
  • 我的新電腦是從微軟官網下載最新版本的 Win10,想必官方已經補上這個缺口,不再檢查 regedit(登錄編輯程式)中的設定值,所以原來的技巧自然無效
  • 舊筆電並非最新版 Win10 所以依然有效,那麼除非我能找到當初筆電的 Win10 版本來安裝,才能使用原來的技巧
所以本篇會找出 2024 絕不讓 Windows 10 自動更新的作法,同時微軟也宣佈了 2025 不再支援 Win10,代表之後不會再有新的更新版本,那麼相信本篇的作法,可讓使用者之後不用再擔心 Win10 會自動更新的問題。 (圖片出處: pixabay.com)

一、修改更新伺服器位址

上圖是我筆電「開始」→「設定」→「更新與安全性」→「Windows Update」的畫面,由於修改了 regedit(登錄編輯程式)中的更新伺服器位址,系統找不到正確位址的情況下,自動執行更新時總會出現上圖的錯誤訊息,所以永遠無法自動更新。 如前所述,如果你的 Win10 系統是最新版本,那麼這個技巧已經被封鎖,請直接跳過這個部份,看下個章節即可。 如果不確定你的 Win10 是什麼版本,或許可以試試這個技巧:
更改更新檢查伺服器:將下面内容拷貝到文本保存,副檔名更改為 .reg 之後右鍵點擊進行使用。 Windows Registry Editor Version 5.00 [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\WindowsUpdate] "WUServer"="127.0.0.1""WUStatusServer"="127.0.0.1""UpdateServiceUrlAlternate"="127.0.0.1" [HKEY_LOCAL_MACHINE\SOFTWARE\Policies\Microsoft\Windows\WindowsUpdate\AU] "UseWUServer"=dword:00000001
以上的原理就是把微軟更新伺服器改成 127.0.0.1,讓系統找不到檔案可以更新。

二、不讓系統更新的思路整理

1. 修改服務沒有用為了研究這個主題,我算是做了相當多的實測,針對網路上提出的各種主要修改方法都進行了測試。 幾乎大部分文章都會提到的修改「服務」內容,也就是將「服務」中的「Windows Update」改成 "已停止"。不過做這件事是沒有用的,如上圖,只要重開機,我的系統中這個服務就會自動變成「手動」、以及「執行中」的狀態,所以做這件事是徒勞無功的。 2. 修改登錄檔沒有用跟 Windows 更新相關的「修改登錄檔」有非常多地方可以改,但都沒什麼用,系統會經由別的程式來執行與「更新」相關的工作,跳過這些登錄檔設定。 3. 修改工作排程器也沒用將工作排程器中的 WindowsUpdate 排程「停用」也不會有任何用處,只要重開機就會看到上圖,排程自動變成「就緒」的狀態,並安排了下次的執行時間。 4. 不讓系統提示更新訊息才是根本方法從以上三點的實測可以發現,要阻止 Windows 更新是不可能的,微軟永遠可以出 patch 來繞過我們所有對系統的修改。 其實要阻止系統自動更新,有個根本的解決方法:
  • 執行關機的時候,不要出現「安裝更新並重新啟動」或「安裝更新並關機」這兩個選項就好
這麼做的意思就是告訴微軟,Windows 你可以自動下載更新,但請不要讓我們關機、或重新啟動時,佔用我們的時間進行更新。 而為何這是治本的方法,因為 Windows 系統本身有提供相關設定選項,所以我們不須改任何服務、登錄檔,這是官方允許的設定。

三、修改關機選項

1. 修改本機群組原則Win+R執行「gpedit.msc」執行 "本機群組原則": 電腦設定 → 系統管理範本 → Windows 元件 → Windows Update
  • 不要在 [關閉 Windows] 對話方塊中顯示 [安裝更新並關機] 選項 → 已啟用。這是最重要的設定,關機按鈕不會再出相關選項。其餘剩下的設定,也可順便做一下。
  • 設定自動更新 → 已停用
  • 自動更新偵測頻率 → 已停用
  • 移除對所有 Windows Update 功能的存取權 → 已啟用
  • 允許立即安裝自動更新 → 已停用
使用者設定 → 系統管理範本 → Windows 元件 → Windows Update
  • 不要在 [關閉 Windows] 對話方塊中顯示 [安裝更新並關機] 選項 → 已啟用
  • 移除對所有 Windows Update 功能的存取權 → 已啟用
2. 系統設定以下也是跟關機選項有關的設定: 「開始」→「設定」→「更新與安全性」→「Windows Update」→「進階選項」 所有選項通通關閉吧,最重要的是紅框,重新啟動時不通知更新。 3. 隱藏工作列提醒有時工作列的右下角,可能會出現要求更新的圖示,此狀況可參考這篇「Enable or Disable the Windows Update Status Taskbar Notification」,並按照該篇的說明進行:
  • 關閉工作列的通知圖示:「開始」→「設定」→「個人化」→「工作列」→「選取要顯示在工作列的圖示」→ 關閉「Windows 更新狀態」
  • 修改登錄檔:搜尋或執行 regedit(登錄編輯程式) → 找到 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\WindowsUpdate\UX\Settings → 如果沒有看到 TrayIconVisibility 的話,新增一個 DWORD,填入 TrayIconVisibility,將值設為 0 即可

四、刪除系統已下載的更新檔

基本上前面的步驟執行完畢後,關機時就不會出現要求更新的選項了,至少可以不用擔心使用電腦時,還要等待不知多久才能完成更新。這個作法帶來的副作用是,因為我們一直不更新,Windows 系統資料夾會積一堆自動下載的更新檔案: 進入資料夾路徑 C:\Windows\SoftwareDistribution\Download 可看到上圖,累積了不少檔案,可以每隔一段時間過來全部清除。 覺得麻煩的話,或許可以:
  • 寫個 bat 檔,一次清除該路徑所有檔案
  • 也可寫個工作排程,每個月定期執行一次這個 bat 檔
更多 Windows 相關文章:

為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品

$
0
0
github-page-hexo-cloudflare-blogger-alternative.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品因為經歷了「Blogger 網誌被刪除」事件,我計畫將出事的網站搬到自架站,可以避免網站寄人籬下時,需要應付平台的各種合理或不合理規範,不過有相當多問題要解決:
  • 要搬到哪個平台比較適當?如何抉擇各種自架站平台?
  • 能否沿用 Blogger 網址結構(才能不影響 SEO)?
  • 如何克服主機(或是網站託管平台)的流量或其他限制?
  • 能否匯入 Blogger 文章(是否支援 Blogger 匯入格式)?
  • 後台編輯界面是否合用?能否多人協作?
  • 能否從瀏覽器進入後台?有網路就能進入後台?
  • 能否自動備份網站,預防網站發生任何意外?
這裡面每個主題都相當龐大,且根據自身條件,每個人的解決方案都會不太一樣。為了克服所有困難,等待網站恢復的一個多月主要都在研究這些新的領域。最終我找到的替代方案是 Hexo,本篇會說明為何選擇 Hexo,以及從 Blogger 移轉到 Hexo 的大致流程。

一、如何決定架站平台

1. Blogger 網址結構 Blogger 文章的網址結構為 /年份/月份/xxxx.html,跟其他平台截然不同,所以搬遷網站最重要的就是,能否將網址結構移轉到新平台。 經研究後,只要不是搬到其他部落格/架站平台,而是使用自架站的方式,都可自行設定網址結構,所以只須挑選合適的自架站平台。 2. WordPress最多人使用、最知名的部落格自架站平台為 WordPress,但是經過深思熟慮後,暫時沒有採用 WP 的打算:
  • 後端需要投入時間熟悉 php 語言
  • 挑選主機商太麻煩,找了便宜的可能日後有糾紛,還須跟主機商周旋。找了貴的可能比較穩定,但目前沒營利,先期投資成本太高。
  • 網站流量若短時間衝高,可能會被主機商關閉,必須購買更高等級的主機。但若高流量並非常態時,就會讓花費不成正比
其實部落格型態的網站並不真的需要後端,所以 WP 的後端與主機到頭來是多餘的。不須後端的話只需要建立「靜態網站」就好,真需要用到後端時,可參考我常用的「Google 試算表作為資料庫」系列文,所以只須將目標擺在可建立靜態網頁的自架站平台即可。 3. 程式碼託管平台參考這個討論頁面「開源git託管平台有哪些」,最知名的程式碼代管平台有這些:GitHub、GitLab、Bitbucket、SourceForge、Gitea...等。 這些存放程式碼的平台都可以用來架設靜態網站,不需要主機、流量費用,當然他們也有付費方案,等我們的網站、線上服務規模大了,需要更多功能時,再來考慮付費,這樣會比一開始還不知道能否賺錢,就貿然使用 WP 架站好太多了。 這些平台之中,GitHub 最知名、最多開發者使用,且被微軟收購,網路上能查閱到最多的參考資料,遇到困難自然最容易找到解答,所以把 GitHub 作為自架站首選沒什麼問題。

二、如何選擇架站工具

1. GitHub 如何架站 GithHub 提供了「GithHub Pages 架設靜態網站」功能,只要上傳 HTML/JS/CSS 就能呈現一個靜態頁面。 但總不能整個網站都用雙手刻出來,如此太花時間,因此有了「靜態網頁產生器」(Static Site Generator)這樣的工具產生,加快我們的部落格架站速度。 2. 靜態網頁產生器這篇「8 個靜態網頁產生器」整理了這些熱門架站工具:
  • Jekyll: Ruby
  • Hugo: Go
  • Gatsby: React
  • Next.js: React
  • Hexo: Node.js
  • Eleventy: Jekyll 的 JavaScript 替代品
  • VuePress: Vue.js
  • Nuxt.js: Vue.js
架站工具後面標示其使用的語言或框架,接下來說明我的選擇。 3. 為何選擇 Hexo我在「使用 Node.js 爬蟲定期抓網頁資料,結合 Google 試算表作為資料庫」曾提過 "選擇 Node.js...並搭配 Google 試算表...只要學會 Javascript 就能通吃「前端+後端+資料庫」",所以在眾多靜態網頁架站工具中,我自然要挑以 JS 作為開發環境的 Hexo 或 Eleventy,日後自己修改原始碼才方便。 而經由這篇「靜態網站產生器大比拚」的分析,Hexo 跟 Eleventy 相比的優點有:
  • 比較知名、較多人使用
  • 社群討論多,華語使用者相當多
  • 主題很多
挑選工具最重要的一點是,越多人使用,將來遇到問題才比較容易找到答案,所以對我來說 Hexo 就是首選。而且 Hexo 作者(Tommy Chen)來自台灣,Hexo 官網有完整的中文說明頁面,真的沒什麼不用他的理由!

三、如何選擇網站託管平台

1. GitHub Pages 的侷限開始使用 GitHub Pages 之前,需要了解免費的前提下有哪些限制,可參考官方文件「GitHub Pages 使用限制」,以下列出比較重要的幾點:
  • 公開儲存庫才能使用 GitHub Pages
  • 不可商業使用
  • 檔案上傳空間限制為 1GB
  • 每月傳輸頻寬為 100 GB
  • 每小時部署次數上限 10 次
GitHub 最初的用意即為提供公開原始碼的儲存空間,所以自然上傳的檔案得公開,才允許使用 GitHub Pages 架設網站。基本上這些限制對於一般部落格型態的網站,應該都沒什麼問題,所以如果都能接受的話,就可使用 GitHub Pages 架站,並跳過此章節。 但如果網站檔案有些不想被看到,或是想要有更多的流量,那麼請繼續往下看要如何繞過 Github 的限制。 2. 可佈署 GitHub 的網站託管平台除了 GitHub 之外,還有很多知名的網站託管平台,例如 Google、Amazon 都有提供對應的服務。且如前所述,由於 GitHub 是這些平台之中最大、最知名的,所以基本上各大網站託管平台都支援 GitHub。意思就是說,在 GitHub 建立的儲存庫(repository),幾乎都能直接匯入各大網站託管平台,並且可以同步。 這篇「各大免費託管平台體驗有感」介紹了三個可以佈署 GitHub 的知名平台 Netlify、Cloudflare Pages、Vercel 及大致的免費使用限制。 大致比較一下後,Google 收購的 Firebase Hosting,以及亞馬遜(AMAZON)的 AWS Amplify,免費使用的條件比較以上三個差,而其他沒那麼知名、使用者較少的平台就先略過,那麼先整理一下這三個平台的限制條件及優缺點。 3. Netlify Netlify 免費版功能可參考官網「Pricing」頁面:
  • 每月傳輸頻寬為 100 GB
  • 每月佈署時間 300 分鐘
100 GB 對一個網站應該沒問題,如果有多個網站就要計算一下了。除此之外還有很多強大的功能,例如有帳號管理功能(免費版可5個帳號登入),需要多人協作後台的話,Netlify 會是首選,之後會另外發文介紹 Netlify。 4. Vercel Vercel 免費版功能可參考官網「Limits」頁面:
  • 每月傳輸頻寬為 100 GB
  • 每月佈署時間 100 小時
傳輸頻寬 100 GB 應該也是一個帳號的所有網站總合,大部分的限制看起來比 Netlify 還要好,也是值得考慮的選擇。 5. Cloudflare Pages Cloudflare Pages 免費版功能可參考「開發人員平臺」頁面 →「Cloudflare 頁面」: github-page-hexo-cloudflare-blogger-alternative-1.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品看到上面這張圖了嗎,真是太離譜了,Cloudflare 是比前兩家知名度更大的公司,網站不但有中文界面,而且免費版的限制更優渥——完全沒有限制! 可以建立無限的網站,而且每個網站都有無限的頻寬,這樣下來根本沒什麼好比較,沒什麼好考慮,Cloudflare Pages 就是首選啦~

四、如何匯入 Blogger 文章格式

github-page-hexo-cloudflare-blogger-alternative-2.jpg-為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品平台問題都解決後,接下來要研究如何將 Blogger 文章轉換為 Hexo 能讀取的格式。在 Hexo 官網「Plugins」有看到兩個相關工具,之後撰寫 Hexo 系列文章時會再說明。

五、如何處理後台編輯、協作問題

1. 本地後台編輯官網提供的外掛之中有個「Hexo Admin」可以進行後台編輯,但只能從本地 localhost 執行。如果沒有特別用途,也許這樣就夠用,那麼就可以跳過這個章節的剩餘部份。 2. 雲端後台編輯如果希望比較有機動性,在各處有網路的環境就能上網進後台編輯,而非只在自己電腦才能作業,那麼得為 Hexo 安裝 CMS 後台管理功能。因為網站架在 GitHub,可選擇「git-base CMS」(基於 git 的內容管理系統),這篇「9 best Git-based CMS platforms」介紹了 9 個知名的工具,雖是英文頁面但可翻成中文看說明。 直接說結論,挑選原則如前所述,越多人使用的越好,「Decap CMS」是免費開源專案,有龐大的社群討論,遇到問題容易找答案,其前身就是非常知名的 Netlify CMS。後來母公司 Netlify 決定專心做「網站託管平台」這一塊,乾脆把 Netlify CMS 獨立出去,之後才改名為 Decap CMS。 3. 多人協作後台如果除了上網編輯後台,還希望多人協作的話,就可選擇 Decap CMS(Netlify CMS) 配合 Netlify,使用其特有的 Netlify Identity 服務,管理最多 5 個使用者(免費版)。 因為兩者原本是同一家,Decap CMS 官網說明文件甚至有「搭配 Netlify Identity」的操作說明,是多人協作最簡便的方案。

六、如何自動備份網站

Github 提供了一個自動執行的工具「GitHub Actions」,可以設定在 "執行特定動作時"觸發一連串動作,也可以設定 "定時執行"。 那麼要自動備份網站,就可利用 GitHub Actions 定時執行 "複製儲存庫的檔案"到指定位置即可。 其他需要注意的地方,可參考「Github Action 經驗分享」,例如私有儲存庫每月執行時間為 2000 分鐘。

七、Hexo 安裝

開始 Hexo 架站之前需要決定、研究的主要問題有以上這些,找出解決方案後終於可以開始正式架站,而過程中需要解決的問題,數量及耗費時程又是遠遠超過本篇的內容,將會另外撰寫系列文章作為紀錄。
更多 Hexo 相關文章:

讓 Line 網頁版能開機自動執行

$
0
0
line-web-startup.jpg-讓 Line 網頁版能開機自動執行長久以來在多台電腦使用 Line 的困擾是,登入後 Line 會自動將其他電腦的 Line 登出。而且被登出後,下次這台電腦開機就不會自動登入,必須重新輸入密碼,還挺麻煩的。 如果家裡有一台桌機、一台筆電,想要都使用 Line 但又希望不會被自動登出,導致需要重新輸入密碼,最好的辦法是第二台裝置改用「Line 網頁版」。 不過隨之而來的問題會是,由於 Line 網頁版無法開機自動執行,有時會忘了手動執行,但卻又誤以為有執行。最近我就遇到一件禍事,使用筆電又以為有執行 Line,結果一直沒聽到 Line 通知音效,漏了好幾個重要的通知... 經此教訓後,決定徹底研究如何讓 Line 網頁版開機自動執行,請見本篇以下的研究心得。

一、Chrome 單獨執行套件的方法

1. 開機自動執行的思路要能開機自動執行,得想辦法將程式做成捷徑、或是 bat 批次檔,放在 Windows「啟動」資料夾中,系統才能自動執行。 而 Line 網頁版是 Chrome 的一個套件,研究的方向可以找找是否有方法,能讓 Chrome 套件單獨執行,並且還能用「命令字元」執行,這樣才能做成捷徑。 由於 Chrome 執行檔有非常多啟動參數可以使用,可參考這篇「Chrome啟動參數大全」,我們可以從中找找跟本篇相關的參數。 2. Chrome 如何單獨執行套件我也找到了這篇「在 Linux 上讓 Chrome 的 Line 擴充元件當作獨立運作程式執行」,雖然這篇是 Linux 環境,但我把相關參數拿來 Windows 下使用應該也是可以。該篇提到了 chrome 執行檔可用下參數來獨立執行 Line:
  • --app='chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html'
line-web-startup-1.jpg-讓 Line 網頁版能開機自動執行可惜我試著執行後,出現上圖畫面,不知是哪裡出了問題。 3. 檢查套件 ID因為該作者是在 Linux 下執行,假設他安裝的 Line 套件 ID 如果跟我不一樣,會不會就是出錯的原因? 我們可進入 Chrome 套件的頁面 →「chrome://extensions/」→ 點擊 Line 的「詳細資料按鈕」 line-web-startup-2.jpg-讓 Line 網頁版能開機自動執行如上圖,可看到 Line 網頁版套件 ID 字串為以下: ophjlpahpchlmihnnnihgmmeilfjmjjc基本上跟前面的 Chrome 啟動參數中的 Line ID 是一致的: --app='chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html'這下有點麻煩,問題究竟出在哪裡,為何 Line 無法正常啟動呢?

二、找出 Line 網頁版真實網址

還好這件事對前端工程師來說並不困難,我先跑一次正常流程: 執行 Chrome → 點擊 Line 套件圖示 → 輸入帳號密碼,讓 Line 正常啟動 → 叫出開發人員工具(可以按滑鼠右鍵 → 檢查,或是按熱鍵 Ctrl+Shift+I) line-web-startup-3.jpg-讓 Line 網頁版能開機自動執行如上圖,出現下方的「開發人員工具」後,切換到「主控台」,輸入指令 location.href,查看此頁面的網址,果然找到答案了: chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html#/chats這才是正確的 Line 網頁版套件執行網址,所以我只要將 Chrome 啟動參數改成以下就可以了: --app='chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html#/chats'果然執行後就能正常開啟 Line 網頁版套件了。

三、製作 Line 網頁版開機捷徑流程

前面的內容都是說明找到解答的過程,為了避免錯誤,以下詳細說明如何製作 Line 網頁版開機捷徑流程: 1. Chrome 安裝 Line 套件line-web-startup-4.jpg-讓 Line 網頁版能開機自動執行點擊右上角「加到 Chrome」進行安裝,務必確認已成功安裝,接下來才能製作捷徑。 2. 找出 Chrome 路徑找出 Chrome 路徑的方法可利用 Windows 工作列的「搜尋」,找到 "chrome.exe"的位置,以我的路徑為例,檔案位於: C:\Program Files\Google\Chrome\Application接著從檔案總管對著「Chrome.exe」按右鍵 → 建立捷徑,系統可能會要求將捷徑放在桌面。 3. 製作捷徑line-web-startup-5.jpg-讓 Line 網頁版能開機自動執行對著這個 Chrome 捷徑按右鍵 → 內容,會看到「目標」的字串如下: "C:\Program Files\Google\Chrome\Application\chrome.exe"把以上字串後面加上參數: "C:\Program Files\Google\Chrome\Application\chrome.exe" --app="chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html#/chats"請注意如果 Chrome 路徑跟你的不一樣,請改為你的 Chrome 路徑。 修改完請按「套用」、「確定」,現在可以試著點擊這個捷徑,應該可以成功執行 Line 網頁版了。 4. 啟動資料夾接下來要將 Line 網頁版捷徑放到啟動資料夾,讓 Windows 開機時自動執行。啟動資料夾通常位於這裡: C:\Users\使用者名稱\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup將 "使用者名稱"改成你的帳號名稱,用檔案總管開啟這個路徑,然後將 Line 網頁版捷徑複製到這裡就完工了。

四、補充

1. Line 網頁版無法記憶密碼比較麻煩的是,Line 網頁版不會自動記憶密碼,每次開機都需要重新輸入密碼,不過往好處想,至少 Line 不會忘了執行,而漏了通知訊息。 為了解決這個問題,我會另外寫一篇自動化的解決方案,不過是很大的工程,需要一點前端知識比較適合執行。 2. 捷徑如果失效怎麼辦目前這個 Line 網頁版捷徑應該不會有什麼問題,但是無法排除 Line 網頁版如果有更新版本的話,不曉得捷徑的路徑是否還是一致。 不過本篇既然詳細說明了原理,相信讀者可以從本篇的內容找出修改捷徑的方法:
  • 檢查網址:萬一將來出現「一、Chrome 單獨執行套件的方法」→「2. Chrome 如何單獨執行套件」這裡的錯誤畫面,代表 Line 網頁版真實網址已經改變了,請按照「二、找出 Line 網頁版真實網址」的流程找出真實網址,並修改捷徑的路徑即可
  • 檢查套件 ID:萬一將來 Line 網頁版的套件 ID 變更了,請按照「一、Chrome 單獨執行套件的方法」→「3. 檢查套件 ID」的流程找出 ID,並進行修改即可
更多 Line 相關技巧:

Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages

$
0
0
hexo-github-pages.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages接續「為何我選擇 GitHub Page + Hexo + Cloudflare 作為 Blogger 替代品」,本篇為「Blogger 搬到 Hexo 流程」系列文第一篇,說明如何在 GitHub 架設 Hexo 網誌。 這個過程有相當多步驟,且網路上已經有許多教學文章,所以大部分流程會直接提供寫得不錯的教學連結,請直接參考即可。需要補充的部份、以及我踩到的坑,才會花比較多篇幅紀錄。

一、基礎環境準備

安裝 Hexo 之前需先建構基礎環境,因 Hexo 的開發環境是 Node.js 所以需要先安裝 Node.js;網站要架設在 GitHub 的話,需先註冊,且安裝 Git 才方便操作;因此請先完成以下動作: 1. Node.js2. Git3. GitHub

二、安裝 Hexo

1. 執行 Git安裝、操作 Hexo 各種功能都需要靠輸入指令,可以透過前面下載的 Git 指令界面。但執行指令的位置,需要在我們安裝 Hexo 的資料夾,所以我們可以先建立一個資料夾,例如位於: D:\wfu_blog\hexohexo-github-pages-1.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages安裝完 Git 桌面會有個捷徑,編輯此捷徑的內容,如上圖,將「開始位置」改成 Hexo 資料夾位置。 hexo-github-pages-2.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages如上圖,將來執行此 Git 捷徑,路徑會自動從 Hexo 資料夾開始。 2. 安裝 Hexo安裝教學可參考「架設 Hexo+GitHub」→「2.安裝 Hexo」的流程,執行 Git 後,依序輸入以下指令: npm install hexo-cli -g這個指令會安裝並讓 hexo 主程式能夠以全域(在任何資料夾)執行 cd ..如果你按照前面範例設定 Git 捷徑的開始位置是 Hexo 資料夾(例如 D:\wfu_blog\hexo),接下來這個指令可將路徑移到上一層(例如 D:\wfu_blog) hexo init 專案名稱專案名稱請改為自訂字串(例如我前面設定的 hexo),這個指令會建立這個專案並進行初始化,如果專案名稱資料夾尚未建立的話會自動建立,如果資料夾已存在則會複製所有相關檔案進去。 cd 專案名稱進入專案資料夾 npm install這個指令會自動安裝專案資料夾中 package.json 這個設定檔中,hexo 所有需要的相關套件,到了這一步 Hexo 就全部安裝完成了。 3. 測試效果hexo server hexo 複製到專案資料夾的檔案已經有一些範例文章內容,執行以上指令(或是簡化為 hexo s)就能在本地啟動 hexo 伺服器,並出現提示訊息,開啟瀏覽器並貼上以下網址即可預覽網站效果: http://localhost:4000/結束本地伺服器按 Ctrl+C即可。

三、發布到 GitHub

接下來說明如何將本地的 Hexo 專案發布到 GitHub,流程可參考教學「架設 Hexo + Github」→「部署 Deploy 設定」,請按照以下步驟: 1. 建立儲存庫首先登入 GitHub,然後新增一個「儲存庫」(Repository),可直接進入這個頁面「https://github.com/new」就能新增儲存庫。 2. 儲存庫網址連結儲存庫網址連結的格式為: https://github.com/帳號/儲存庫名稱.git例如我的帳號為 wfublog,儲存庫名稱為 hexo,那麼網址就是以下(之後會用到): https://github.com/wfublog/hexo.git3. 安裝 hexo 佈署套件在 hexo 專案路徑下開啟 Git,執行以下指令即可安裝 hexo 佈署套件: npm install hexo-deployer-git --save4. 修改 _config.yml參考 Hexo 官網文件「佈署」來修改,在 hexo 專案路徑下有個設定檔 _config.yml,用編輯軟體修改內容如下: deploy: type: git repo: https://github.com/wfublog/hexo.git branch: main
  • repo 參數請填入自己的儲存庫網址連結
  • branch 參數現在 2024 年預設會是 main,也可改為自訂的分支名稱
  • 請特別注意該空格的地方都要有空格,否則會出錯。
5. 佈署到 GitHub在 hexo 專案路徑下開啟 Git,執行以下指令: hexo deploy以上指令也可簡化為 hexo d,即可將網站佈署到 GitHub。 hexo-github-pages-3.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages重新進入你的儲存庫網址,就可看到 Hexo 網站的檔案都已上傳了。

四、設定 GitHub Pages 網址

系列文的主題是從 Blogger 搬到 Hexo,且網址要移轉過來,那麼前提一定是已購買自己的網域,接下來就是將 Hexo 網站設定成之前的自訂網址。 1. GitHub Pages 設定進入 GitHub 儲存庫頁面,按下圖說明設定網址: hexo-github-pages-4.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages
  • 點擊右上方「Settings」分頁
  • 點擊左側「Pages」
  • Branch 分支區塊選擇前面設定的分支,例如圖中預設的 main
  • Custom domain 填入自訂網址,如圖中的 hexo.wfublog.com,然後按「Save」
  • 接下來需要到網址商後台設定 DNS,接下個圖的設定畫面
  • 全部設定完後,可能要等一段時間,才能勾選圖中的「Enforce HTTPS」來啟用 HTTPS
2. DNS 設定hexo-github-pages-5.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages進入自己的網址商後台,例如上圖我是使用 Google Domains,新增一筆 DNS:
  • 例如我的子網域設定成 hexo
  • 選擇 CNAME
  • 指向 你的github帳號.github.io,例如圖中的 wfublog.github.io
3. 自訂網址以上兩個流程都完成後,進入自訂網址就能看到 hexo 網站效果了。

五、踩坑紀錄

1. 自訂網址問題hexo-github-pages-6.jpg-Hexo 架站流程踩坑紀錄(1)﹍建立 GitHub Pages GitHub Pages 設定完自訂網址後,跟目錄下會自動產生一個檔案 CNAME,上圖可看到此檔的內容就是自訂網址字串,例如我的自訂網址為: hexo.wfublog.com然而將來只要每次執行佈署指令 hexo deploy以後,就會發現 CNAME這個檔案被洗掉了,且自訂網址也無法進入了。要避免這個問題,得每次佈署時,在根目錄產生 CNAME這個檔案才行。 我們在 Hexo 專案資料夾可找到一個目錄「source」,在這個路徑下存放的檔案,佈署到 GitHub 時會自動複製到根目錄。了解原理後就知道解決方法了,我們將 GitHub 自動產生的 CNAME檔案,複製到 source目錄中,佈署後自訂網址就不會消失了。 2. GitHub 網址問題如果網站沒有設定自訂網址的話,GitHub Pages 的設定頁面會自動產生一個網址,結構有可能是以下兩種形式:
  • 你的github帳號.github.io
  • 你的github帳號.github.io/儲存庫名稱
如果是第二種的話,網址路徑有「儲存庫名稱」,會導致 hexo 讀取 js/css 的路徑出錯,那麼進入網站後會只看到文字,無法渲染 css 樣式。 如果你架設多個 GitHub Pages 又沒自訂網址就會遇到這個狀況,那麼解決方法就是使用自己買的網址。 3. 身份驗證錯誤如果首次使用 GitHub 的話,按照多數教學流程應該會遇到跟我一樣的狀況,佈署到 GitHub 時會報錯,告訴你 "Author identity unknown",也就是說 GitHub 認不出你是誰。 解決方法請參考這篇「手把手教你搭建Hexo博客」,使用 Git 輸入以下指令,登記身份後再佈署就行了: git config --global user.email "填入註冊github使用的email" git config --global user.name "填入github帳號"4. email 沒有公開然而,如果你前面登記的 email,在 GitHub 後台設定中,該 email 並未設定成公開(是private狀態),那麼會遇到另一個錯誤訊息 "Your push would publish a private email address..."。 最簡單的方法就是將 email 公開即可,或是想要折騰的話,可參考這篇「Error "Your push would publish a private email address"」,按照討論串提供的流程進行。 5. 使用多個 GitHub 帳號另外,如果同時要使用多個 GitHub 帳號的話,前面「3. 身份驗證錯誤」登記身份的方法只能使用一個帳號,此時可參考這篇「如何在一台電腦使用多個Git帳號」的流程,有點小麻煩,需要為每個帳號設定不同的金鑰,再分登記身份。
Hexo 架站系列文章:

Windows 新電腦能否不重新安裝常用軟體及設定?

$
0
0
windows-reinstall-software-skill.jpg-Windows 新電腦能否不重新安裝常用軟體及設定?最近買了新的 Windows 桌機,一方面心情很是愉悅,新顯卡無論是玩 3A 大作或是播放影像都不必再擔心;但另一方面則必須再次面對建置新電腦的苦楚,就像之前的 Win10 新筆電,所有常用軟體及套件都要重新安裝、設定、測試,沒花個幾天是搞不完的,光想就十分心累。 而且重新設置作業環境這件事,身為前端工作者又比一般使用者更麻煩,例如我使用的「 Sublime Text 3」就不知有多少套件要重新安裝及設定,當然直接複製檔案是不行的,因為還有大量的 Node 套件要安裝及設定。然而我完全不想重新跑一次這個流程,只希望有方法可以直接把舊電腦的檔案複製過來就能使用。 如果這件事能實現的話,將來換新電腦、筆電時就不會再有陰影,還能省下大量時間。本篇會說明我研究各種解決方案的思路及實測結果,以及後續的收尾動作。 (圖片出處: pxhere.com)

一、不重新安裝軟體的原理與可能性

1. 免安裝版本 Windows 軟體不重新安裝最簡單的方法,是改用「免安裝版」,因為設定檔等相關檔案通常在同個資料夾,將來整個打包複製帶走就好,可以省下安裝設定的時間。 以上原理是很簡單的,不過實務上對我來說不太好辦:
  • 我已安裝了太多軟體,一一找出免安裝版太花時間,還要另外花時間重新設定
  • 並非大部分軟體官方都有出免安裝版,執意要用免安裝版的話,得承擔第三方製作的風險,不曉得會不會暗藏一些驚喜(木馬)
所以只能將來使用新軟體時,盡量找合乎安全的免安裝版,目前則暫且擱下。 2. Dropbox基本上我的重要資料都放在 Dropbox 隨時同步,也有想過某些重要軟體可以放在 Dropbox 資料夾讓其同步,當然必須是免安裝版本。 這在實務上是可行的,但 Dropbox 在不同裝置的路徑及磁碟機代號都必須一模一樣,否則軟體設定內容包含路徑的話就慘了。 只不過覺得這麼做的話還是有些隱憂,畢竟每個電腦的環境都不太一樣,例如螢幕尺寸、解析度、顯示的文字大小等等,到時設定檔內容在每個裝置同步的結果,可能會互相覆蓋不斷打架,反而每次執行軟體都要調整文字大小,那麼將軟體安裝在 Dropbox 的構想還是暫時打消了。 3. 使用者設定檔由於安裝了大量 Node 套件,發現這些套件的路徑都集中在 Windows「使用者」資料夾之下。這很像是 Windows 登錄編輯程式,存放了大量的系統設定資訊,而 Windows「使用者」資料夾就是實體的登錄設定檔存放位置。 所以我產生一個構想,把 Windows「使用者」資料夾複製到新電腦,就等於將大部分軟體的安裝設定檔都搬到新電腦,應該有機會可以不用重新安裝才是? 因此決定將這個構想進行實測,看看效果會是如何,成功的話就能省下大量時間。不過需要注意「使用者名稱」必須一模一樣,否則一大堆路徑都將無法正確讀取。 4. 必須重新安裝的軟體但我不認為所有的軟體設定檔、相關依存檔案都放在「使用者」資料夾,因為 Windows 下還有好幾個資料夾,軟體有可能安裝在這些地方: windows-reinstall-software-skill-1.jpg-Windows 新電腦能否不重新安裝常用軟體及設定?如上圖紅框標示的三個資料夾 Program Files、Program Files (x86)、ProgramData,都是安裝軟體時可能會自動存放的位置。因此必須檢查你的常用軟體,如果出現在這三個資料夾,有可能必須重新安裝。 根據實測,我出現在這三個資料夾、必須重新安裝的常見軟體有:Chrome、Line、Dropbox。

二、實測流程

1. 準備動作
  • 新電腦的磁碟區架構分割成跟原本電腦一致,容量不能小於原電腦
  • 登入的使用者名稱必須設定成跟原本的一模一樣
2. 先安裝必須手動安裝的軟體先別急著複製檔案,必須先將前面「一、不重新安裝軟體的原理與可能性」→「4. 必須重新安裝的軟體」進行安裝。 每個人找到的軟體可能不一樣,以我為例的話,這些軟體必須先進行安裝:Chrome、Line、Dropbox。 安裝後先執行一次,就可將軟體關閉,不必進行設定也不必同步。 3. 複製所有檔案接著複製以下所有檔案到新電腦:
  • 將「使用者」資料夾之中,你想要搬遷的使用者名稱,複製過來 C 槽,注意路徑要一致
  • 將 C 槽以外的磁碟,需要搬遷的資料夾都複製到對應的磁碟機
不重要的資料夾例如暫存資料夾、系統產生的資料夾等等,都不需複製,將來這些會自動產生。 4. 結果令人滿意複製完畢後,基本上原本桌面的所有內容、捷徑都會還原成跟之前一模一樣。 測試了一下常用、比較擔心的軟體,例如 Sublime Text 3、Notepad++ 都能正常執行,設定細節都有自動抓過來,許多基於 node 的套件也都運作正常,不必重新設定細項,簡直是無痛移轉,不用重安裝也能直接搬遷日常作業環境,真是太讓人滿意了! 另外 Chrome 原本我有多個 profile 帳號,將「使用者」資料夾複製過來後,這些 profile 帳號也自動還原,也算是比較方便的搬遷方式,不過需要重新一一登入就是,這部份收尾動作再細說。

三、收尾動作

最麻煩的部份已經解決,接下來還有一些瑣碎、但比較不用花大量時間的動作需要收尾。 1. 環境變數新電腦需要重新設定「環境變數」,否則有些程式執行時會抓不到正確的路徑。手動一筆筆輸入比較麻煩,比較方便的方法是將「環境變數」匯出及匯入,可參考這篇「備份及恢復 Windows 環境變數」:
  • 在舊電腦執行「登錄編輯程式」:按 Win+R執行 regedit
  • 「系統環境變數」的位置在 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager\Environment → 按右鍵選「匯出」→ 例如存在 D:\sys_var.reg
  • 「使用者環境變數」的位置在 HKEY_CURRENT_USER\Environment → 按右鍵選「匯出」→ 例如存在 D:\user_var.reg
  • 將剛剛儲存的兩個 .reg 檔複製到新電腦,點擊執行,即可自動匯入環境變數
2. 連結副檔名因為沒有重新安裝軟體,所以許多檔案的副檔名不會對應到正確的軟體,必須手動一一處理:
  • 執行軟體內的設定:有些軟體找到「選項」設定的地方,可以直接關聯副檔名、右鍵選單等等,例如 7-Zip、看圖軟體、影片播放軟體等。
  • 設定文件的開啟程式:無法經由軟體設定的話,可從檔案總管直接找到要改的文件類型,按右鍵 → 內容 → 變更 → 選擇軟體路徑 → 勾選「一律使用此應用程式來開啟」即可
3. 重新登入各個軟體如果需要登入的話,必須重新一一登入,讓軟體記憶及進行同步。

四、總結

基本上跟「安裝軟體」相關的部份,做到這裡就差不多了,跟重新安裝相比,真的省下非常多時間,例如原本需要事先一一紀錄系統所有已安裝的軟體、已安裝的套件,還要一一重新下載所有安裝檔,有的軟體甚至還要安裝說明步驟。 同時現在下載的安裝檔一定版本比較新,到時有的軟體版本跟套件版本還可能起衝突,又是一件麻煩事,還不如舊電腦已經跑順的作業環境,直接搬過來比較不會出問題。 然後安裝完還要逐一設定、測試,又是另一個超級大的工程,整個流程跟實體搬家差不多累。不過有了本篇的經驗後,將來換電腦就不再是苦差事了~
更多 Windows 軟體心得:

自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧

$
0
0
hotkeyp.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧過去一向使用的快速鍵軟體是「Hotkeyz」,不過由於軟體已經停止開發、更新相當多年了,似乎是從使用 Win10 開始,出現了一些相容性問題。 現在我改用的替代品是 HotkeyP,使用上手後覺得還不錯,不過在熟悉的過程中要處理的坑倒是不少,好在官方英文說明書寫得算是詳盡,遇到的問題多能解決,請見本篇的心得整理。 (圖片出處: pixabay.com)

一、下載+介紹+簡易教學

1. 相關連結首先請參考以下重要連結: 官方說明書雖是英文,但是非常詳細,可用 Chrome 翻成中文查找答案。 2. 更改語言hotkeyp-1.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧開始使用之前,先依照上圖將語言改成中文,但目前只有簡體中文可使用,有些地方會出現奇怪的翻譯。

二、組合鍵操作說明

1. 組合鍵功能 HotkeyP 我最常使用的快速鍵功能是「組合鍵」,也就是利用按下自定義的熱鍵後,觸發一組「組合鍵」,例如參考「讓 WIN8 / WIN10 能用 CTRL + SPACE 切換中英輸入」,系統預設的輸入法切換組合鍵為 Win+Space,但我們習慣的按法可能是 Ctrl+Space,就可利用 HotkeyP 設定,按下 Ctrl+Space後觸發 Win+Spacehotkeyp-2.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧如上圖新增一組熱鍵:
  • 熱鍵組合如上方紅線,設定為 ctrl + 空白鍵
  • 接著按「左箭頭圖示」→「宏命令」(macro 巨集的翻譯) →「宏」
hotkeyp-3.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧接著在「參數」欄位填入 \win\space,按確定即可,將來就能按快速鍵 Ctrl+Space來觸發 Win+Space2. 按鍵代碼從前面的範例可以看出,所有的按鍵代碼格式為「斜線 "\" + 代碼」,如果要查詢所有按鍵的代碼可參考官方說明書網址,也可參考下面我整理的相關內容:
\esc, \tab, \backspace, \enter, \space, \left, \right, \up, \down, \ins, \del, \home, \end, \pageup, \pagedown, \f1, \f2, ..., \shift, \rshift, \ctrl, \rctrl, \alt, \ralt, \win, \rwin, \apps, \capslock, \scrolllock, \numlock, \pause, \printscreen, \divide, \multiply, \add, \subtract, \decimal, \0, \1, ..., \num0, \num1, ..., \A, \B, ..., \back, \forward, \refresh, \search, \favorites, \browser, \mail, \power, \volume_down, \volume_up, \mute, \play_pause, \stop, \prev_track, \next_track, \media_select, \launch_app1, \launch_app2, \lbutton, \rbutton, \mbutton, \xbutton1, \xbutton2, \wheelup, \wheeldown, \wheelleft, \wheelright, \doubleclick, \sleep, \rep, \xAB
3. 使用技巧以上代碼除了大小寫有分別需要注意,另外補充一些技巧:
  • 按鍵為英文字母時須使用大寫,例如 \A、\B、..
  • ctrl 鍵可以寫成 \^
  • 組合鍵之間如果需要暫停時間,可使用 \sleep代碼,其後加上的數字若為 1 代表延遲 1/10 秒

三、貼上文字操作說明

1. 基本操作我次常用的快速鍵功能是「貼上文字」,例如常用到的語法,可節省許多輸入時間。 hotkeyp-2.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧借用前面使用過的圖,「命令」選擇「宏命令」→「黏貼文本」即可。 hotkeyp-4.jpg-自訂快速鍵軟體 HotkeyP﹍使用心得+操作技巧要貼上的文字放在「參數」欄位即可。 上圖範例是網頁連結的 HTML 語法,設定成按組合鍵 alt+shift+A就能貼上此語法。 2. 斷行參數但是我要貼上的程式碼常常有很多行,而「參數」欄位只有一行,要怎麼處理呢? 官方說明書提供了斷行參數 %r,在換行處加上此字串,就能將所有文字塞在「參數」欄位。例如貼上以下字串: WFU%rBLOG%rBlogger調校資料庫執行組合鍵後的效果就像以下: WFU BLOG Blogger調校資料庫2. 參數一覽官方說明書列出以下「貼上文字」所有可使用的參數,已翻譯為中文:
%r - 行尾 %u - 使用者名稱 %o - 電腦名稱 %l - 剪貼簿內容 %% - 百分號 %x - 日期 %X - 時間 %c - 日期和時間 %d - 日 %m - 月 %Y - 年 %y - 無世紀的年 %H - 小時[0-23] %I - 小時[1-12] % p - AM/PM %M - 分鐘 %S - 秒 %A - 工作日名稱 %a - 工作日名稱縮寫 %B - 月份名稱 %b - 月份名稱縮寫 %#d - 不含前導零的日期(這些以此類推 %#m、%#H、%#I、%#M、%#S)

四、以系統管理員執行

設定完所有快速鍵後,如果都能正常執行,就可略過這個部份。但可惜我有些快速鍵無法執行,也一直找不到原因,翻了官方說明書才知道,原來有些快速鍵需要有「系統管理員」權限才能執行。 以下直接複製官方說明書內容(翻譯成中文),請照著做即可:
如果您使用的是 Windows XP 或更早版本,或者您已停用使用者帳戶控制,則可以跳過本章。 如果您使用一些需要管理員權限的應用程序,您也需要以管理員身份執行HotkeyP。否則,某些鍵盤快捷鍵和 HotkeyP 命令將無法運作(尤其是巨集和貼上文字)。如果您想在 Windows 啟動時自動啟動 HotkeyP,您必須建立一個任務。
  • 在開始功能表中找到命令提示符,按滑鼠右鍵並選擇以管理員身份執行。
  • 複製此命令並將其貼上到命令提示字元中(將 Program Files 替換為 HotkeyP 的安裝路徑):
  • schtasks.exe /create /sc onlogon /tn HotkeyP /rl highest /tr "'C:\Program Files (x86)\HotkeyP\HotkeyP.exe' 0" /f
  • 啟動工作排程器。
  • 在左側面板中選擇「工作排程器程式庫」。然後雙擊 HotkeyP 任務以顯示其屬性。
  • 點擊「設定」標籤並停用「如果任務運行時間超過 3 天則停止任務」選項。然後按一下「確定」並關閉工作排程器。
  • 啟動 HotkeyP 並停用選項「Windows 啟動時自動啟動」。
更多快速鍵使用技巧:

Hexo 架站流程踩坑紀錄(2)﹍匯入 Blogger 文章

$
0
0
接續上一篇「Hexo 架站流程﹍建立 GitHub Pages」,Hexo 網站架設完畢之後,現在可將 Blogger 文章移轉過來。不過最好先了解 Hexo 文章格式為何,如果轉換的內容不太一致,才知道如何修改調整。 (圖片出處: chatgpt)

一、md 檔(markdown)格式

1. 什麼是 markdown Hexo 的開發是為了方便使用 markdown 來撰寫文章,適合覺得處理 html 標籤很麻煩的人,不過 Hexo 同樣可以解析 html,所以不用擔心相容性問題,不會 markdown 語法一樣可以使用 Hexo。 而什麼是 markdown 語法可參考 wiki 說明「Markdown」,Hexo 產生網頁時,會自動將撰寫文章時使用的 markdown 語法轉換為 html 碼。 2. Hexo 如何產生 md 檔 Hexo 儲存文章的檔案,副檔名為 .md,想要看範例的話,在安裝好的 Hexo 專案資料夾中, \source\_posts目錄之下有個 hello-world.md就能看到 md 檔格式。 順帶一提,在這個目錄之下的所有 md 檔,會產生網站的所有文章頁面,所以寫完文章後要放在這個資歷夾。 在官網文件「寫作」內容可看到,利用指令就能產生文章內容及 md 檔。然而用指令實在太克難,似乎還在 DOS 這樣的石器時代,在怎麼樣也可以用文章編輯軟體來撰寫 md 檔,不過之後會介紹安裝後台編輯界面,讓撰寫文章更方便。 3. md 檔格式範例根據官網文件「Front-matter」,我們可以了解 md 檔的格式大致如下: --- title: 填入文章標題 date: 2024/4/20 10:00:00 tags: [標籤1, 標籤2, 標籤3] categories: - [第1層分類, 第2層分類] - [無分層分類] permalink: 填入文章連結 使用不含網域的相對路徑即可 description: 填入搜尋說明文字 --- 這裡是文章內容,可以是 markdown 格式,也可以是 html 格式。
  • 文章內容的上方,頭尾需用用 "---"將文章額外資訊包起來
  • 注意冒號 ":"後面一定要有空格
  • tags 就是 Blogger 的標籤,可參照官網文件範例說明
  • categories 是 Blogger 沒有的分類功能,可以設定多層分類,設定多個分類時,每行開頭必須是 "- ",可參照官網文件範例說明
可以自行產生 md 檔放入 \source\_posts資料夾,發布後就能看到效果。

二、Hexo 外掛

在 Hexo 官網外掛頁面「Plugins」搜尋 Blogger 的話,可以找到兩個外掛: 第一個很麻煩,除了執行環境為 python,另外還要安裝不少東西,由於不熟悉 python 就不研究了,有興趣的讀者可以試試看。 第二個按照說明安裝,結果出現錯誤訊息,進入這個專案的 Issues 頁面查看,有人同樣反應無法安裝,但作者沒回應,應該是沒有在維護了,這樣我只好另外想辦法了。

三、RSS 外掛

1. 安裝官方外掛在官網文件找到這個頁面「轉移(migration)」,裡面有個 RSS 外掛 hexo-migrator-rss,由於 Blogger feed 可以轉換成 rss 格式,應該可以試試看,在 Hexo 專案資料夾執行以下指令進行安裝: npm install hexo-migrator-rss --save2. Blogger feed 格式 Blogger feed 可用以下網址結構轉換為 rss: https://網址/feeds/posts/default?alt=rss但以上網址只能取得最新 25 篇文章,想要取得所有文章 rss 的話,請用以下參數: https://網址/feeds/posts/default?alt=rss&start-index=1&max-results=150
  • start-index 代表從第幾篇文章開始
  • max-results 代表一次讀取幾篇文章 最多 150 篇
  • 所以必須分批取得 rss 內容,例如第二次 start-index 的參數應為 151
3. 轉換 Blogger rss繼續依照官網文件,在 Hexo 專案資料夾執行以下指令進行轉換: hexo migrate rss https://網址/feeds/posts/default?alt=rss&start-index=1&max-results=150然而轉換完成後,進入 \source\_posts資料夾,看到的 md 檔內容真是慘不忍睹,代表這個 rss 外掛無法處理 Blogger RSS 格式

四、修改 RSS 外掛

所以我決定自己改這個 RSS 外掛,以我的 Hexo 專案資料夾為例,要修改的檔案位於: D:\wfu_blog\hexo\node_modules\hexo-migrator-rss\lib\migrator.js修改之前記得先備份這個 migrator.js,然後用編輯軟體修改這個檔案。 1. 調整文章內容

五、修改 _config.yml

如果現在就將轉換後的 md 檔佈署到 GitHub 的話,會發現文章網址結構不對,所以還需要修改設定檔。請編輯根目錄下的 _config.yml這個檔案,找到 permalink:這一行,改成以下網址結構: permalink: :year/:month/:title.html儲存後再進行佈署,文章網址就會按照 Blogger 網址顯示 "年/月/xxx.html"這樣的結構了。

六、補充

如果按照本篇文章流程處理仍有問題,而需要發案給本站,代為處理 Blogger 文章匯入 Hexo,請再與本站聯繫。
Hexo 架站系列文章:

Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章

$
0
0
hexo-admin-edit-post.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章接續上一篇「Hexo 架站流程﹍匯入 Blogger 文章」,將 Blogger 文章移轉到 Hexo 後,接下來需要了解如何撰寫文章。 上一篇也大致提到了如何建立 md 檔的格式,但未免不夠專業,因為一般部落格後台都會有文章編輯器,所以本篇會說明如何安裝本地後台界面,及如何編輯文章的操作。

一、安裝 Hexo Admin

首先介紹安裝最簡單的本地後台,也就是說不需要網路,在自己電腦就能編輯文章。可參考這篇教學「使用 hexo-admin 後台管理工具」的流程: 1. 安裝外掛在 Hexo 專案資料夾執行以下指令安裝 Hexo Admin 後台外掛: npm install hexo-admin --save2. 進入後台繼續執行以下指令,執行本地伺服器: hexo s然後在瀏覽器輸入以下網址即可進入後台畫面: http://localhost:4000/admin

二、編輯文章

hexo-admin-edit-post-1.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章首先說明如何新增一篇新的文章,進入後台畫面後,點擊左上角的「+ New Post」即可新增文章: 1. 自訂網址字串上一篇系列文有提過,Blogger 文章網址結構為 "年/月/xxx.html",我們也在 _config.yml設定了相關的參數。 如果我們的文章標題是中文字串,那麼網址也會變成 "年/月/中文字串.html",而 hexo-admin 是個比較陽春的外掛,沒有提供自訂網址字串的選項,那麼如果要將網址設定為英數字串的話,一開始請務必這麼做: hexo-admin-edit-post-2.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章點擊新增文章後,立刻可以設定文章標題,如上圖,請先輸入英數字串,此字串就會成為網址的一部分。 hexo-admin-edit-post-3.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章進入文章編輯界面後可看到,上圖紅框的 Preview 後面,就是我們設定好的英數字串網址結構,接著再將文章標題改為中文即可。 2. 設定選項hexo-admin-edit-post-4.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章編輯界面左半部可輸入 markdown 語法,跟我一樣習慣 Blogger 的 html 模式的話,直接使用 html 語法也可,右半部可看到預覽畫面。 點擊右上角「齒輪圖示」可出現設定畫面,可修改發布日期、作者、標籤、分類等等。 最後按「Publish」新增一篇文章。 3. 繼續閱讀從上圖還可看到,文章中插入繼續閱讀的話,需要加入以下語法: <!--more-->熟悉 Blogger 操作的話,這一點應該不用另外多解釋了。 4. 儲存另外補充一點,因為是本地操作,儲存速度會非常快,有任何編輯動作都會立即儲存。

三、佈署到 GitHub

1. 設定檔名結構在 Hexo Admin 新增、編輯文章,會將結果存放在資料夾 \source\_posts下的所有 md 檔,為了方便日後查看、管理 md 檔,檔名最好加上日期,以免文章標題出現重複,也可知道文章的新舊次序。 請編輯根目錄下的 _config.yml這個檔案,找到 new_post_name:這一行,改成以下格式: new_post_name: :year-:month-:day-:title.md這樣檔名會是 "年-月-日-文章標題"這樣的格式。 2. 發布網站在 Hexo 專案資料夾執行以下指令來發布網站: hexo clean //清除之前建立的靜態檔案,也可使用縮寫 hexo cl hexo ddeploy //部署到 GitHub,也可使用縮寫 hexo d

四、上傳圖片

編輯文章時有可能需要上傳圖片,然而 Hexo Admin 上傳圖片的操作有些問題,因為這個外掛年代久遠,看起來作者已經沒繼續維護,需要另外研究如何解決。 1. 設定選項hexo-admin-edit-post-5.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章後台進入上方「Settings」分頁後,可看到上圖設定畫面:
  • 建議勾選「Always ask for filename」,能自訂圖片檔名對 SEO 比較好
  • 可看到預設儲存的的圖片資料夾路徑(Image directory)為 /images,有特別需求的話請自行更改
  • 可看到預設圖片檔名前綴(Image filename prefix)為 pasted-,有勾選自訂檔名就不用理會
2. 上傳圖片上傳圖片的操作很簡單:
  • 可從檔案總管直接按 Ctrl+C複製圖片
  • 也可開啟圖片後,對圖片按右鍵進行複製
  • 然後編輯文章時按 Ctrl+V
比較推薦從檔案總管複製,因為這樣產生的圖片檔案比較小,直接複製圖片的話會產生 .png 檔案太大。 另外說明一下,直接複製 jpg 檔 Hexo Admin 還是會當作 png 檔儲存,但實際上這張圖還是 jpg 檔,所以沒影響,只是比較奇怪。 3. 錯誤情形實際操作一次,我在檔案總管複製了 "hexo-admin-edit-post-1.jpg"這張圖,進入 Hexo Admin 後台編輯文章時貼上,下圖會要求輸入檔名: hexo-admin-edit-post-6.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章請注意指需要輸入檔名就好,不要輸入副檔名 .jpg,否則程式會報做,無法上傳圖片。 hexo-admin-edit-post-7.jpg-Hexo 架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章然而檔名輸入完後,如上圖,這張圖顯示的路徑是錯誤的,因此無法正常顯示圖片。錯誤之處在於,正確路徑應該長這樣: /images/hexo-admin-edit-post-1.png這個錯誤上網查了很久,大致有了解原因,應該是 Hexo 已經升級版本很多次,而 Hexo Admin 因為沒有跟著維護,原本的程式碼早已不相容了。 4. 解決方法網路上多數解法都沒什麼用,比較可靠的解法只有一個,請參考這篇「hexo-admin 插入圖片失敗問題解決」,必須修改外掛檔案。 請找到以下路徑這個檔案: hexo 專案資料夾\node_modules\hexo-admin\api.js用編輯軟體搜尋兩處,首先找到: filename = path.join(imagePath, filename)改成以下: filename = imagePath + "/" + filename然後找到: res.done({ src: path.join(hexo.config.root + filename), msg: msg })改成以下: res.done({ src: filename, msg: msg })5. 修改效果hexo-admin-edit-post-8.jpg-架站流程踩坑紀錄(3)﹍使用後台 Hexo Admin 撰寫文章修改後再執行,圖片檔案路徑終於正確了,但有點奇怪,右邊預覽怎麼還是無法顯示圖片?不用擔心,因為上傳圖片需要一點時間,但 Hexo Admin 的程式會立即執行顯示該路徑的圖片,所以當下無法顯示圖片。若按一下 F5重整頁面就能看到圖片了。

五、補充

本篇雖然介紹了 Hexo Admin 這個本地後台外掛,但並不推薦使用,因為:
  • 功能太過陽春
  • 作者沒繼續維護,想要自訂功能會很麻煩
之後會另外再介紹功能比較強的雲端後台外掛,無論是界面美觀性、功能實用性都大大提昇,但是需要折騰的地方將比本篇難上許多倍,所以暫時可先使用本篇的後台外掛,能夠先進行一些基本操作,才不至於被 Hexo 嚇跑。
Hexo 架站系列文章:

Steam 移轉遊戲完整教學﹍備份還原+複製修改內容(外掛MOD)+安裝舊版本技巧

$
0
0
steam-backup-restore-skill.jpg-Steam 移轉遊戲完整教學﹍備份還原+複製修改內容(外掛MOD)+安裝舊版本技巧前陣子升級電腦設備後,想看看很久以前 Steam 買的、舊電腦跑不太順的 3A 大作,在新硬體下跑起來效果如何。結果似乎不得要領,好幾個遊戲都無法成功還原移轉到新電腦,又得花好幾個小時重新下載。 徹底研究了一下正確作法,並解決各種遇到的坑,本篇紀錄 Steam 三種備份還原、移轉遊戲的心得,也會加上推薦的作法排行,並介紹不想被 Steam 更新遊戲版本的話,如何安裝舊版本遊戲的技巧。

一、移轉遊戲原始檔(排名第三)

1. 複製遊戲資料夾以前的遊戲備份檔案,我是採取複製整個資料夾的檔案,原因如下:
  • 因為曾裝過外掛,例如中文化檔案,用複製的方式將來還原比較方便,不必重新裝外掛
  • SSD 硬碟不夠大,為了 SSD 壽命最好暫時不玩的遊戲立刻刪除,騰出空間給其他遊戲安裝
  • 由於之後可能再玩,所以先不移除遊戲,暫時刪除遊戲資料夾的方法比較方便,將來整個資料夾複製回來即可
2. 無法通過驗證不過以上方法此次我準備將遊戲移轉到新電腦卻卡了關,Steam 檢查了一陣子後,就會重頭開始下載幾十 GB 的檔案,得等上好幾個小時。 交叉測試了才發現,原來如果檔案有動過(修改、裝外掛、MOD)就無法通過驗證,必須重新下載。 3. 成功作法依照經驗及查找的資料,如果用複製檔案的方式備份遊戲,為了避免失敗請按照以下流程:
  • 不要動到遊戲原始檔案,不裝外掛、MOD,保持所有檔案的完整性
  • 將資料夾 steamapps\common之下的遊戲資料夾,完整備份到他處,並且務必保持原本的遊戲資料夾名稱
  • 安裝之前,該遊戲最好先取消更新的選項,等移轉成功再來決定是否更新
  • 啟動 Steam,安裝遊戲,立刻暫停下載
  • 將備份資料夾複製到新電腦資料夾 steamapps\common之下
  • 讓 Steam 繼續安裝,此時會進行驗證檔案,順利的話跑幾分鐘就完成了
4. 更推薦的作法這個作法只能排第三,因為流程沒有很方便,一不小心可能就要重新下載,而且只能還原遊戲原始檔。 如果遊戲有修改過、中文化、裝外掛或MOD 等等,無法靠這個方法還原,此時推薦使用「四、完整移轉遊戲+外掛(排名第一)」的方法。

二、備份還原遊戲(排名第二)

1. 官方功能效果使用 Steam 官方提供的備份還原功能就比較簡單沒問題了,不過此功能只會備份原始檔,如果裝了外掛的話會被無視,將來還原的檔案依然是原始版本。 2. 備份步驟原電腦的備份步驟如下:
  • 啟動 Steam → 收藏庫 → 選擇遊戲 → 內容
  • 已安裝檔案 → 備份遊戲檔案 → 選擇目錄 → 建立備份
3. 還原步驟新電腦的還原步驟如下:
  • 啟動 Steam → 左上角「Steam」 → 還原遊戲備份
  • 選擇備份的資料夾 → 還原備份
4. 注意事項以上流程基本上不會有什麼問題,不過我還是遇到一個坑,還原遊戲的時候,注意一下在 Steam 中收藏庫的這個遊戲,是「解除安裝」的狀態。也就是說,不要安裝過遊戲後又使用了「還原」的功能,這樣 Steam 又會重頭開始下載了...

三、安裝舊版本遊戲

1. 操作流程 Steam 不斷自動更新遊戲版本,有時也會造成困擾,例如導致外掛、MOD 失效,或是某些功能、玩法在新版本消失了,所以有些玩家會希望恢復為舊版本。 PTT 這篇貼文完整說明了 Steam 的運作機制: 作者提供了詳盡的指南,有需要的讀者可按這篇內容進行。 2. SteamCMD 下載直接照著該篇內容進行應該是會卡關,因為沒有每個步驟詳細說明。所以這裡做些補充。 該篇的指令需要靠 SteamCMD 執行,所以電腦裡需要先安裝 SteamCMD 才行,請到官方下載網址抓這個檔: 解壓縮到自訂資料夾後,執行 steamcmd.exe,等個幾分鐘會自動下載、更新檔案。 steam-backup-restore-skill-3.jpg-Steam 移轉遊戲完整教學﹍備份還原+複製修改內容(外掛MOD)+安裝舊版本技巧完畢後就可接續教學文章,看是要用 Steam 主控台來輸入指令,或是直接執行 steamcmd.exe 也能打指令。 3. 防止 Steam 自動更新該篇提供了防止 Steam 自動更新的技巧,將 steamapps資料夾內對應遊戲的 .acf 檔設定為「唯讀」狀態,讓 Steam 無法複寫檔案,也就無法更新遊戲了。

四、完整移轉遊戲+外掛(排名第一)

回到開頭我的狀況,如果我的遊戲檔經過中文化有了變動,或是裝了外掛、MOD 的話,有沒有什麼辦法可以完整的移轉遊戲,不需要重新修改檔案、重新研究或安裝外掛,再次經歷所有麻煩的過程呢? 原本我對這件事沒什麼頭緒,不過讀了前面「三、安裝舊版本遊戲」那位 PTT 神人寫的 「安裝舊版本遊戲」後,已全然了解 Steam 的運作機制,也成功測試出完整移轉遊戲的方法,以下就來看看排行第一的作法如何進行。 1. 找出遊戲 App ID首先找出 Steam 每個遊戲獨一無二的 App ID,以「巫師3」為例,進入 Steam 遊戲頁面從網址就能找到: steam-backup-restore-skill-4.jpg-Steam 移轉遊戲完整教學﹍備份還原+複製修改內容(外掛MOD)+安裝舊版本技巧如上圖,「巫師3」的 App ID 就是紅框處的 292030,請找到自己遊戲的 App ID 數字,之後會用到。 2. 備份遊戲檔案接著進入資料夾 steamapps\common,將自己的遊戲資料夾包含之內的所有檔案,複製到他處保存起來,並保持資料夾原始名稱,不可隨意更名。 3. 備份 acf 檔進入資料夾 steamapps之內,找到自己遊戲的 acf 檔,以「巫師3」為例,檔名會是這樣(包含 App ID): appmanifest_292030.acf請將自己要備份的遊戲 acf 檔複製到他處保存起來。 4. 複製遊戲檔案備份的動作都完成後,接下來在新電腦上作業,首先將備份的遊戲資料夾,複製到新電腦的資料夾 steamapps\common之中,遊戲資料夾名稱務必不可更動。 5. 複製 acf 檔案接著將備份的遊戲 acf 檔,複製到資料夾 steamapps之內,並且進行以下這個非常重要的動作:
  • 檔案總管選取 acf 檔 → 右鍵 → 內容 →「屬性」勾選 "唯讀"
此檔變成「唯讀」狀態後,Steam 就不會更新遊戲、不會驗證檔案、不會重新下載了。 6. 修改 vdf 檔同樣在資料夾 steamapps之內,找到這個檔案 libraryfolders.vdf,用文書編輯軟體開啟: steam-backup-restore-skill-5.jpg-Steam 移轉遊戲完整教學﹍備份還原+複製修改內容(外掛MOD)+安裝舊版本技巧找到上圖的區塊,如上圖紅框分別新增兩筆字串,左邊雙引號內是 App ID(以「巫師3」為例),右邊雙引號內是檔案大小,數字隨意填沒關係。 請新增自己的遊戲 App ID 及檔案大小數字後,儲存檔案。 完成此動作後,Steam 會視此遊戲為「已安裝」的狀態,將不必重新安裝遊戲。 7. 執行遊戲完成以上所有動作後便大功告成,可以順利將任何狀態、任何版本的遊戲、安裝過外掛或 MOD 的遊戲,成功移轉到新電腦。 現在開啟 Steam 可看到,移轉複製過來的遊戲不須安裝、也不會更新、不會下載檔案,可以直接執行了!

讓 Line 網頁版開機自動登入+全螢幕顯示

$
0
0
上一篇「讓 Line 網頁版能開機自動執行」留下的小問題是,Line 網頁版每次開機都得重新輸入密碼,本篇將說明如何將這件事程式化,可以開機自動執行,並優化操作界面。 不過必須先提醒,本篇流程包含的知識與技術很複雜,若沒有相當的 Javascript 基礎不容易理解,所以不適合新手閱讀。 (圖片出處: chatgpt.com)

一、原理說明

本篇的任務相當複雜,要解決的狀況很多,以下先一一說明困難點及解法的原理: 1. Puppeteer要讓瀏覽器行為開機自動化執行,必須學會操作 Puppeteer 來控制 Chrome 的所有行為。而 Puppeteer 須在 Node.js 環境執行,所以系統必須先安裝 Node.js 及 Puppeteer。 不熟悉的話可先看我另一篇實作「FB 社團爬蟲實作範例﹍使用 Node.js 操作 Puppeteer」,作為上手參考之用。 2. Chromium 瀏覽器準備動作安裝 Puppeteer 時會自動下載一個 Chromium 瀏覽器,如果直接用 Puppeteer 操作這個 Chromium 無法完成本篇任務,因為這個原始的 Chromium 是空白狀態。 要執行 Line 網頁版得先安裝 Line 套件,所以需先為這個 Chromium 瀏覽器登入、設定一個 Google 帳號,並安裝 Line 套件,供 Puppeteer 呼叫使用者及套件。 3. 載入使用者為了讓 Puppeteer 能啟動 Chromium 時載入特定使用者,花了很多時間嘗試,最後才知道字元格式要完全正確才不會報錯,參數原理可參考這個討論串「In Puppeteer how to switch to chrome window from default profile to desired profile」。 4. 載入套件要讓 Puppeteer 啟動 Chromium 時預先載入特定套件,同樣也不是一件簡單的事,正確作法可參考官網說明文件「Chrome Extensions」。 5. 讓 Puppeteer 背景執行最後一個卡關的坑是,為了開機能執行 Puppeteer 來操作 Chromium,必須寫 .bat 執行檔放入 Windows「啟動」資料夾,但是自動執行後會發現,執行 .bat 檔跳出的那個 DOS 命令視窗,會一直出現在作業系統,如果不小心把這個視窗關了,Puppeteer 也會自動停止執行,這代表 Chromium 會被立即關閉,那麼想當然 Line 網頁版也就消失了。 要解決這件事的話,必須讓執行 Puppeteer 的 .js 檔在背景執行,找到的工具是「PM2」,改用 PM2 來執行 js 再關閉 DOS 視窗就行了。

二、範例程式碼

以下提供 Puppeteer 操作 Line 網頁版的範例程式碼: let puppeteer = require("puppeteer"); let username = "xxxxxxxx"; // 填入帳號 let password = "xxxxxx"; // 填入密碼 (async function() { const browser = await puppeteer.launch({ headless: false, args: ["--user-data-dir=C:\\Users\\使用者名稱\\AppData\\Local\\Google\\Chrome for Testing\\User Data", // 填入 chromium 使用者路徑 "--profile-directory=Default", // 使用第一個預設使用者 "--disable-extensions-except=C:\\Users\\wayne\\AppData\\Local\\Google\\Chrome for Testing\\User Data\\Default\\Extensions\\ophjlpahpchlmihnnnihgmmeilfjmjjc\\3.4.0_0", // 填入 Line 套件路徑 "--load-extension=C:\\Users\\wayne\\AppData\\Local\\Google\\Chrome for Testing\\User Data\\Default\\Extensions\\ophjlpahpchlmihnnnihgmmeilfjmjjc\\3.4.0_0", // 填入 Line 套件路徑 "--disable-infobars" // 隱藏系統訊息欄 ] }); // 所有打開的頁面 const pages = await browser.pages(); // 初始空白頁面 const page = pages[0]; // 設置超時時間為 0 代表無限制 page.setDefaultTimeout(0); await page.goto("chrome-extension://ophjlpahpchlmihnnnihgmmeilfjmjjc/index.html#"); await page.waitForSelector("form"); // 先清空使用者名稱 await page.evaluate(function() { document.querySelector("input[type='email']").value = ''; }); // 模擬輸入帳號密碼 await new Promise(r => setTimeout(r, 500)); await page.type("input[type='email']", username); await new Promise(r => setTimeout(r, 500)); await page.type("input[type='password']", password); await new Promise(r => setTimeout(r, 500)); await page.click("button[type='submit']"); await page.waitForNavigation(); // 最小化 const session = await page.target().createCDPSession(); const { windowId } = await session.send("Browser.getWindowForTarget"); await session.send("Browser.setWindowBounds", { windowId, bounds: { windowState: "minimized" } }); // 全螢幕 await page.evaluate(() => { const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); } }); })();以上紅字需要填入的資訊說明如下:
  • 帳號、密碼:請填入自己的 Line 帳號密碼
  • chromium 使用者路徑:Puppeteer 自動下載的 chromium 應該會在 Windows 系統的使用者資料夾產生一個 "Chrome for Testing"資料夾,如果你的使用者資料夾有找到類似這裡紅字的路徑,那麼直接把這裡的路徑改成你的使用者名稱即可
  • 使用第一個預設使用者:這裡的設定值會抓第一個設定登入的使用者,所以請確認你已經至少設定了一個有登入的使用者
  • Line 套件路徑:有兩處要填入裝在 chromium 的 Line 套件路徑,請先確認你已在 chromium 的預設使用者安裝了 Line 套件。然後可在電腦搜尋 Line 的套件 ID 字串 "ophjlpahpchlmihnnnihgmmeilfjmjjc",找到後查看完整資料夾路徑,後面會有版本編號,將你的版本編號置換原本的字串 "3.4.0_0"
程式碼其他的說明已用註解標示,特別說明以下兩段程式碼的作用:
  • 最小化:讓 Line 網頁版執行後可以最小化
  • 全螢幕:讓 Line 網頁版顯示的時候能進入全螢幕模式,好處是可隱藏網址列,增加可視範圍

三、完整操作流程

講解完範例程式碼後,以下說明完整的流程如何操作: 1. Puppeteer參考前面說明,安裝 Node.js 及 Puppeteer,完畢後會自動下載 Chromium 瀏覽器。 要執行這個 Chromium 的話,可在電腦中搜尋 chrome.exe,通常會找到兩個,黃色圖示那個是平常執行的 Chrome,藍色圖示那個就是 Chromium。 2. 安裝 Line 網頁版執行剛剛提到的藍色圖示那個 Chromium:
  • 登入 Google 帳號,讓瀏覽器右上角出現帳號圖示,這就是預設使用者
  • 使用這個帳號安裝 Line 網頁版套件
完成以上流程後,就可在電腦搜尋 Line 的套件 ID 字串 "ophjlpahpchlmihnnnihgmmeilfjmjjc",找到後查看完整資料夾路徑,後面會有版本編號,將你的版本編號置換範例程式碼中的版本編號。 3. JS 執行檔將範例程式碼的紅字參數都修改完後,存成一個 .js 檔,並記住路徑,例如: D:\startUp\line.js4. 安裝 PM2參考官網說明「Installing PM2」來安裝,例如執行以下命令: npm install pm2 -g5. 製作 .bat 檔將以下內容存成 .bat 檔,例如 line.bat@echo off pm2 start D:\startUp\line.js exitline.js的路徑請改為前面自己儲存的 .js 檔案路徑。 6. 開機執行 .bat 檔最後將這個 line.bat(或自訂檔名) 放入 Windows 啟動資料夾,路徑如下: C:\Users\使用者名稱\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup將「使用者名稱」改成自己的名稱即可,開機就會看到 Line 網頁版啟動、自行輸入帳號密碼,然後視窗自動縮小的畫面了。
更多 NodeJs 相關文章:

Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化,瀏覽效果最舒適

$
0
0
google-sheet-fullscreen-optimization.jpg-Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化,瀏覽效果最舒適這陣子為了克服電腦背光的傷害,使用大尺寸螢幕保護眼睛,從距離約 2 公尺處看螢幕,得將作業系統縮放比例設定為 200% 以上,字體也須放大、設粗體,眼睛看起來才舒服。 而開瀏覽器時經放大比例後,不可避免網頁的可視範圍會少很多,對於文章為主的網頁,可利用「Reader Mode」這樣的外掛,配合瀏覽器的全螢幕模式,來聚焦文章內容、排除冗雜區塊。 至於我常用的 Google 試算表,Reader Mode 外掛起不了作用,需要另外研究如何優化版面。本篇會說明如何隱藏 Google 試算表的選單、工具列、公式列等區塊,以及如何使用自動化操作,讓工作表區域的面積、能顯示的儲存格數量最大化。 (圖片出處: chatgpt.com)

一、官方提供的隱藏功能

google-sheet-fullscreen-optimization-1.jpg-Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化,瀏覽效果最舒適關於基本操作,瀏覽器與 Google 試算表提供了一些功能,可以隱藏部份區塊。上圖供對照以下內容: 1. 隱藏選單在 Google 試算表頁面,按快速鍵 Ctrl+Shift+F可切換隱藏、顯示「選單」區塊。 2. 隱藏公式列在 Google 試算表頁面,點擊選單「查看」→「顯示」→「公式列」,可切換隱藏、顯示「公式列」區塊。 3. 試算表全螢幕功能在 Google 試算表頁面,點擊選單「查看」→「全螢幕」,可隱藏「選單」+「工具列」區塊。 4. 網頁全螢幕功能網頁只要按 F11 都可進入全螢幕狀態,可隱藏「網址列」+「書籤列」區塊。

二、使用自動化程式套件

1. 手動操作不方便了解以上基本操作後,在試算表頁面如果想讓工作表區域的面積、能顯示的儲存格數量最大化,必須進行以下操作:
  • 操作滑鼠進行多次點擊,來隱藏「公式列」區塊
  • 操作滑鼠執行試算表的「全螢幕」選項,來隱藏「選單」+「工具列」區塊。
  • 按 F11 進入瀏覽器的全螢幕模式
以上流程只要每次重啟瀏覽器後,進入試算表時都得重新做一次,其實沒有那麼方便,因此我構思著如何讓這流程自動化。。 2. 自動化操作原理我常使用的 Chrome 套件「User JavaScript and CSS」,可以編寫 Javascript 及 CSS,進入特定網頁後自動執行。 只要能將進入 Google 試算表網頁後,要進行的所有動作程式化,就能利用「User JavaScript and CSS」這個套件實現。 3. 程式處理邏輯要將前面所有手動操作的流程程式化,我的處理邏輯如下:
  • 想辦法找出偵測全螢幕狀態的方法(原理比較複雜,會另寫一篇說明)
  • 手動按 F11 進入全螢幕狀態
  • 當偵測到全螢幕模式時,Google 試算表頁面自動隱藏選單+工具列+公式列

三、操作範例

了解前述原理後,以下進行 User JavaScript and CSS 的設定: google-sheet-fullscreen-optimization-2.jpg-Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化,瀏覽效果最舒適1. 基本設定參考上圖:
  • Rule name:填入標題,例如「Google 試算表全螢幕」
  • URL patterns:填入網址(可使用萬用字元),例如「https://docs.google.com/spreadsheets/*」
2. 填入程式碼上圖的程式碼區塊,左側可填入 Javascript,右側可填入 CSS。 剛好本篇的概念用 CSS 就能完成,不需要動到 JS,範例程式碼如下: @media all and (display-mode: fullscreen) { #docs-chrome { display: none; } } @media not all and (display-mode: fullscreen) { #docs-chrome { display: block; } }填寫完畢後按「Save」即可。 3. 執行效果之後只要開啟 Google 試算表頁面:
  • 按 F11 進入全螢幕狀態後,會自動執行 CSS,隱藏選單+工具列+公式列,方便瀏覽工作表、儲存格區塊
  • 按 ESC 離開全螢幕狀態後,會自動顯示選單+工具列+公式列,方便一般作業
更多「Google 試算表」相關技巧:

如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化

$
0
0
large-lcd-screen-protect-eyes.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化身為前端工程師,必須長時間在電腦前作業,但我的眼睛只要看螢幕久一點身體就不舒服,而且基於螢幕的材質演進,背光一代比一代更強、更刺眼,所以過去很長一段時間持續關注「Eink 電子墨水」這項科技,我也所費不貲買過這些產品: 只不過多年下來體悟到,打造「Eink 電子墨水產品」的友善使用環境不太容易,一方面螢幕永遠不夠大,影像反應速度不夠快,十分影響前端作業的效率。另一方面環境光源是個大問題,要能均勻把光打到螢幕上得以看清楚,光線又不能過強造成反光,這件事難度很大。所以過去買的這些產品,其實都無法讓我使用的時間夠長久。 近幾年由於科技進展,市面上的電腦螢幕尺寸越來越大,讓我對解決護眼問題帶來了不同的想法:
  • 電腦螢幕對眼睛最大的傷害,來自於背光的亮度
  • 而背光的強度到了一定的距離,例如 1.5~2 公尺,對眼睛影響就比較低了
  • 就像在客廳看電視,因為距離較長眼睛可以看很久才會不舒服
  • 如果能使用大尺寸電腦螢幕,盡可能地拉長使用距離就能減少背光對眼睛的傷害
理論上這構想很合理,可完美解決背光問題,只是實際上無論是軟硬體、時空環境都有不少細節要克服,本篇將分享如何針對各種困難找出解決方案。 (圖片出處: catch.com.au)

一、需要克服的困難

使用大尺寸螢幕的方針決定後,在執行面上,很容易發現以下這些問題:
  • 一般辦公室不可能讓員工距離螢幕 1.5~2 公尺作業,所以這件事可能只適合,像我這類自雇者、在家辦公的族群
  • 現在的螢幕雖然尺寸越來越大,但卻越來越扁,例如 21:9、32:9。這很不利於作業、或是看網頁內容,因為上下可視範圍越來越窄,需要不斷捲動螢幕來看狹小空間中的文字。
  • 過往的 4:3、16:10 螢幕都滿適合看網頁的,但現在大尺寸螢幕根本找不到這樣的比例
  • 現在的螢幕除了尺寸變大,解析度也提升到 2k、4k,這會導致系統文字越來越小,跟看螞蟻差不多。雖然距離拉遠保護了眼睛,但文字看不清楚無法作業,則是另一個需要解決的大問題。

二、螢幕的選購

了解所有困難點後,如果你也是不受公司限制、能夠自由配置作業環境的族群,那麼可以開始來解決其他問題。 1. 螢幕尺寸一開始從我現有的 Asus 27 吋螢幕測試,刻意將距離拉遠到 1.5 公尺,算是勉強可用但有點吃力,經放大作業系統縮放比例及字體後,看網頁將字放大到眼睛看起來舒服的尺寸時,可視範圍剩下沒幾行。 所以我推估至少要買 32 吋以上的螢幕比較適當,而且越大越好,目標是 40 吋以上。 2. 螢幕比例在購物網站使用搜尋功能,查詢市場上能買到的電腦螢幕,前面提到的適合閱覽網頁螢幕比例:
  • 4:3 比例的螢幕只存在於 20 吋以下
  • 16:10 比例的螢幕目前只有生產 24 吋
  • 所以現在唯一能選購的大尺寸螢幕,比例只有 16:9
3. 螢幕解析度因為選購大尺寸螢幕的目的是用於遠距離使用,那麼高解析度螢幕除了沒必要,還可能是扣分因素。 例如買了 4K 螢幕(3840*2160),作業系統的縮放比例必須放大好幾倍,讓文字、軟體界面都放大,遠距離看起來才舒適。但某些軟體經放大後,仍會難以使用。 large-lcd-screen-protect-eyes-1.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化如上圖,這是我在 32"螢幕、1920*1080 解析度,比較舊的影像編輯軟體的截圖,如上方及左側的兩排紅框工具小圖示,在選單文字能隨系統設定放大的情況下,小圖示仍維持原本的大小,非常不利於辨識與操作。 Full HD 解析度尚且如此,那麼更不用說 4K 解析度了,這樣的情況只會更嚴重,一些比較舊的遊戲、軟體,在 4K 解析度下都會是悲劇。 所以在本篇需求為前提下,解析度越小越好,後續需要調整的的軟體、解決界面的問題會越少。這也就是說,選購的螢幕解析度應以 1920*1080 為首選。 4. 合適的螢幕選擇我的作業環境需要兩台大尺寸螢幕,其中一個距離螢幕最遠約 1.8~1.9 公尺,另一個可達 2.2~2.3 公尺。 因為 momo 購物網站的篩選功能比較強,以下是根據這個網站的的搜尋結果:
  • 試圖在 32~40 吋找 16:9 螢幕,結果只有 32"有此比例
  • 32"有不少 1920*1080 螢幕,最後我選了「Philips 32E1N3100LA」,購買價不到 4 千,VA 面板,有三年保固
  • 40"以上基本找不到 1920*1080 螢幕,最後我選了 43 吋的「Philips 438P1」,購買價不到一萬,IPS 面板,有三年保固。
  • 選購時注意產品描述,別買到曲面螢幕,這是為了近距離沈浸感而設計的產品,但我們要遠距離使用,買錯可就浪費了。
另外需要注意的是,有些電腦螢幕標榜「智慧連網」功能,例如這台「SAMSUNG S43DM702UC」,頁面上標示了 "Smart TV 智慧電視功能",我懷疑這其實是拿電視螢幕改成電腦螢幕賣,因為無法實機操作,以下純粹是我的猜測,也是我不敢買的原因:
  • 因為有電視用途,代表電腦不一定是主要用途,造成操控上一定要有遙控器才能切換。
  • 很有可能當作電腦螢幕使用時,也必須用遙控器來關閉螢幕
  • 這也代表我們一般在電腦設定幾分鐘不使用後,會自動關閉螢幕的功能,這台螢幕可能不會自動關閉,必須使用遙控器才能關閉
  • 如此一來,無論有沒有手動操作遙控器關閉螢幕,都會造成螢幕的壽命損耗
  • 若沒有用遙控器關閉螢幕,則螢幕永遠都是開啟狀態,自然會消耗螢幕壽命
  • 若有用遙控器關閉螢幕,則不但造成自己的操作麻煩,且螢幕頻繁進行開關,一樣是減損壽命(所有電子器材頻繁開關都會減少壽命)
如果讀者有開箱過類似機種,希望能幫我釐清以上的臆測,來驗證這樣的機種是否適合當電腦螢幕使用。在以上疑慮能釐清之前,把這樣的機種當成電腦螢幕使用,對螢幕壽命是有風險的。

三、Windows 系統調整設定

因應不同作業環境的縱深,我選購了一台 32"(1080P)、一台 43"(4K) 螢幕。接下來要想辦法讓 Windows 系統所有環境下的操作,都能讓眼睛最舒服。首先來研究作業系統設定: 1. 縮放比例在距離兩公尺左右處看螢幕,必須找到恰當的縮放比例,同時又不讓應用程式異常。Win10 的設定方式如下: large-lcd-screen-protect-eyes-2.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化
  • 桌面按右鍵 → 顯示設定 → 進階縮放設定 → 如上圖紅框,輸入數值
  • 登出登入後可看到效果
究竟應該輸入什麼數值,有個簡易的方式可以用於檢測: large-lcd-screen-protect-eyes-3.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化
  • 檔案總管 → 檢視 → 選項
如果能看到下圖右下方紅框的「套用」按鈕,代表這個縮放比例可以接受(看不到的話代表比例太大了,很多其他軟體的版面可能異常)。 以下是我的縮放比例設定供參考:
  • 1920*1080 螢幕:200%
  • 3840*2160 螢幕:400%
2. 放大字體比例 Win10 無法像 Win7 能自訂字型、字體大小,不過有個微調字體比例的設定功能: large-lcd-screen-protect-eyes-4.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化
  • 開始 → 設定 → 輕鬆存取 → 顯示器 → 如上圖紅框,調整自己的比例,並注意應用程式是否異常即可
3. 桌面圖示間距如果像我一樣桌面圖示很多,且有特定擺放位置,那麼經過前面的調整縮放比例流程,重新登入後圖示有可能會被打散,那麼我們需要重新調整桌面的圖示間距。 可參考這篇「Win10桌面間距過大如何修復」來修改登錄檔,搜尋並執行「登錄編輯程式」後:
  • 前往路徑 HKEY_CURRENT_USER\Control Panel\Desktop\WindowMetrics
  • 右側視窗可看到「IconSpacing」及「IconVerticalSpacing」,預設值大致分別是 -1125
  • 我兩個都調整為 -1000左右,請自行調整為合適值,重新登入後可看到效果
4. 檔案總管標題列經過前面的調整縮放比例流程,短時間多次登出登入後有可能系統某些數值會計算錯誤,導致「檔案總管標題列」的高度在登錄檔的數值跑掉,因為我就遇到了。 如果你也覺得「檔案總管標題列」高度怪怪的,可以接續「3. 桌面圖示間距」的流程,在右側視窗找到 CaptionHeight、CaptionWidth 這兩項,分別將值改回預設的 -333即可。 5. 系統字型前面「2. 放大字體比例」中,Win10 系統提供的字體大小調整功能無法滿足我需求,還好找到這篇「W10系統字型修改」,提到有日本高手做了這個工具「noMeiryoUI」,真的是太好用了!! 目前最新版下載連結: large-lcd-screen-protect-eyes-5.jpg-如何克服電腦背光的傷害﹍大尺寸螢幕護眼環境設置優化上圖為執行效果,功能非常強大:
  • 可選擇自訂字型、粗體,這是 Win10 系統預設功能做不到的,能設成「粗體」是非常重要的功能,讓眼睛看得十分舒服。
  • 可套用到多處
  • 不用登出就能看到效果
6. 高對比模式遠距離看螢幕時,我覺得有些應用程式的黑底白字沒那麼舒服,那麼 Windows 官方提供的「高對比模式」就能派上用場。按以下的快速鍵就能快速切換此模式: Alt + Shift + Printscreen只不過這個快速鍵除了不好按,也不太好記,為了此事我研究了如何使用自訂按鍵切換高對比模式,會另外發表一篇文章說明。 7. 重啟檔案總管因為我在多個使用者帳號,都設定了百分比很高的縮放比例,不知道是否因為這個原因,切換使用者帳號後,再切回原本主帳號會導致工作列高度異常。 問了 ChatGPT 後提供一個可能的解法:「重新啟動檔案總管」,一試之下果然成功了。如果你也遇到類似狀況的話,可參考這篇「5種辦法在Win10重啟Windows檔案總管」,採第5個方法比較簡單,製作一個 .bat 檔,放在桌面隨時可以執行,檔案內容如下: taskkill /f /im explorer.exe start explorer.exe

四、軟體調整

環境設定完成後,接下來需要一一調整常用軟體、網頁的使用方式,讓眼睛負擔較輕。以下分享一些我常用的軟體、網頁調整方式: 1. Chrome
  • 縮放網頁:為了讓文字放大到眼睛不須用力就能舒服地閱讀,開啟網頁後需要隨時用按 Ctrl及滑鼠滾輪放大網頁。但文字很大的情況下,此時瀏覽器扣除頁籤、網址列、標籤列、側邊欄等空間,能夠閱讀的剩下沒幾行。
  • 全螢幕模式:所以常常需要按 F11進入全螢幕模式,獲得更多閱讀空間。不過 F11 並不好按,且影響右手的滑鼠操作,我會利用「HotkeyP」這樣的快速鍵軟體,自訂可以左手操作的熱鍵來驅動 F11。
  • 閱讀模式:為了移除網頁除了文章以外的不必要區塊,我還會安裝「閱讀模式(Reader Mode)」這樣的套件,方便閱覽網頁。
2. Google 試算表 Google 試算表是我常用的網頁之一,當網頁放大後,能閱覽的儲存格行數著實不多,除了利用前述的技巧外,我還另外使用自動化程式,去除網頁上所有不必要的的欄位,請參考這篇文章的說明:「Google 試算表隱藏選單+工具列+公式列」。 3. Line以 1920*1080 解析度的螢幕為例,如果 Windows 作業系統能放大到 250%~300%,那麼 Line 的文字絕對夠大,足以在兩公尺以上看得清楚,不過後遺症是 Line 的操作界面會異常,而且連左下角的「設定」圖示都顯示不出來,導致無法調整設定。 所以 Full HD 螢幕的作業系統縮放設定為 200% 會是一個安全值,至少 Line 可以:
  • 文字大小設為「特大」
  • 字體經我研究後,可設為「MS Gothic」,這個字型自帶粗體效果,可以讓文字看起來異常清楚,十分推薦使用
4. PTT如果常使用 PTT 的話,如何讓 PTT 在遠距離能看到最大的字、最多行數,需要用上前面本篇提到的所有技巧來調整。
  • 如果使用 PCMan 等軟體,雖有全螢幕模式,畫面上仍存在不必要的欄位,從而佔用了閱讀空間,導致文字無法放到最大
  • 所以最佳解是使用瀏覽器進入網址 https://term.ptt.cc/,此時按 F11 進入全螢幕可獲得最大的視覺空間
  • 調整字型為前面提過的「MS Gothic」,可讓文字最大、最粗,閱讀效果最佳
  • 由於 PTT 網頁版不方便調整顏色,許多預設的高亮顏色會傷害眼睛,某些設定的顏色又過暗導致眼睛吃力,此時最好的閱覽模式是前面提過的「高對比模式」,可利用 Windows 系統預設的熱鍵切換
以上大致說明調整技巧,實際操作有不少眉角,短篇幅不易說清,會另外寫一篇說明。

五、軟體及遊戲更換

除了以上提到的軟體,會有更多根本無法調整的程式或遊戲,在遠距離下完全無法操作,必須改用替代品。 以下簡單舉幾個例子: 1. 圖片編輯軟體一直以來習慣了舊版 PhotoImpact,但因早已停止開發,軟體無法跟上新時代的螢幕,越高解析度的螢幕下,工具圖示會顯得越小,遠距離更是無法使用。 目前我找到的替代品是「Paint.NET」,界面清爽,圖示清楚,我常用的幾個簡單功能都有,這樣就足夠了。 2. 截圖軟體原本使用的截圖軟體是 Greenshot,但發現工具圖示太小,遠距離下無法使用,查了一下原來此軟體作者多年無暇更新了。 試了大量軟體好不容易找到一個合用的 Snipaste,在 32"螢幕下遠距離可以使用。 結果後來買了 43"螢幕後,Snipaste 的工具圖示竟然在 4K 解析度下快要看不到了,即便我一度想買付費版,然而發現付費版的圖示尺寸並無不同。 所以又花了不少時間找到 Flameshot,不但圖示大,而且操作界面的設計更方便友善,總算能在 43"上滿意地使用截圖軟體。 3. 快速鍵軟體過去多年使用的快速鍵軟體一直是 HotkeyZ,我也知道作者早已不更新了,但不覺得這對快速鍵軟體而言有什麼差。 直到開始遠距離看螢幕後,對於 HotkeyZ 的螞蟻大小界面開始感到痛苦,於是找到了現在使用的「HotkeyP」,可以調整界面字體大小,總算能遠距使用。 4. 工具軟體我常用的前端作業工具 Sublime Text 3 在 4K 螢幕下使用「酷音輸入法」時,輸入框會小得幾乎看不到,可以說都是在盲打。查了資料 Sublime Text 4 對高解析度有較好的支援度,升級後果然輸入框就正常了,只是升級後軟體的作業環境還是有一些地方需要重新檢查、調整設定,得額外花不少時間。 5. 遊戲一些比較舊的遊戲在 4K 解析度下,玩起來就可能是悲劇了,因為字會變得非常非常小。一些以前硬體不夠力時先買下來的 3A 大作,現在顯示卡跑得動了但 4K 螢幕卻看不到字,只能忍痛再收起來。 得要遇上良心公司在多年後仍願意更新遊戲,例如「巫師3次世代更新」,支援了 4K 畫質、光追技術,最重要的是支援較大字體顯示,總算能在 4K 螢幕好好玩個遊戲。 所以 4K 螢幕下新買的遊戲必須先測試字體大小是否適合觀看,否則趕快在時限內退款為宜。

六、補充

遠距離使用大尺寸螢幕的重要事項說明的差不多了,最後補充幾點:
  • 為了保護眼睛,螢幕買來最重要的一點是調整亮度,這分為兩個方面:
    • 環境亮度要充足:例如我兩個房間都改裝 LED 燈泡、燈管,各約 20W 或以上,除了省電也更亮。
    • 螢幕亮度調低:我的兩個大螢幕都調到 10~15 左右,但這非固定值,請依照環境光源、個人眼睛舒服度調整。將亮度不斷降低,直到眼睛開始不舒服的數值,再往回加一些即可。
  • 從我前面的「軟體更換」例子可看到,許久未更新的軟體很可能無法適應遠距離操作。因此挑選應用程式時,避免使用太舊、停止開發的軟體。
  • 從本篇的例子也可驗證前面提到的,解析度越低的螢幕,需要解決的問題越少,我的 4K 螢幕就得花更多時間處理軟體、遊戲的問題。
  • 所以買 4K 螢幕不見得好,但我的例子是沒得選,符合預算的選擇只有 4K。
  • 而且 YouTube 影片大多是最高 1080P,在 4K 下看起來還會稍微模糊,能安慰自己的大概是玩遊戲吧,可以看到更精緻的遊戲畫面(先有個夠力的顯示卡)
更多 3C 產品心得分享:

Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令

$
0
0
high-contrast-custom-hotkey-powershell.jpg-Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令Windows 提供的高對比模式主要有兩類:白底黑字、黑底白字。我習慣的配置是淺底或白底黑字,且大部分 Windows 軟體也都是淺底或白底黑字,所以其實需要用到高對比模式的情況沒那麼多。而我前端工作常會用到的工具 Notepad++、Sublime Text 等,都能自選淺底佈景,自然也不需要切換成高對比模式。 會需要切換的主要是瀏覽器,因為每個網頁都會有自己的風格、配色,若遇到常用的網頁是黑底、深色為主色時,例如「PTT 網頁版」眼睛看了沒那麼舒服,就會想切換成白底黑字。 可惜的是測試了大部分 Chrome 套件,沒有一個可以很好的將黑底白字轉換成白底黑字,總之跟 Windows 預設的高對比效果差很多,所以最終還是得使用 Win10 的白底黑字佈景才行。 事情到此看起來已經結束了,那麼還有什麼問題要解決呢?其實為什麼我要花那麼多時間測試 Chrome 高對比套件,就是因為 Win10 切換高對比模式的熱鍵不好按,一方面需要兩隻手才能按得出來,一方面真的很難記,熱鍵的設計完全沒邏輯所以常常忘記怎麼按。 所以我想改成自訂熱鍵,除了好記也能用一隻手就按出來。然而這個任務進行了才發現異常艱難,本篇會分享這個過程有哪些坑,以及最終的解決方法。

一、Win10 內建功能操作

1. 選擇佈景主題使用 Win10 內建的高對比模式,及選擇對應的佈景主題,請見以下流程: 開始 → 設定 → 輕鬆存取 → 高對比 →「開啟高對比」選擇「開啟」→ 選擇佈景主題 → 白底黑字 high-contrast-custom-hotkey-powershell-1.jpg-Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令選完佈景主題後,再將「開啟高對比」選擇「關閉」即可,將來使用高對比功能時會自動啟用此佈景主題。 2. 熱鍵 Windows 預設切換高對比模式的熱鍵如下: Alt + Shift + Printscreen這組熱鍵既不好記,也看不出使用截圖鍵的邏輯,還不如 Ctrl + HCtrl + Alt + H這類可以跟 High Contrast 做聯想的熱鍵,同時也比較好按。

二、自訂熱鍵的困難之處

要使用自訂熱鍵取代預設熱鍵,原理就是想辦法模擬按下 Alt + Shift + Printscreen,但我所有的測試都失敗了: 1. 快速鍵軟體 HotkeyP我利用「快速鍵軟體 HotkeyP」,設定按下 Ctrl + Alt + H後,會自動模擬按鍵 Alt + Shift + Printscreen,但很奇怪怎麼按都不會有反應,測試了各種選項例如「以系統管理原身份執行」、「延遲執行」等等,都沒有效。 2. PowerShell 指令於是測試直接用 PowerShell 指令,模擬同時按下組合鍵,例如可參考這個討論串的模擬按鍵語法「Send Keys in Powershell」,奇怪的是一樣不會有作用。

三、執行佈景檔案

後來想到以前 Win7 似乎已經做過這件事,使用的方法是桌面設定兩個捷徑,一個高對比、一個原佈景,點擊捷徑就會執行佈景檔案,於是試著在 Win10 測試: 1. 儲存原本佈景檔桌面按右鍵 → 個人化 → 佈景主題 high-contrast-custom-hotkey-powershell-2.jpg-Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令佈景調整完畢後,如上圖按「儲存佈景主題」,設定名稱(例如 WFU),這個佈景主題檔案路徑如下: C:\Users\使用者名稱\AppData\Local\Microsoft\Windows\Themes\WFU.theme在檔案總管直接點擊此檔,就會立即套用該佈景主題。 2. 找出高對比佈景檔 Win10 的所有 4 個高對比佈景檔案路徑如下: C:\Windows\Resources\Ease of Access Themeshigh-contrast-custom-hotkey-powershell-3.jpg-Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令如上圖,紅框處的兩個檔案是主要目標:
  • hcwhite.theme:白底黑字
  • hcblack.theme:黑底白字
直接點擊檔案,就會立即套用高對比主題。 3. 困難重重以上測試都成功了,接下來試著將檔案做成捷徑,結果點擊後發現:
  • 佈景真的有切換,但切換完之後,直接進入系統設定「佈景主題」的畫面...
看來 Win10 就是不給你乾淨俐落的切換佈景,非常討厭,還要另外手動關閉設定視窗。 4. 使用指令關閉視窗在網路上查了利用指令執行佈景檔案的方法,結果這個討論串「Windows 10: apply theme programmatically」說的就是我遇到的情形,不過倒是有人提供了指令解決,範例如下: C:\PATH\TO\THEME\FILE.theme & timeout /t 03 /nobreak > NUL & taskkill /f /im systemsettings.exe翻成中文的意思就是,執行佈景檔案後,等待 3 秒,再刪除執行中的檔案 systemsettings.exe(也就是設定畫面的那個檔)。 雖然看起來事情解決了,但我不太喜歡這個解法,因為切換佈景主題有時花的時間長、有時花的時間短,不一定都是 3 秒。如果換了過長或過短的秒數:
  • 長一點比較穩妥,但等待時間久,要跟著一起瞎耗時間
  • 短一點可能導致 systemsettings.exe 還沒執行,指令找不到檔案刪就結束了

四、切換佈景軟體

1. Winaero Theme Switcher所以,只能繼續找解決方案,還好找到了國外大神製作的切換佈景工具: 2. 執行方法high-contrast-custom-hotkey-powershell-4.jpg-Win10 自訂快速鍵切換高對比佈景主題﹍PowerShell 指令
  • 下載檔案後解壓縮,裡面有 Win7 及 Win8 資料夾,執行 Win8 裡的檔案 ThemeSwitcher.exe就行了
  • 執行後如上圖,可看到目前使用的佈景(WFU),點擊紅框中的「Apply a theme」,選擇佈景檔案即可套用。
  • 不知道佈景檔案路徑的話,請往前找「三、執行佈景檔案」→「2. 找出高對比佈景檔」
3. 使用命令執行功能測試沒問題後,我們需要的是使用命令執行,才能做成捷徑、設定熱鍵,請參考官方文件說明「How to change a Windows theme from the command prompt」,範例如下: themeswitcher.exe "C:\Windows\Resources\Ease of Access Themes\hcwhite.theme"

五、使用 PowerShell 切換高對比模式

所有困難點都解決了,接下來終於可以用 PowerShell 寫指令,切換高對比佈景與原始佈景: 1. PowerShell 檔案內容開啟記事軟體,貼入以下內容: # 偵測目前佈景 $theme = Get-ItemProperty -Path "HKCU:\Software\Microsoft\Windows\CurrentVersion\Themes" -Name "CurrentTheme" | Select-Object -ExpandProperty CurrentTheme # 偵測到高對比白色模式 if ($theme -eq "C:\Windows\...\hcwhite.theme") { # 則使用預設佈景 & "D:\...\ThemeSwitcher.exe""C:\...\WFU.theme" } else { # 非高對比白色模式 則切換到高對比白色 & "D:\...\ThemeSwitcher.exe""C:\Windows\...\hcwhite.theme" }
  • 所有程式碼的意思,請見註解文字說明
  • 所有紅字參數,請按說明修改成自己的路徑
  • hcwhite.theme 請改為自己的高對比佈景檔案路徑
  • ThemeSwitcher.exe 請改為自己的檔案路徑
  • WFU.theme 請改為自己的原始佈景檔案路徑
改完後請將此檔副檔名儲存為 .ps1,例如 highContrast.ps12. Bat 檔內容開啟記事軟體,貼入以下內容: powershell -WindowStyle Hidden -NoProfile -ExecutionPolicy Bypass -File "D:\...\highContrast.ps1"
  • 紅字參數 highContrast.ps1 請改為自己前面儲存的 ps1 檔名路徑
  • 改完後請將此檔副檔名儲存為 .bat,例如 highContrast.bat
  • 直接點擊此 bat 檔,即可看到高對比佈景切換效果
3. 自訂快速鍵全部都沒問題後,最後可為這個 bat 檔設定熱鍵:
  • 對檔案按右鍵,建立捷徑 → 對捷徑按右鍵即可自訂快速鍵
  • 或是也可利用 HotkeyP 這類快速鍵軟體,設定快速鍵來執行此 bat 檔
更多 Windows 相關文章:

如何自製整年份行事曆﹍Google 試算表範本

$
0
0
custom-calendar-google-sheet.jpg-如何自製整年份行事曆﹍Google 試算表範本因為覺得現成販售的實體行事曆不太符合需求,想要完全客製一套行事曆,直接印出來使用。只是自己造輪子很麻煩,若借用現成的範本改個版面、調整細節,這樣會容易一些。不過找了一陣子後,發現即使有現成範本,要滿足我的需求仍然很艱難。 網路上有許多熱心網友分享精美的行事曆檔案,下載後固然立即就能印出來使用,不過今年的行事曆解決了,那明年、後年呢?總不能年年等別人施捨吧~萬一哪年等不到滿意的樣式時該如何呢? 所以還是得有個一勞永逸的作法,行事曆一年 365 天的日期,都必須能用程式或函數自動產生。也就是說,這樣的行事曆範本,只要改年份,就能自動產生該年度所有日期。 符合此需求的最佳工具會是「Google 試算表」,除了有豐富的內建函數,還可寫 Google Apps Script 來滿足任特殊需求。所以只要能找到版面不錯的 Google 試算表範本,就能改成自己喜歡的樣式,且將來每一年都能使用。 本篇會分享一整套版面、功能齊全的「Google 試算表」行事曆範本,多達 24 種樣式,相信能滿足各種不同的需求。

一、行事曆範本 x 24

1. 範本網站Indzara」是個專門提供免費 Google 試算表、Excel 工具範本的網站,下面這個網頁提供了精美的行事曆範本: 24 個行事曆範本除了 Google 試算表,也有對應的 Excel 版本,全都是免費的。 如果有進階的需求,需要自訂事件(Events)的話,該頁面底部有付費版本(4 個範本)。 2. 行事曆範本介紹custom-calendar-google-sheet-1.jpg-如何自製整年份行事曆﹍Google 試算表範本上圖是 24 個範本的縮圖簡介,可以快速了解對應的版面、欄位配置,例如範本 1 是年曆以三欄顯示,範本 2 是年曆以四欄顯示。 custom-calendar-google-sheet-2.jpg-如何自製整年份行事曆﹍Google 試算表範本這就是範本 2 的版面效果,四欄顯示的年曆,可看到節日、紀念日都使用單獨顏色標示。 custom-calendar-google-sheet-3.jpg-如何自製整年份行事曆﹍Google 試算表範本範本 7,二欄顯示的雙月行事曆,可一次安排整個月份的行程。 custom-calendar-google-sheet-4.jpg-如何自製整年份行事曆﹍Google 試算表範本範本 9,常見的桌曆版面,可標示整月份的重要事件。 custom-calendar-google-sheet-5.jpg-如何自製整年份行事曆﹍Google 試算表範本範本 18,為週行事曆範本。 除了以上這些,還有日行事曆的版面樣式,可前往官網參考。

二、複製範本+設定+中文化

1. 下載頁面以下為 Google 試算表範本網址: 兩個網址的內容差不多,差別在於第二個網址提供了「設定範例」,可以知道如何新增節日或紀念日,以及填寫內容的格式。 使用上應該複製第一個網址的內容,同時參考第二個網址的範例格式,來填寫、自訂第一個網址的設定參數內容。 2. 複製範本複製範本的方法如下:
  • 進入前述「行事曆範本」網址
  • 選單上的「檔案」→「建立副本」,即可將範本存在自己的 Google 雲端硬碟
3. 設定custom-calendar-google-sheet-6.jpg-如何自製整年份行事曆﹍Google 試算表範本進入工作表「SETTINGS」可進行基本設定:
  • Calendar begins in Year:設定年份,修改後整年份的日期都會自動調整
  • Calendar begins in Month:選擇起始月份
  • Week begins on:選擇一週起始日
  • Calendar Name:設定標題字串
  • WEEKENDS:設定週末日
4. 節日+紀念日custom-calendar-google-sheet-7.jpg-如何自製整年份行事曆﹍Google 試算表範本下方兩組欄位可設定假日、紀念日,可參照上圖或前述「行事曆設定範例」修改:
  • HOLIDAYS:可設定國定假日的日期
  • EVENTS:可設定紀念日的起始日期、結束日期及起始時間點
4. 中文化如果想把月份、星期的英文中文化,經測試後,想從範本的中的設定(Settings)修改並不容易,還可能把背後運行的程式改壞。 所以如果想要中文化,建議逐一手動修改,從喜歡的範本工作表中,直接將月份、星期等儲存格,直接改成中文字串。

三、補充

1. 列印如果不用現成範本自己慢慢刻版面,列印的時候就會很痛苦,很難每一頁的邊界都整齊劃一。 使用現成範本的優點,就是版面都幫我們調整好了,能夠直接列印。如果像我一樣有客製化的需求,同樣推薦找版面接近的範本來微調版面,最終能把整年份幾十張紙一次印出來,是非常舒服的! 2. 客製化技巧這套行事曆範本由於使用了複雜的函數,很多地方牽一髮動全身並不好改,想要客製化並不輕鬆。 我的需求是自製雙週行事曆,範本中並沒有這樣的功能,所以只能找版面欄位相近的來改,會另外寫一篇分享我的作法。 如果你也有客製化需求,有必要了解部份 Google 試算表函數,那麼可先參考這兩篇教學,會十分有幫助:
更多「Google 試算表」相關文章:

PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?

$
0
0
ptt-font-size-high-contrast.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?最近「為了克服電腦背光,使用大尺寸螢幕」,PTT 在遠距離看起來字體顯的不夠大。由於 PTT 使用頻率算高,為了讓眼睛看得舒服,有必要對 PTT 進行版面完整優化。 需要調整的事項不少,而且過程不輕鬆,本篇會分享在瀏覽器使用下,PTT 網頁版如何加大加粗字體、放大版面、使用高對比模式等心得。

一、PCMAN 的侷限

1. PCMAN 選項平常上 PTT 使用的工具是「PCMAN」,其預設功能會隨視窗自動調整字體大小,所以無法放大字體。如果想手動設定字體大小,可參考這篇「pcman的字體問題」:
  • 「選項」→「自訂pcman各項設定」→「其他BBS設定」→ 取消「字體大小隨視窗大小動態調整」
  • 然後就能設定字體大小
  • 或是到「選項」→「快速BBS選項」→「設定BBS字型」,也能設定字體大小
2. PCMAN 的問題即便可以設定字體大小,但若設定了太大的數值,版面就會爆炸,超出版面的內容會看不到。 總之,手動調整大小有個上限存在,效果不會比預設的自動調整功能好多少。 3. 全螢幕模式為了提高字體大小顯示的上限,拉大版面範圍以容納更多文字,去除版面不必要的區塊,例如選單、網址、頁籤等等,PCMAN 提供了「全螢幕」模式,切換的快速鍵為 Alt + Enterptt-font-size-high-contrast-1.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?雖說是「全螢幕」模式,如上圖紅框,PCMAN 還是保留了網址列、頁籤,佔了不少高度,也降低了字體大小的上限,所以無論如何 PCMAN 不會是遠距離看螢幕的最佳解。

二、PTT 網頁版優化

PTT 想要在全螢幕下有最大的版面空間,效果最好的會是 PTT 網頁版,使用以下網址進入 PTT: ptt-font-size-high-contrast-2.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?如上圖,按 F11 進入全螢幕模式後,可看到網址列、頁籤等區塊都沒了,可視範圍最大,接下來可開始研究如何優化字體大小 1. 設定字型在 PTT 網頁版的頁面之下,按右鍵 → 設定,就能設定字型及大小,但也不是什麼字型都能隨意設定,可參考這個討論串「PTT如何調字型」,推文提到這些資訊:
  • 改成細明體 或其它等寬字型
  • 「SymMingLiu」放最前面 後面可放自己喜愛的字型
經我實測的結果,的確是這個樣子,查了維基百科「等寬字型」後知道,中英文等寬的字型有「細明體」,而「微軟正黑體」非等寬字型。 只要設定了「非等寬字型」,例如我嘗試「微軟正黑體」後,果然版面馬上參差不齊。後來開 Chrome 開發人員工具研究許久,總算搞懂是怎麼回事:
  • 「SymMingLiu」是作者自創的英文等寬字型,應該是特別設計過的寬度,兩個英數字元寬度與中文字元相符,版面才不會亂掉
  • 如果不使用「SymMingLiu」而是其他的英文等寬字型,則寬度不一定與中文字元相符,版面依然會亂掉
2. 使用自訂字型了解以上原理後,就有辦法在 PTT 設定任何中文字型了,請先參考這篇「網頁中英文字型跨平台設定最佳化」,了解 CSS 套用中英文字型的優先順序說明:
  • 英文字型在前、中文字型在後,這是正確的設定方法。
  • 例如先設定英文等寬字型「SymMingLiu」,再設定中文字型「微軟雅黑體」,即便「微軟雅黑體」不是等寬字型也能正常顯示,可參考下圖
ptt-font-size-high-contrast-3.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?3. 等寬字型如果使用中文等寬字型的話,那麼就不需要設定「SymMingLiu」,以下這些是我逐一實測,Win10 可使用、能顯示中文的等寬字型:
  • 細明體(MingLiu)
  • 標楷體
  • 宋體(SimSun)(簡體)
  • MS Gothic(日文)
雖說「宋體」、「MS Gothic」非正體中文字型,其實仍能正常顯示中文。 4. 最佳字型 MS Gothic逐一比對所有能顯示中文的字型後,「MS Gothic」的筆劃最粗,在螢幕上看起來最明顯,遠距離下觀看螢幕眼睛最舒服,所以最推薦設定的字型就是「MS Gothic」。 同時設定中「BBS 終端機大小」選擇「固定字體大小」後,還能自訂字體大小,讓 PTT 顯示的行數更多。

三、高對比模式

1. Chrome 套件 PTT 預設配色為黑底白色,我個人眼睛看久了沒那麼舒服,但如果是白底黑字就能長時間閱覽,所以想找看看有什麼方法可將 PTT 網頁版配色改成白底黑字,也測試了 Chrome 所有高對比套件。 直接說結論:
  • 沒有一個可以讓網頁變成白底黑字
  • 大部份是色彩轉換灰階效果,但由於 PTT 預設使用了各種的色彩、以及深淺配色,轉換成灰階後很容易某些顏色看不到
2. Windows 高對比佈景所以想要真正的白底黑字效果,最終還是要靠 Windows 提供的高對比模式佈景主題,使用熱鍵可切換成其中一種「白底黑字」模式,詳細說明及操作技巧可看這篇「Win10 自訂快速鍵切換高對比模式」。

四、Chrome 套件 Dark Reader

前面提到測試 Chrome 高對比套件,其中有一款「Dark Reader」,雖然沒有白底黑字效果,但無意間倒是被我試出一種很適合 PTT 使用的設定。 這個套件如同其名稱,目的是提供深色佈景配色,原本不會在我的考慮範圍,但因為功能很強大,所以花了些時間測試效果。只是設定過於複雜,摸索很久才大概知道怎麼回事,以下直接展示我的設定畫面: ptt-font-size-high-contrast-4.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?
  • 打勾啟用 term.ptt.cc
  • 「濾鏡」分頁:維持「深色」模式
  • 灰階:調整到 +65(可自行修改為看了舒服的數值)
ptt-font-size-high-contrast-5.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?
  • 「更多選項」分頁:
  • 字型改為「MS Gothic」,前面提過,這是最粗、眼睛看了最舒服的字體
  • 文字描邊:這個功能超強,可以讓字體變得更粗!我設為 +0.3
  • 選擇「濾鏡」模式,可產生淺底佈景配色
  • 點選「僅適用於 term.ptt.cc」,才不會影響其他網站的配色效果
ptt-font-size-high-contrast-6.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?點擊「設定網站切換」:
  • 取消「預設啟用」
  • 取消「偵測深色主題」
ptt-font-size-high-contrast-7.jpg-PTT 如何放大版面+字體放大加粗,瀏覽起來更舒服?上圖是 Dark Reader 調整設定後的 PTT 版面配色,雖然不全然是白底黑字,但多了一些粉色系的配色,畫面倒是活潑不少。

五、製作網址捷徑

如果常用 PTT 網頁版的話,可以將 PTT 網址做成捷徑,例如修改原本 Chrome 的捷徑如下: "C:\Program Files\Google\Chrome\Application\chrome.exe" https://term.ptt.cc/
  • chrome.exe 請改為自己的路徑
  • 將捷徑名稱改為 PTT
  • 圖示可以從 PCMAN 執行檔抓來用
將來從桌面或工作列,就能直接執行網頁版 PTT 了。
更多 PTT 相關技巧:

如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON

$
0
0
android-wake-on-lan-wolon-shortcut.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON前陣子「為了克服電腦背光,使用大尺寸螢幕」,由於看螢幕跟主機的距離都變遠,加上不想彎腰下去開關電腦,因此想研究有沒有遠端開機的方法。 一開始在 BIOS 設定看到有鍵盤、滑鼠開機的選項,想說太好了用無線鍵鼠點一下就能開機,結果測了根本不行,找了資料才發現,即便是 USB 有線鍵盤滑鼠,遙控開機幾乎是不可能的事,那麼更別提無線 USB 設備了。 此路不通的話那只剩網路開機的管道了,研究了一下總算成功用手機發訊號給 IP 分享器,讓電腦能從網路開機。本篇會說明 USB 設備不能開機的原因,以及 Android 手機網路開機+喚醒電腦的最佳 APP WolON,還有從手機桌面就能執行的技巧。

一、USB 及 PS2 遙控開機

1. USB 鍵盤滑鼠當看到 BIOS 支援鍵盤滑鼠開機時,直覺認為這功能指的是「USB 鍵盤滑鼠」,想說這什麼年代了怎麼還會有 PS2 這種設備,應該買都買不到吧?直到測試 USB 裝置失敗,看到這個討論串「電腦在快速開機的模式下用USB鍵盤喚醒」,該網頁提到:
  • USB 鍵盤滑鼠只支援S3/S4喚醒 → 意思就是可以從睡眠/休眠喚醒,無法從關機狀態開機
  • 關機狀態必須用 PS2 裝置才能開機
這才發現事情跟我想得不一樣,原來 PS2 裝置還有這樣的功用,難怪前陣子組新電腦時還覺得奇怪,都 2024 年了怎麼主機板還有 PS2 插孔,百思不得其解。 現在終於知道,PS2 裝置是用來遙控開機的,BIOS 的鍵盤滑鼠開機功能應該指的就是 PS2 裝置。只不過這個討論串只說結論沒說原因,還是得找到其運作原理才行。 2. PS2 鍵盤滑鼠根據這篇華碩官網文章「如何通過BIOS設置從鍵盤開機」,可以明確知道該主機板不支援 USB 鍵盤開機,所以大致可推斷,能否 USB 鍵盤開機要看主機板是否支援。 爬到這個討論串「為什麼USB鍵盤的POWER無法開機PS2的可以」,算是了解更多可能的原因:
  • 鍵盤開機需要在通電的情況下,透過主機板複雜的訊號傳遞使ATX電源開機
  • 關機狀態下 USB 供不供電都有可能,需要看 BIOS 是否正確設定(例如關閉ERP),或是主機板是否支援
  • 關機狀態下主機板可接收 PS2 訊號,這也是 PS2 能開機的主因
  • 而主機板在關機狀態下是否要支援 USB 訊號,需要考量成本的因素比較大,因為 USB 裝置需要額外的驅動程式(PS2不需要),為了這功能還要多做個識別 USB 裝置的晶片,多數廠商應該寧願放棄做這個功能
搞清楚原理後,決定把目標改為稍微麻煩一點的網路遠端開機。

二、網路遠端開機

1. 網路遙控開機原理要讓 Windows 電腦能被網路喚醒、開機,其原理說明如下:
  • 關閉「快速啟動」功能:因為 Windows 的「快速啟動」啟用後,執行關機時不會真的關機,而是形成類似「休眠」的效果,這會導致電源被切斷。前面有提過如果主機板不供電,將無法接收到喚醒的訊號,所以必須關閉此功能,讓電腦真正關機,保持主機板部份供電。
  • 網路卡設定為「允許這個裝置喚醒電腦」:如此設定後,在「睡眠」的狀態下,作業系統仍會保留網路卡的供電,可接收喚醒的訊號。
  • BIOS 開啟網路喚醒功能:如此設定後,在「關機」的狀態下,主機板仍會保留網路卡的供電,可接收遠端開機的訊號。
2. 操作步驟教學以上的操作步驟網路上教學很多,可直接參考這兩篇即可: 但是即便有教學,每個人的電腦主機板 BIOS 都不同,如果找不到 BIOS「網路喚醒功能」的選項在哪裡的話,還是得自行找找自己的主機板的使用說明。

三、WolON 設定

硬體、作業系統都設定完畢後,接下來需要找自己手機上合適的遠端喚醒 APP。我的手機是 Android 系統,測試了多個工具後,最好用的 APP 是這一個: 以下說明如何進行設定: 1. 找出網卡 MAC 位址首先需要知道主機網卡實體位址(MAC address),使用命令字元輸入以下指令: ipconfig/all會看到類似以下畫面: android-wake-on-lan-wolon-shortcut-1.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON
  • 實體位置:後面的六組字串就是網卡 MAC 位址
  • IPv4 位址:後面的本機 IP 記起來,後面會用到
2. WolOn 設定安裝完 WolOn 後執行此 APP,新增一個裝置: android-wake-on-lan-wolon-shortcut-2.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON如上圖,按右下角的「+」新增圖示 → 選擇紅框的區域網路(LAN)圖示 android-wake-on-lan-wolon-shortcut-3.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON
  • Device name:填入自訂主機名稱
  • Mac Address:填入自己的網卡 MAC 位址
  • Broadcast Address:填入前面紀錄的主機 IP,但最後一個數字改成 255 即可。此為廣播位址,是該 IP 區段的最後一個。
  • 剩下其他的都不需要動,按照預設值即可按「Save」儲存
3. 執行開機+喚醒設定完畢後,將來執行此 APP,選擇設定好的主機名稱執行,就能遠端開機或是喚醒電腦了。 不過我還是覺得有點不方便,需要先點一次 APP,再點主機名稱,有沒有直接把「主機名稱」變成捷徑放到手機桌面的方法呢?

四、製作手機桌面捷徑技巧

1. 小工具做成捷徑原本為了「把主機名稱變成捷徑」找了好多自動化 APP 測試,一方面全英文不易懂運作的邏輯,一方面這類 APP 真的非常複雜,所以最終還是放棄了。 結果沒想到我要的這個功能,其實 Android 系統就已經有內建了,只是我多年沒操作忘記了。 android-wake-on-lan-wolon-shortcut-4.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON從 Android 手機桌面下方有個六個點的圖示,中文稱作「應用程式抽屜」,如上圖,點擊此圖示進去後可看到所有應用程式。 我們要製作小工具捷徑,因此在上圖上方紅框,切換到「小工具」分頁,可看到所有能製作捷徑的小工具:
  • 往右捲到右下紅框這個「WOL」的圖示
  • 長按後可拖曳到桌面成為捷徑
  • 接著 APP 會要你選擇執行的主機,點擊剛剛設定好的主機名稱即可
2. 執行效果android-wake-on-lan-wolon-shortcut-5.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON拉到桌面後,圖示會根據不同情況有不同的效果:
  • 如果已經喚醒了主機,如上圖,會出現亮綠燈的狀態
  • 如果主機關了或睡眠,那麼綠燈會熄滅
android-wake-on-lan-wolon-shortcut-6.jpg-如何從手機桌面遠端遙控開機+喚醒電腦﹍Android APP WolON如果點擊圖示準備喚醒主機,如上圖會出現動畫,圖示外圍會有紫色線條繞圈圈,設計的非常用心。 我也測試了多款其他的「遠端喚醒」APP,桌面圖示都不像這款 WolON 有這麼多細節,因此我認為這就是最佳「遠端喚醒」APP,推薦給大家!
更多 Android 系統相關文章:

自製整年份雙週行事曆﹍Google 試算表範本

$
0
0
custom-biweekly-agenda-google-sheet.jpg-自製整年份雙週行事曆﹍Google 試算表範本以前使用的行事曆手冊,無論工作用的大本尺寸或個人用的小本尺寸,最近開始覺得累贅,因為實際使用時都只須近期那幾頁,不需要翻閱一整本。 相較之下活頁式行事曆比較有彈性,平常只須取近期的一兩頁出來,無論是攜帶或使用都很輕便。而且我的用法接近待辦清單,日期過了的活頁就可撕掉扔了,不必堆積用不到的活頁紙。 只是市面上符合我需求的產品很難找到,我理想中的版面大致是這樣:
  • 一張 A4 尺寸有兩欄的雙週行事曆
  • 一年只須 24 張 A4 紙 → 此為單面打印,如果雙面列印只須 12 張
而市面上的產品大概是這樣:
  • 尺寸接近的是 B5 活頁,版面可能是左右兩頁共一週的日期 → 雙面印刷一年至少 52 張
  • 更小的尺寸有看過一頁一週的行事曆 → 此為萬用手冊內頁,日期要自己填
對我而言要嘛一頁顯示的日期不夠多,要嘛得自己填日期,而且紙張尺寸都不夠大。既然找不到現成的只好自己來,本篇會分享我如何做出 A4 整年份雙週行事曆,同時每年都能自動產生日期,也會提供 Google 試算表範例檔供下載。 對這個範本有興趣的話,可先看下圖的預覽效果: custom-biweekly-agenda-google-sheet-1.jpg-自製整年份雙週行事曆﹍Google 試算表範本 (圖片出處: pixabay.com)

一、A4 雙週行事曆優點

這樣的尺寸及版面,是符合目前我個人工作量的工具,將來隨著狀況不同有可能會改成不同尺寸及版面。不過可以確定的是,只要掌握自製行事曆的技巧,將來要怎麼改都很容易。 而為何使用 A4 雙週行事曆,先大致說明一下考量點: 1. 紀錄單一常用來紀錄待辦的工具有這兩種:
  • 月曆:掛在牆上或直立桌上的,可看到整個月的日期
  • 週曆:躺在桌上的,背面為塑膠硬殼,單面有一整週日期
這些工具通常不能移動,必須走到定位查看。如果想在他處也能記得、處理這些待辦事項,得另外準備行事曆或筆記本,再抄錄一次同件事。 改用「A4 雙週行事曆」的話,只須紀錄在此,因為攜帶、移動方便,不須在多處紀錄同一件事。 2. 書寫面積大傳統橫躺式週曆尺寸很小,能書寫的字也得縮小,眼睛看得吃力。評估多個尺寸後,至少 B5 以上比較適合我,A4 尤佳。 3. 顯示日期多一頁若只顯示一週,不易綜覽較長的時間,若使用活頁式則移動作業時要帶的紙張數量太大,容易造成混亂。 A4 顯示雙週日期時,若採雙面列印,一年最多 12 張紙,要綜覽較長的日期也很容易。 因此對我而言,「A4 雙週行事曆」在紀錄資料量與綜覽日期兩者間,是最均衡的搭配組合。 4. 自動產生文字自行列印的最大優點,在於保有數位檔案,如果有定期需要出現的字串、提醒訊息、紀念日等等,還能用函數自動產生,不須手動書寫。

二、Google 試算表範例檔

1. 範本修改來源上一篇「如何自製整年份行事曆」介紹了一個 Google 試算表範本網站 Indzara,該網站提供了「24個精美行事曆範本」,本篇的「雙週行事曆」就是從其中的「範本7:雙月行事曆」修改而來。 如果也想要自製行事曆的話,可參考上一篇的流程複製該網站的範本檔,挑選喜歡的版面自行修改。 2. 雙週行事曆範本這個改好的「雙週行事曆範本」,我已將年份改為 2025,版面預覽效果可看文章開頭處,Google 試算表下載網址如下: 3. 複製範本進入以上網址會發現文件是唯讀狀態,可從選單「檔案」→「建立副本」,就能將此 Google 試算表儲存到你的 Google 雲端硬碟。 4. 修改年份儲存完畢後,開啟複製的試算表,就能修改內容。因為所有函數我都設定好了,只有一個地方需要修改而已,就是「年份」。 custom-biweekly-agenda-google-sheet-2.jpg-自製整年份雙週行事曆﹍Google 試算表範本如上圖,點擊儲存格「2025 年」,會發現公式欄位中顯示的值是 "2025",代表儲存格格式設定了特定日期格式,會自動顯示字串 "年"。 修改數值 "2025"為其他年份,整年日期都會自動調整:
  • 每個月顯示的日數會自動變動(主要是2月)
  • 每天顯示的星期會自動變更
5. 列印行事曆custom-biweekly-agenda-google-sheet-3.jpg-自製整年份雙週行事曆﹍Google 試算表範本因為原始範本版面調整的很好,基本上修改完年份就能列印了。上圖為點擊試算表工具列上「列印」圖示的畫面,大致注意這幾點:
  • 版面大小、邊界是設計給「A4」尺寸的紙張,所以紅框處紙張大小需要選擇「A4」
  • 左邊預覽畫面可設定上、下、左、右與邊界的間距
  • 按「下一步」後,如不列印全部日期的話,「網頁」選「自訂」,輸入要印出哪幾頁即可

三、如何自製行事曆

如果你覺得「原始範本*24」小改就能使用,沒打算自製行事曆的話,可以跳過這個章節的內容。 如果有比對過原始「範本7:雙月行事曆」,與我修改後的「雙週行事曆」,會發現變動巨大,除了一樣是兩欄以外,其他的所有版面都被我大改過了。如此一來,原範本使用的函數幾乎都無效,等於全部的日期、星期等等都是我重新計算後的效果。 以下一一說明「雙週行事曆」的修改要點: 1. 儲存格格式從範本網站複製 Google 試算表後,如果要設定儲存格日期格式時,會發現無法出現正常的中文日期格式,這是因為原始範本是外國人做的,把「語言」設成了英文。 custom-biweekly-agenda-google-sheet-4.jpg-自製整年份雙週行事曆﹍Google 試算表範本所以複製完範本第一件事,就是改語言設定,從選單「檔案」→「設定」,可看到上圖,修改完語言及時區,就能為儲存格設定各種中文日期格式了。 1. 年儲存格的「年」、「月」最好都不要輸入中文,保留數字就好,這樣才方便操作函數,用複製的方式就能自動產生所有月份。 儲存格的「年」、「月」等中文字,可修改儲存格的格式: 「格式」→「數值」→「自訂數字格式」,即可設定顯示「年」、「月」等中文字。 如不清楚怎麼做,也可直接參考本篇提供的「雙週行事曆範本」。 2. 月月份的部份,只有第一個「1 月」輸入數值 "1",第二個「1 月」及其他所有月份,都使用相對值即可,可參考本篇提供的「雙週行事曆範本」。 3. 使用內建函數接下來比較複雜,需要用到一些 Google 內建函數,可先參考前一篇提到的兩個教學網頁,知道那些函數的作用: 4. 1月1日 1/1 使用了以下函數: =DATE($A$1,$D$1,1)會抓年、月這兩個儲存格的值,來產生完整日期,並為儲存格設定了日期格式。 5. 1月2日 1/2~1/16 其實使用的都是相同函數: =IFERROR(IF(MONTH(A3+1)<>MONTH(A$3),"",A3+1),"") 1/2 抓 1/1 的值來判斷,並產生 1/2 完整日期,並為儲存格設定日期格式。 1/3~1/8 直接複製 1/2 的值即可。 6. 1月9日 1/9 須改成抓 1/8 儲存格的值來判斷。 「1/10~1/16」與「1/3~1/8」的處理邏輯相同 7. 1月17日 1/17 與 1/9 處理邏輯相同,改抓 1/16 儲存格的值來判斷。 一月剩餘日期以此類推即可。 8. 2月1日 2/1 使用了以下函數: =(MAX(J:J)+1))意思是判斷一月最後一天的日期,然後加一日即為 2/1。 二月其餘日期處理邏輯跟一月一樣,以此類推。 9. 3月1日做完二月後就輕鬆了,三月以後都可直接複製二月份儲存格,會自動產生一整個月的正確日期內容,至此大功告成。 補充一下,以上看起來複雜是因為,「雙週行事曆範本」是個極度客製化的樣本,才需要分段處理日期的函數。一般的行事曆,除了該月的第一天可能要特別處理,其餘日期大多只要函數一路複製到底就行了。
更多「Google 試算表」相關文章:

JS 能否判斷全螢幕狀態?有什麼絕佳應用情境?

$
0
0
現在市面上的扁平螢幕讓網頁可視範圍越來越小,以前 4:3、16:10 等適合看網頁的尺寸已經很難看到,主流比例成為 16:9、21:9、32:9 等適合看電影或多工的用途。 為了增加網頁的可視高度,按 F11進入全螢幕模式是常見作法。這陣子在研究如何寫自動化程式,構想是偵測到全螢幕時,將頁面上無用區塊進一步隱藏,讓可閱讀範圍增加。 原以為這是件極簡單的事,多年前寫「線上看電視」就用 Javascript 操作進入全螢幕、以及檢測當下是否為全螢幕狀態。但這次研究才發現,按 F11進入全螢幕後,JS 是偵測不到的!如果要用 JS 繞別的路來判斷是否為全螢幕狀態,網路上幾乎找不到有效的作法。 對於這件意料之外的艱鉅任務,還好最後有找到答案,請見本篇的研究心得,以及運用這個技術,我想改善的情境為何。 (圖片出處: chatgpt.com)

一、JS 能作到的事

開始研究之前,有必要先了解 Javascript 能作到、不能作到的事。 1. 全螢幕相關操作可參考官方文件「使用全螢幕模式」:
  • 可進入全螢幕模式:例如執行 document.body.requestFullscreen()
  • 可離開全螢幕模式:例如執行 document.exitFullscreen()
可參考這個討論串「How to detect browser has gone to full screen」:
  • 可偵測全螢幕狀態:例如執行 document.addEventListener("fullscreenChange", ...) 詳細語法參考官方文件「Document: fullscreenchange event
  • 對於使用者按 F11 產生的全螢幕,無法偵測或離開全螢幕狀態
2. 可取得螢幕、瀏覽器、網頁尺寸可參考這篇「用JavaScript取得取得各種尺寸資訊」:
  • 螢幕尺寸:執行 screen.width、screen.height
  • 瀏覽器尺寸(包含網址列、書籤列..等等):執行 window.outerWidth、window.outerHeight
  • 網頁可視尺寸:window.innerWidth、window.innerHeight
3. 不可取得螢幕解析度因為硬體資訊為作業系統層級,所以網頁層級的 JS 沒有權限可取得「螢幕解析度」,來判斷全螢幕狀態(因為全螢幕時「網頁可視尺寸」長寬值能算出「螢幕解析度」的數值)。

二、以往判斷全螢幕模式的思路

1. 網路資訊「判斷全螢幕模式」這件事並不稀罕,所以查一下網路上都是如何解決的:
  • 大部分網頁提到的都是使用 JS 操作前面提過的 fullscreenchange 來偵測全螢幕狀態,但會這樣寫的人應該都不知道按 F11 的全螢幕是偵測不到的。
  • 另一派的解法如同前面 stackoverflow 討論串「How to detect browser has gone to full screen」,認為 "screen.width === window.innerWidth"的狀態就是全螢幕
2. 實測效果然而經我實測:
  • window.innerWidth 怎麼樣都不會等於 screen.width
  • 瀏覽器最大化時,screen.width 等於 window.outerWidth,但兩者數值都遠低於螢幕寬度 px 值
  • window.innerWidth 有時會比 window.outerWidth 還大
怎麼會如此不合邏輯呢?前面的 stackoverflow 討論串有一樓提到,全螢幕時的數值應是這樣: window.innerWidth * window.devicePixelRatio 大約等於 screen.width這才了解 devicePixelRatio 是瀏覽器根據縮放比例而產生的數值,此數字乘上 window.innerWidth 才會是接近螢幕的寬度。 既然瀏覽器縮放會讓 devicePixelRatio 數值變動,那麼同理 window.innerWidth 也會隨之不斷變動,這也能解釋為何 innerWidth 會大於 outerWidth 了。 只不過 window.innerWidth * window.devicePixelRatio 回答了我的困惑,然而以下狀況依然得不到解答:
  • screen.width 的數值不是螢幕寬度
  • screen.width 與 window.outerWidth 兩者數值都遠低於螢幕寬度

三、觀察作業系統縮放比例

做完一連串實驗後,我的疑惑得到了解答: 1. 1920*1200 螢幕為了讓螢幕文字更清楚,我的 Win10 無論是縮放比例、文字大小都經過調整,以下全螢幕狀態的測試數據來自 16:10 螢幕、1920*1200 解析度。
  • 縮放比例 200%、字體縮放 125%(等同於 2*1.25 = 250%)
    • window.outerWidth=758、window.outerHeight=470
    • screen.width=768、screen.height=480
  • 縮放比例 200%、字體縮放無
    • window.outerWidth=948、window.outerHeight=588
    • screen.width=960、screen.height=600
  • 縮放比例 150%、字體縮放無
    • window.outerWidth=1264、window.outerHeight=783
    • screen.width=1280、screen.height=800
  • 縮放比例 100%、字體縮放無
    • window.outerWidth=1894、window.outerHeight=1174
    • screen.width=1920、screen.height=1200
2. 作業系統縮放比例的影響現在謎底揭曉了,原來是這樣子:
  • 作業系統的縮放比例會影響 screen.width 的值,當完全沒有縮放時,screen 長寬值就能顯示原始的 1920*1200
  • 瀏覽器 outerWidth 與 outerHeight 在全螢幕下,不知為何總是比 screen 小一些,而且呈現等比例狀態
  • 在作業系統無縮放時,outerWidth 與 outerHeight 減少的數值為 26*26,似乎 Chrome 瀏覽器會自動扣除 26*26 px,不知是否此數值為視窗標題高度與捲軸寬度?
3. 1920*1080 螢幕於是我再拿 16:9 螢幕、1920*1080 解析度進行測試。
  • 縮放比例 100%、字體縮放無
  • window.outerWidth=1896、window.outerHeight=1056
  • screen.width=1920、screen.height=1080
可觀察到 outerWidth 與 outerHeight 減少的數值為 24*24,這下算是了解 Chrome 全螢幕的運作邏輯了,會根據螢幕高度來調整「視窗標題高度」、「捲軸寬度」,大約是 2.2% 的比例。 4. 歸納判斷公式從實驗結果來看,如果要寫 JS 操作的話,大致可以歸納出 Chrome 判斷全螢幕的公式:
  • 當 screen 的寬高等於 window 的 outer 寬高時,一定不是全螢幕狀態
  • 當 screen 的寬高大於 window 的 outer 寬高,且兩者高度差距約等於 screen 的 2.2% 時,此時有 99% 的可能性是全螢幕狀態
  • 1% 的可能性是使用者自己手動拉螢幕大小,拉到接近螢幕大小,誤入此區段時,導致 JS 判斷錯誤
這樣的程式邏輯相信前端工程師都寫得出來,而且其實也不算是個完美的判斷邏輯,就不列出程式碼了。 其實沒列程式碼還有另一個主要原因:最後終於找到完美解決方法了!雖然 JS 無法很好的解決這個問題,但沒想到可以利用 CSS 來解決。

四、利用 CSS 判斷全螢幕狀態

可參考這個討論串「Detect fullscreen mode」,被標注正解的方法一點用也沒有,前面已經提過,但我仔細看過每個回覆後,卻發現了寶藏。 1. CSS 判斷全螢幕其中有一樓不到 10 個推薦,卻隱藏了完美又優雅的解法,讓我十分拜服並立刻幫按推薦。 原來 CSS 的 @media 語法包含了全螢幕狀態,可參考官網文件「display-mode」,語法如下: @media all and (display-mode: fullscreen) { /*全螢幕下的CSS樣式*/ }如果非全螢幕狀態,則將語法改為以下: @media not all and (display-mode: fullscreen) { /*非全螢幕下的CSS樣式*/ }2. JS 監控 CSS 的語法有了 CSS 解法後,如何用 JS 來讀取 CSS 的狀態呢?可參考官網文件「matchMedia() method」,參考語法如下: var isFullScreen = window.matchMedia("(display-mode: fullscreen)").matches; if (isFullScreen){ // 全螢幕執行的語法 } else { // 非全螢幕執行的語法 } 至此,優雅又簡潔的語法終於找到了!無論是否按 F11 的全螢幕狀態都能偵測出來了~

六、應用情境

那麼,我大費周章找出偵測全螢幕狀態的方法,究竟用途為何呢?簡單舉兩個目前想到的作法: 1. Google 試算表 Google 試算表的工作表區塊,在長寬比很窄的螢幕下,能看到的資料行數少的可憐,網頁超過一半的高度被這些區塊佔據了:
  • 瀏覽器網址列、書籤列
  • 試算表標題、選單、工具圖示
  • 公式列、底部工作表頁籤
進入全螢幕狀態後可隱藏一部分區塊,但還是不夠多。為了讓看到的資料行數最大化,我預計寫自動化程式,偵測到全螢幕時,隱藏所有我不需要看到的區塊,作業時看了也比較舒服、清爽。 詳細作法請參考這篇說明「Google 試算表隱藏選單+工具列+公式列﹍讓工作表區塊最大化」。 2. 網頁閱讀模式 Chrome 有個套件「Reader Mode」(閱讀模式),用熱鍵啟動後,會將網頁的無用區塊移除,例如側邊欄、標頭、底部、廣告等等,只留下「主要文章區塊」,閱讀起來很舒服。 但這個套件並非萬能,不是所有網頁都能將「主要文章區塊」判斷正確,有些類型的網站不容易將主要內容正確顯示出來,例如論壇、購物網站...,可以說是「Reader Mode」主要對部落格型態的網站有效。 同時這個套件並非以全螢幕來閱讀,需要另外手動進入全螢幕狀態。所以我的構想是,自行將網頁切換為全螢幕時,看看能否將「閱讀模式」這個功能,做出符合我自己需求的版本。 如果真能做出來的話,也許再另外寫一篇分享吧~
更多 Javascript 相關技巧: