巴哈文章的原始碼,原則上就是簡化+修改後的html碼。
文章相關說明:對於文章內容部分地方的說明。 1 | 原始碼的字體顏色 1-1 | 「標籤」以這個橘色表示。 1-2 | 「屬性」與「屬性標籤」以這個淺橘色表示。 1-3 | 「無尾標籤」以這個粉紅色表示。 2 | 原始碼與顯示結果 會以不同的底色來顯示:
|
1、「標籤」的概念
這邊先聲明,如果想理解文章原始碼,理解標籤的概念是非常重要的,而其實也很簡單。
文章中任意單元的組成,基本上都會是:
[(名稱)]……內容……[/(名稱)]
而「[(名稱)][/(名稱)]」便是所謂的標籤。
舉個例子,以巴哈文章中一定會出現的div來說:
[div]文章內容。[/div] |
文章內容。 |
看到這裡應該多少有些端倪了。簡單來說,
標籤就是一個由頭([XX])與尾([/XX])組成的東西,而頭尾中間會包住內容。重點在於,尾一定有/,頭一定沒有/。
而一個標籤之間是可以再包含標籤的,比如說:
[div][div]文章內容1[/div][/div] |
文章內容1 |
理所當然,被標籤包住的標籤是可以再包含標籤了的……這部分是沒有限制的:
[div][div][div]文章內容2[/div][/div][/div] |
文章內容2 |
……之類的。
由於上面的範例都只用到div,就顯示結果而言是看不出差別的。
另外,巴哈在將原始碼變成文章前,都會把原始碼自動整理一遍。錯誤的原始碼也會被自動轉換。
建議在手動輸入原始碼,新增任意標籤時,標籤的頭尾都先打好再開始輸入標籤中間的內容。否則要是漏掉了頭或尾,就等於原始碼出錯。
像上面說的,出錯的原始碼會被自動轉換。而轉換的意思是,被移除或是轉換成文章內容,
而文章有可能因此出現沒必要的錯誤,要修正得花上不少功夫。
2、「屬性」的概念
上面有提到了標籤,而屬性便是指標籤的屬性,可以透過設定標籤的屬性,來改變標籤內容的樣式。
一般而言,要設定一標籤的屬性,是直接寫在標籤中,以div的width為例:
[div width=50]文章內容測試[/div] |
文章內容測試 |
其中width便是屬性,意思是寬度,而50便是這個屬性的值。可以看到因為寬度被調小,某些字就被迫換行了。
(巴哈的app貌似顯示不出div的width效果)
任意屬性的表示方式都會是:
(屬性名稱)=(屬性值)
屬性都有所謂的預設值,不特別設定的話,就會採用預設值。所以並不是每個屬性都要設定。
而巴哈文章的原始碼,還有一種所謂的「屬性標籤」。以改變文字顏色的color為例:
[div][color=#aaaaaa][/color]顏色改成#aaaaaa的文字[/div] |
顏色改成#aaaaaa的文字 |
會發現到color好像是標籤名稱,又好像是屬性名稱……
其實所謂的「屬性標籤」,可以說是一個經簡化的標籤,可以當成它省略了標籤名稱,而該標籤有一個同名的屬性名稱。
這邊也只要記得屬性標籤的寫法就好,不用想太多。
3、巴哈文章中的標籤及屬性
標籤 — div(區塊)
應該有注意到上面的「區塊」兩個字。其實div標籤正是產生一個矩形的區塊,並會根據內容自動改變區塊高度。而且不同的div之間是會自動換行的,所以才構成了文章。
在巴哈的文章中,每次換行都會自動產生一個div,所以基本上整個文章會是由大量的div組成。
基本上div的屬性除了align外,其他平常都用不到,除非有特殊需求。巴哈的文章編輯器裡也只有align可以設定。
例子:
[div align=center]置中對齊文字[/div] |
置中對齊文字 |
◇ 可使用的屬性:
— width
寬度,值為任意正整數。預設為與頁面同寬。
如果設定的寬度塞不下區塊的內容,寬度會自動增加。
— height
高度,值為任意正整數。預設為自動。
如果設定的高度塞不下區塊的內容,寬度會自動增加。
— align
水平對齊,值為left(靠左)、center(置中)、right(靠右)三者擇一。預設為left(靠左)。
一般文字標籤
用來改變文字樣式的標籤,就是粗體、斜體那些。文字編輯器中都有這類功能,所以通常不會手動輸入這部分的原始碼。
不過有時候想去整理亂掉的原始碼的時候,還是看得懂比較好。
例子:
[div][b][l]粗體加斜體文字[/l][/b][/div] |
粗體加斜體文字 |
◇ 一般文字標籤列表
— b:粗體
— i:斜體
— u:底線
— s:刪除線
文字的「屬性標籤」
這邊是介紹專門用來處理文字的屬性標籤。
例子:
[div][size=4][color=#ff0033]大小4、顏色#ff0033的文字[/color][/size][/div] |
大小4、顏色#ff0033的文字 |
◇屬性標籤列表
— size
文字大小,值為1~7。預設值為3(註1)。巴哈的文字編輯器只可以選擇2~6。
註1、APP的編輯介面雖然看起來是3,但如果沒特地在編輯時把大小設成3,閱讀時會發現大小變成4。
— font
字體,值為任意字體名稱(英文)。預設值為Arial。例如:新細明體、微軟正黑體(這些都有個英文名稱)。
— color
字體顏色,值為色碼。預設值為自動(註1)。字體顏色部分,雖然色碼可以自己挑,但我覺得巴哈內建的選項就很夠用了。另一方面,如果文章有維護的需求,用內建的顏色會方便許多。
註1、會根據使用者有所改變。一般情況下會是深灰色。而在巴哈小屋時,自動的顏色會是該小屋佈景主題設定的文字顏色。
— bgcolor
字體背景顏色,值為色碼。預設為純透明。簡單來說,就是用螢光筆畫記文字的概念。要注意的是,這邊的bgcolor和其他地方的bgcolor是兩回事,不可以混淆,不過概念類似就是。
[div][bgcolor=#FFCCFF]更改bgcolor的文字[/bgcolor][/div] |
更改bgcolor的文字 |
(註、bgcolor為backgroundColor的簡稱)
無尾標籤 — hr (橫線)
hr標籤就是文章中「橫線」的功能,通常是區隔章節之用。要注意的是,hr標籤是省略「尾」的,也就是寫法上是沒有「尾」的。
如果在原始碼中自行加上尾,巴哈自動整理程式碼後,便會發現尾被清除了。
也當然,hr標籤是無法包含任何內容的。
例子:
[div]內容[/div][hr] |
內容 |
無尾屬性標籤 — img (圖片)
img是image的簡稱,就是文章中的圖片。img標籤和hr一樣,是省略「尾」的,而它當然也無法包含任何內容。
值為任意有效且符合條件的圖片網址。
很重要的是,巴哈的圖片網址條件為:結尾必須是圖片的副檔名,例如.jpg、.jpeg、.png、.gif。
如果不符合條件,圖片會變成一串可以點的網址,而不會顯示出來。
如果並非有效網址,瀏覽器就會告訴你找不到這個網站。
例子:
[img=https://i2.bahamut.com.tw/baha_logo5.png] |
(註、這邊放的是巴哈首頁Logo的網址) |
這邊也許有人會想說,那上傳自己裝置裡的圖片,是怎麼一回事?
其實上傳圖片這東西,上傳時巴哈會自動將你上傳的圖片壓縮(300KB以下),並放入自己小屋的圖庫。接著利用該圖片在圖庫裡的網址建立img標籤。
簡單來說,網頁上文章和圖片是分開的兩個東西,不會有圖片存在文章裡這回事。
巴哈小屋的圖庫大小是有限制的(300MB),換算下來至少可以儲存1000張以上。正常使用下通常是用不完的(圖片發很兇還是會用完的)。偶爾去清理一下小屋圖庫即可。
屬性標籤 — url (超連結)
值為任意有效網址。超連結就是點了之後可以開啟其他網頁的東西。
url標籤只能用在文字或圖片上。
例子:
標籤 — table (表格)
表格是個很特殊的標籤。一個完整的表格,只有table標籤是不行的,必須在table標籤內包含tr及td標籤,表格才會成型。
tr標籤是無法設定任何屬性的,設定td標籤則是可以讓表格的單格有所變化。
◇ 表格詳細介紹(未完整)
◇ table標籤可用的屬性
— width
表格在頁面的寬度,值為任意正整數或百分比(上限98%)。預設為98%。
百分比就是會隨頁面寬度變化,頁面寬度是100%。比如說設成50%,那這個表格的寬度就會占頁面的一半。
如果設定的寬度塞不下表格的內容,寬度會自動增加。
— height
表格的高度,值為任意正整數。預設為自動。
如果設定的高度塞不下表格的內容,高度會自動增加。
— cellpadding
內距,是表格框線與每格內容的距離,值在0~9之間。適當的內距可以讓表格美觀許多。
— cellspacing
間距,是表格各個格子之間的距離,值在0~9之間。原則上設定太寬會不太妙。
— border
表格框線的寬度,值在0~5之間。設成0的話框線會隱藏。
◇ td標籤可用的屬性
— width
該格子在表格裡的寬度,值為任意正整數或百分比(上限100%)。預設為自動。
百分比會隨表格寬度變化,表格寬度是100%。如果設定的寬度塞不下格子的內容,寬度會自動增加。
另外,設定的寬度是會牽動同一行的所有格子的。
— height
該格子的高度,值為任意正整數。預設為自動。
如果設定的高度塞不下格子的內容,高度會自動增加。
另外,設定的高度是會牽動同一列的所有格子的。— bgcolor
單個格子的背景顏色,值為色碼。預設為純透明。
(註、bgcolor為backgroundColor的簡稱)
(註、bgcolor為backgroundColor的簡稱)
— rowspan
垂直合併格數,值為合法的正整數。這部分比較難理解,表格詳細介紹中才有詳細說明。
— colspan
水平合併格數,值為合法的正整數。同上,這部分比較難理解,表格詳細介紹中才有詳細說明。
— align
水平對齊,值為left(靠左)、center(置中)、right(靠右)三者擇一。預設為left(靠左)。
— valign
垂直對齊,值為top(靠上)、middle(置中)、bottom(靠下)三者擇一。預設為top(靠上)。
注意,valign只有在表格的td標籤內有作用。