LoNote 的圖片插入

LoNote 中有一些可以操作原始碼的地方,不過那都是些非必要的功能。比方說,絕大多數使用者不會想去安裝外掛、不會用到包裹器、沒必要自行定義時間戳格式、無需動用進階搜尋的欄位功能……您完全不去理會這些比較難搞的地方,LoNote 也可以運作得很不錯。

不過,話又說回來了,在以上的大原則下,LoNote 之中還是有一個必要性使用難度平衡得比較微妙的部份——那就是「插入圖片」這件事。

我覺得這可以稍微講講。

插入圖片

1.jpg

▲ 這是 LoNote 中的插入資源視窗。那行密碼般的文字就是「表現格式」

插入資源,其用處在於讓使用者在筆記中插入任何類型的檔案

為了讓千奇百怪不同類型的檔案(包括文字檔、圖檔、聲音檔、影片檔、電玩存檔等),都能以最適合的方式在頁面上被展現出來(呈現為超連結、圖片、播放器等),使用者能夠而且也必須去手動指定「資源被插入時採用的 HTML 表現格式」。即使只是套用預設提供的格式,使用者也該大略明白自己選了怎樣的格式才好。

考慮到大多數人都只會用它來插入圖片,故我今天打算特別為插入圖片該用的格式,做點非常淺顯易懂的說明,作為沒有 HTML 技術背景之人的參考。

插入圖片時的基本格式

LoNote 預設的資源插入格式,其實就是為插入圖片而設計的,如下:

<img src="{THIS}" /><br/>

這條格式,可以幫您在插入圖檔時,讓圖檔正確地顯示出來。

為了讓這格式可被理解,我先把它分成兩個部份解說,也就是 <img src="{THIS}" /><br/>

其中後面的 <br/> 是換行的意思,與圖片本身無關所以不管它,我們只看前面的 <img src="{THIS}" /> 就好。

在網頁上要顯示圖片,不管是 jpg、png 或 gif,全都必須透過 <img/> 元素才能顯示[0]。不過只寫 <img/> 這六個字母顯然並不足夠,因為我們並沒有指定到底該將哪個檔案作為顯示時的資料來源

想指定資料來源,必須要在元素裏面加上 src 屬性。[1]

也就是變成像下面這樣:

<img src="1.jpg" />

上面這行,就是將「要顯示的圖檔」指定為 1.jpg 的意思。

在 LoNote 中,可用 {THIS} 取代 1.jpg,因為 LoNote 會自動將 {THIS} 替換為實際檔案的檔名,這樣一來就不用每次插入時都手動調整格式。

最基本的圖片插入就是這麼簡單。

進階的圖片格式

<img src="{THIS}" /> 是為最基本的圖片插入格式,但……或許您還想要控制一下圖片插入時的大小?

以下這行預設就有錄入,使用者可透過「插入資源視窗」中的下拉式選單來選用:

<img style="width: 500px;" src="{THIS}" />

比起一開始的基本格式,上面這行多了一個叫作 style 的新屬性,長相為 style="width: 500px;"

style 屬性中所擺放的內容正是大名鼎鼎的 CSS。這可以用來幫助我們控制「內容」的呈現方式。很明顯地,此處的內容 width: 500px; 表示將圖片的寬度強制指定為 500px 寬[2],而不是像之前那樣使用原生解析度。

其實並不難對吧?知道原理後,您還可以自由將其調整為 600px 或 256px 之類的,隨便怎樣都行。

圖片都以相同寬度插入的話,排版也會變得整齊。我覺得這在記筆記時還蠻有用的。


  • [0] img 是 image 的縮寫。
  • [1] src 就是 source 的縮寫。
  • [2] px 是 pixel 的縮寫。