Shortcuts 教程:一鍵搞定公眾號圖片排版

2021-02-12 愛書評

良好的寫作工具應該鼓勵寫作和排版這兩個過程完全獨立,互不幹擾,更不能互相破壞。寫作就是寫作,你要考慮的是寫什麼,而不是樣式(樣式也重要,但那是另一回事)。

此外,或許大多數人早都習慣了用 Markdown 寫作(這是一種帶格式標記的純文本,好比輕量級的 HTML 語法)。它只是文本,因此你可以在任何系統上用任何喜歡的編輯器寫作。而大多數寫作平臺也支持 Markdown,文章寫好了之後「一鍵發布」即可。除非有樣式需求,否則你幾乎意識不到排版的存在。

總之,這個流程的感覺就是簡潔、清晰。

然而自從寫公眾號,排版的問題一直讓我頭疼。官方編輯器完全不支持 Markdown,也沒有 iPad app,只能在後臺用網頁編輯。而網頁很不穩定,我寫《聖約》的書評,正文大概一萬多字,我粘貼到網頁中,瀏覽器立刻崩潰了。另外操作也很麻煩,以插圖為例,本來寫文章的時候圖片已經加好了,由於不能直接發布,我需要先把文章中的圖片全部上傳到後臺的素材庫,然後在正文中一張一張選擇,如果文章有很多圖,這個過程既繁瑣又容易出錯。再說,不管做什麼,「費二遍事」的感覺太差了。

因為官方的孱弱,第三方編輯器大行其道,然而它們大多數長這樣:

滿屏的分心內容,完全不符合寫作規律。也許它能讓你製作出吸引眼球的排版,但是對於文字創作,是一種幹擾。

工具的區別,反映的是觀念的差異,因此我只好放棄此類工具。


Markdown 轉換器

當然頭鐵的人還是有的,就是要用 Markdown 怎麼辦?我搜索了一下,有不少優秀的在線 Markdown 轉換工具,如例11,例22。

它們的基本思路是:

先用 Markdown寫作,不必操心發布的問題。

寫完之後,把文章粘貼到在線編輯器,它有一套定義好的 HTML + CSS 樣式,可以製作出精美的樣式,然後再把 HTML 轉換為富文本。

一鍵粘貼到後臺,發布。

然而對我來說,這依然有一個問題。那就是這些工具只能處理文字,而我對文字的樣式要求不高,你看《紐約書評》這些知識性的雜誌,它沒什麼漂亮的排版,實際上它也不需要。我最大的目的是希望能快速添加圖片,而無論什麼工具,圖片還是需要手動添加到後臺或第三方圖床。

因此這些工具我也用不到。

沒有理想的現成工具,我只好自己研究了。方法依然是依靠我最喜歡的 Shortcuts,經過幾天的試驗,我發現 Shortcuts 結合公眾號 API 可以完美實現我的要求。

本文將結合我使用的工具以及寫作習慣,介紹這個方法。


流程
Content Blocks

目前,我寫文章主要用 iPad 版本的 iA Writer(我沒有電腦,只用 iPad),它 和 Ulysses 應該是目前最好的寫作環境。下圖是我上一篇文章 iOS Shortcuts 教程之照片批量命名大法 的截圖:

界面相當的簡潔、乾淨。

iA Writer 有一個很有用的功能,叫做 Content Blocks,可以用來嵌入圖片,舉例來說,注意上圖中有一個路徑:/Assets/Kindle.jpeg

Assets 是我在每篇文章底下創建的目錄,專門保存圖片。當我要加圖的時候,我可以把圖片放到 Assets 中,改名,再在正文裡用如上格式引用。這就是一個 Content Block,它的意思是說,生成最終文章的時候,iA Writer 會從這個目錄中找到這張圖片,放到文章裡。

這是那篇文章的 Assets 目錄(左側):

然而,寫作的過程凝神靜心,怎容半點打擾?更別提什麼移動圖片、改名這通冗長的操作了。因此,我往往先只寫上這麼一句話(我有一個專門 Shortcut,自動幫我填上 /Assets/ 以及 .jpeg),根本連圖片都不需要,在文字一氣呵成之後,再添加圖片。而加圖的方法又如我那篇文章所述,我也會用專門的 Shortcut 自動完成,速度非常快。


公眾號 API

假設現在文字寫好了,圖片也都放在 Assets 中了。如果在本地預覽,那就是一篇圖文並茂的文章了。然而,如前所述,你不能把它「一鍵發布」到公眾號。因為需要先把 Markdown 轉換為富文本,而且本地圖片也不能直接複製粘貼到後臺,這是問題的關鍵。

由此我想到,能不能寫一個 Shortcut,讓它代替我手動傳圖,以及往文章裡加圖呢?

我研究了一下公眾號開發的文檔,發現了這些 API:

技術性的細節我也不清楚,一般我都是現學現用。簡單來說,API 就是服務的接口,通過 API,你可以使用這些服務而不必打開網頁操作。打個比方,你要給朋友送個禮物,你可以親自送到朋友家裡,也可以委託快遞公司。後者就是一種 API,你只需要和朋友說好這個「接口」,而不必自己跑腿。當然,快遞是收費的,而很多網絡服務的 API,都是免費的。

具體在本例中,通過「新增永久素材」這個 API,圖片會被直接添加到後臺的素材庫中(一定要用「新增永久素材」,如果「新增臨時素材」,不會加到素材庫),並返回一個圖片的 url。

經過我的測試,除了直接發文章的 API 沒有成功(提示我達到了單日 API 請求上限,我懶得再研究了),其餘功能都可用。


一鍵傳圖 Shortcut

這樣思路就清楚了:

圖片推送到公眾號後臺

推送成功後,返回圖片的 url

用這個 url 替換文章中同一張圖片的本地路徑

再把 url 封裝為 HTML

循環步驟 1-4,上傳 Assets 中所有圖片,這一點也是得益於 Content Blocks 功能,文本和圖片可以分別放在不同位置。

下面是完整的 Shortcut:

執行這個 Shortcut 之前,先複製全文到剪貼板(記住,圖片只是一句話,不是真的圖,因此複製的就是一段純文本)。

預覽,檢查複製的文本是否正確。

公眾號 API 要求一個 Access_Token,正如開門要用鑰匙,這是一串很長的字符,獲得 Access_Token 很簡單,官方文檔有介紹,這裡何必贅述。注意 Access_Token 兩小時刷新一次,同時為了實現同一個 Access_Token,各個 Shortcut 共享,我把它保存在 weixin_token.txt 中,就像這裡顯示的,Shortcut 執行的時候,會讀這個文件,獲得 Access_Token(嚴格來說,這一步應該加一個檢查機制,即如果獲取 Access_Token 失敗,Shortcut 報錯,但在實際中,因為好幾天才會用一次,Access_Token 已經過期,因此我總會先刷新再操作,所以驗證部分我就免了)。

這一步選擇 Assets 中的圖片,全選即可。

進入循環

首先把圖片的名字變成 /Assets/圖片名字.jpeg,即 Content Blocks 格式,等會用 url 把它替換掉。

調用 API 上傳圖片,返回一個 dictionary(詞典),這裡的「url」是詞典的「key」,它的「value」就是地址,即 http://……

把獲得的 url 封裝為 HTML

用 7 替換 5

循環結束,新文本複製到剪貼板,此時所有圖片 Content Blocks 全部被網址替換。例如,之前例子中的 /Assets/Kindle.jpeg,修改後變成:<figure><img alt="" src="http://mmbiz.qpic.cn/mmbiz_jpg/2ZPG1IzsVY1Hq4UcS6yZpICWnesTT4k82UpDnWcAHhqvYG86OHe3EULyf1mI8YLOEDw5kYdb6WNic6rxpdV2WLw/0?wx_fmt=jpeg" style=width:100%;"/></figure>

這時候,回到 iA Writer,粘貼覆蓋原文就好了。

為了更清楚地說明效果,我錄了一段視頻。先從 iA Writer 複製,然後用 Shortcut 獲得圖片網址,最後再粘貼回 iA Writer,整個過程大概一分鐘。


下一步做什麼

這時候,你可以把文章(還是 Markdown,圖片是 HTML)導出為 HTML。然後再把 HTML 轉換為富文本,直接粘貼在官方編輯器即可。

如果嫌樣式不好看,可以自己修改 HTML,然後寫一個腳本,以後每篇文章都做同樣修改。如果不會寫,可以用前面提到的在線轉換工具,再去後臺粘貼。

前面說過,這些工具無非就是應用一套定義好的 HTML + CSS。因此,更好的 DIY 方式是,自己定義一個公眾號專用主題,iA Writer 以及 Ulysses 等編輯器都支持自定義主題模版,再加上本文的 Shortcut,雖說不等於一鍵發布,但這已經是我能想像到的最效率的方法了。


垃圾中的霍比特人

《魔戒》裡有一句話:

Hobbits really are amazing creatures, as I have said before. You can learn all that there is to know about their ways in a month, and yet after a hundred years they can still surprise you at a pinch.(譯:霍比特人真的很神奇,你能在一個月之內熟悉他們的所有習性,然而即使過了一百年,他們依然能給你驚喜。)

Shortcus 就是這樣的應用,自從它問世就不斷讓我驚喜,讓我體會到它的潛力無限。另外隨著 iOS/iPadOS 不斷進化,加上 iA Writer 等簡潔而又強大的 app(除了 Content Blocks 和支持自定義主題之外,iA Writer 還有很多高級功能。例如,它可以和 GitHub 同步,實現版本控制。在我印象裡,iA Writer 曾經是唯一支持這個功能的編輯器),就我個人而言,iPad 已經是生產力最高的平臺了。

然而另一方面,很多產品依然相當糟糕,堪稱「垃圾中的霍比特人」。你第一眼看到它,覺得很爛,用了很久之後才知道——它其實更爛。

https://lab.lyric.im/wxformat/ ↩︎

https://knb.im/mp/ ↩︎

相關焦點

  • Shortcuts 教程:正則表達式修改 Markdown 連結
    上一篇文章中,我談到由於官方編輯器完全不支持 Markdown 語法,我不得不利用 Shortcut 以及公眾號 Web API 處理 Markdown 文本的圖片,這個 Shortcut 節省了我成噸的操作。今天討論如何處理「link」,這個 Shortcut 使用「正則表達式」,它把 Markdown 的 link 轉換為 footnote。
  • 實用攻略:一次性搞定Word排版全技巧
    其實只要掌握正確的方法,再長的論文排版也可以輕鬆搞定~ 這裡就專門為發愁排版的各位同學準備了實用的論文排版技巧全家桶。從論文的準備工作,到頁面樣式、圖形圖表的設置,再到引用參考、修改與列印,真是無所不包~更重要的是,課程內容並不只是局限於Word基本操作,而是為大家提供一種高效編排的思路!學完課程你會發現,原來有技巧地適用Word,論文排版可以如此高效、便捷!
  • Excel教程:你還在手動一張張插入圖片嗎?
    超級會員大放「價」通知:安卓APP以發布課程可以緩存下載和倍速看IOS系統(內測中,請公眾號學習)圖片在文件夾中,怎麼根據Excel表中的圖片名稱批量插入對應圖片呢?一、豎向批量插入圖片根據水果名稱批量導入對應水果圖片:圖片都放在F盤【圖片】文件夾中,以水果的名稱命名
  • OneNote教程:入門知識和技巧
    雲同步Onenote筆記的結構筆記本分區(分區組)頁(子頁)基本文本排版縮進(Tab)條理無順序項目:Ctrl+. 和其他人分享筆記導出為PDF給別人查看、編輯權限內容預告:進階的教程的第一部分將會介紹以下內容:OneNote UWP和OneNote 2010/2013/2016的區別從各種地方記錄到OneNote各種瀏覽器插件列印到OneNote 2016
  • Excel教程:VBA批量處理導出圖片到電腦
    「喏「,雨夜有氣無力的用手指了指領導羅給她的文件,小聲的說著:「2555個圖片,真不知道是那個BT弄出來的,這要導出來得搞到什麼時候啊!」    企鵝妹聽著,心想:「真是個好領導啊!」,然後眉頭一緊說:「嗯,看起來還是有跡可尋的,要不你先起來,讓我試試?」
  • Excel教程:你不知道的多層折線圖,其實可以更加清晰的展示數據!
    提示:APP長按圖片識別下載
  • 小龜的新媒體秘籍:如何打造個人公眾號?
    關於排版以後希望做一個經驗貼來分享更加具體的經驗,這篇想先提到一些最為重要的。首先是排版平臺,在秀米、135等平臺間徘徊了很久,最終還是選擇了秀米。秀米的界面最好看,操作也很簡便,對新手非常友好。再者,在排版的過程中我認為最值得注意的問題有以下幾個方面:第一,儘量不要給人以突兀或逼仄的感覺。
  • PS教程:把迪麗熱巴製作成馬賽克效果
    23門原創教程,原價168元現在78抄底價格 隨心暢學。全年最低價格,優惠不等人,早買早便宜 點擊了解支持微信公眾號+小程序+APP+PC網站多平臺學習感謝 UI中國 / 渱魚兒 的分享!效果圖:操作步驟:1、打開你一張你喜歡的圖片
  • 實用攻略:word論文排版最全技巧
    文字排版真真是讓很多同學頭疼的一件事,尤其是篇幅較長的論文,常常是改了後面又錯了前面,一遍一遍修改直到崩潰。
  • 拼車就上萬安拼車網,人找車、車找人、​車找貨,貨找車,免費只需一鍵在線搞定
    > 人找車: 長沙縣->萬安縣城出發時間:2021--02-06 周六 09:05人數:1人手機號:
  • 9102年了,公眾號還不會換字體?
    首先我們打開i排版編輯器,點擊右上角的 HTML 這個按鈕。點開之後,就會出現一個代碼的編輯框。<p><span style="font-family: STHeitiSC-Light; font-size: 14px; color: rgb(63, 63, 63);">歡迎關注公眾號i排版</span></p>
  • PS教程:合成人物幻化成老鷹的瞬間效果圖
    提示:APP長按圖片識別下載
  • 一鍵U盤啟動:安裝純淨版win10系統教程
    安裝有問題可直接在電腦學習公眾號留言!安裝方法:1、將準備的電腦裝機啟動U盤插入電腦的USB接口,然後按開機按鈕。2、看到顯示器變亮後按電腦啟動順序鍵(一鍵U盤啟動快捷鍵查詢),進入系統啟動選擇。注意:如果你是新電腦,進入PE桌面後需要先分區,分區方法請閱讀:【系統安裝前一鍵分區】,這個工具不用重新下載,在PE的桌面上就有。5、進入系統後會彈出下列裝機窗口(如果沒有彈出,請自行雙擊桌面上的一鍵裝機)。
  • 一鍵U盤啟動:安裝純淨版win7系統教程
    安裝有問題可直接在電腦學習公眾號留言!安裝方法:1、將準備的電腦裝機啟動U盤插入電腦的USB接口,然後按開機按鈕。2、看到顯示器變亮後按電腦啟動順序鍵(一鍵U盤啟動快捷鍵查詢),進入系統啟動選擇。注意:如果你是新電腦,進入PE桌面後需要先分區,分區方法請閱讀:【系統安裝前一鍵分區】,這個工具不用重新下載,在PE的桌面上就有。5、進入系統後會彈出下列裝機窗口(如果沒有彈出,請自行雙擊桌面上的一鍵裝機)。
  • 快捷指令:一鍵領3次紅包
    本快捷指令,iOS 12、iOS 13都能用本文目錄:①「一鍵領紅包」快捷指令
  • Excel教程:Excel中最靚的鍵-Ctrl+E鍵
    提示:APP長按圖片識別下載
  • Excel教程:快速將多個單元格內容合併到同一單元格
    提示:APP長按圖片識別下載
  • Excel教程:Excel竟然還能製作籤到表?
    然後在彈出excel選項窗口的右側區域選項中勾選開發工具,點擊確定。2.這時擊菜單欄就會出現開發工具模塊,點擊開發工具,然後點擊插入,在表單控制項中選擇複選框(一個方塊裡面帶有一個對勾的圖標)。然後在需要複選框的位置繪製一個複選框,並調整大小和位置。3.將滑鼠放在複選框上,滑鼠右鍵選擇編輯文字,在這裡輸入「是」然後回車。