為不懂 CSS 的人所寫的說明:如何修改安布羅斯 GOI 格式的代碼
评分: +22+x

安布羅斯 GOI 格式分成菜單 + 評論兩部分。評論的區塊也許可以千篇一律,但菜單可不行,因為安布羅斯餐廳跨足許多領域──除非你想用別人的 CSS 來寫同一種餐廳的不同品項。

事實上,雖然無法直接複製菜單的代碼用在不同店家,但你可以基於別的安布羅斯的菜單代碼來設計自己想要的顏色。這裡將為不懂設計 CSS 的人簡單敘述如何自己修改別人的 CSS 來寫安布羅斯 GOI 格式。(基於 CC BY-SA 3.0 的精神,最好說明你從哪邊修改得來的)

我們拿棘刺谷的安布羅斯餐廳來試試看。

下面這一段是構成菜單框的東西:
[[div style="border: double 12px #9a4040; background-image: radial-gradient(#edcbb1 60%, #c68e8c ); padding-top: 3em; padding-right: 3em; padding-left: 3em; padding-bottom: 6em; margin-bottom: 3em; color: #710309;"]]

[[/div]]
別忘了最後要用上面那東西封口!

效果會是這樣:

一、菜單外框的 CSS

我們來說明這些 div 後面的東西到底是什麼吧:


邊框

border: double 12px #9a4040

border: 之後分別代表 [樣式] [粗細] [色碼]。

[樣式]:
平面的線有 double(雙線,這是安布羅斯最常用的)、solid(單條實線)、dashed(虛線)、dotted(點線)。
立體的線有 groove(谷線)、ridge(脊線)、inset(嵌入效果)、outset(浮出效果) 。

[粗細]:
需要注意的是,如果你用了 double 之類的雙線邊框,那麼這個粗細是共同佔有的寬度,而不是單條的寬度。

[色碼]:
網路上可以找到很多色碼表的網站,挑幾個自己喜歡的吧。
Color Hex很好用,會給單色顏色的不同明暗與色調變化。
如果你不會自己調,也有一些網站放了依色系排列的色表,像這個這個。另外維基百科顏色列表的也都很齊全。


背景色

background-image: radial-gradient(#edcbb1 60%, #c68e8c);
這是背景「圖片」,你沒看錯!背景的漸層色其實是一張函數生成的圖片。

radial-gradient 是徑向漸層,用來營造從中間擴散的顏色效果。這邊可能是最頭痛的東西了,我們一層一層來說明:

(#edcbb1 60%, #c68e8c)
逗號左邊的色碼是起始色;逗號右邊色碼是結束色。

那 XX% 是顏色範圍,你可以把 100% 當成最大範圍,0% 當成中心小點。

#edcbb1 60%:我的起始色 #edcbb1 要在 60% 的地方都是純的 #edcbb1,之後才開始變色;如果你為結束色設定了範圍,他的意思會是:我的結束色在 XX% 開始是純的結束色,不過會被起始色的設定壓過去。

你起始色和結束色都可以設定範圍,也可以都不設定。但是記得,如果兩個都設定了,那結束色的 XX% 要比較大,不然就會毫無漸層,以 (#edcbb1 60%, #c68e8c 30% ) 為例:


下面這張則是 (#edcbb1 , #c68e8c ):

你可以找到一些網站可以直接觀看 CSS 的效果,讓你不用一直點預覽:
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
https://www.we-shop.net/css3/css-gradient.html

特別是下面那個網站,可以用直覺操作的方式看到成果:
CSS.PNG

我想拉出一張內白外綠的薄荷色,網站上方會有效果預覽。你對效果滿意了,就把操作數據填回你的 CSS 中,像這個就是 (#EAFCEC 10%, #A1D99A 64%),效果如下:

如果你想放棄使用漸層,只想用單色,那麼可以把 background-image: radial-gradient(#edcbb1 , #c68e8c ) 改成:
background: 色碼

下面這塊是 background:#E8E3D0 的效果


內距與外距

padding-top: 3em; padding-right: 3em; padding-left: 3em; padding-bottom: 6em;

padding 用來調整區塊內的東西和邊框的距離,直接複製別人的 CSS 之後你有可能會想修改一下。依我寫過的夢神美食指南來說:我加了上端裝飾線,還有下部分的頁碼,如果我直接用了別人的 CSS,會非常不協調:

divider-2154993_960_720-e.png




- 1 -

改動 padding-top: 2em; padding-bottom: 0.8em;
divider-2154993_960_720-e.png




- 1 -

這樣就比較像樣了。

margin-bottom 則是這個區塊下方外面的東西和邊框會有多近。


上面那段空白那是 margin-bottom: 3em。

上面那段空白是 margin-bottom: 1em。
文字屬性

color: #710309

這邊的 color 是這個區塊內的文字的預設顏色,你依然可以在這個區塊內另外指定顏色。
你也可以在這用font-family: '字型名字' 設定區塊內的字型。
font-size: 則可以設定區塊內的字大小。
line-height: 可以設定行高。
不過字的大小和行高我通常會在菜單內部才調整。另外要注意的是:主站複製過來的 CSS 套用在中文有可能會字太小而且行高太窄。



二、菜單內部


字型

font-family: '字型名字' 可以用來設定字型,可是這樣只有電腦有安裝此種字型的人看的到,其他人只會見到預設字型。所以就需要 CSS 嵌入字型,推薦使用 Google Fonts,不過很可惜的是免費的中文雲端字型沒有太多選擇。另外就是中文字型檔案比較大,不要嵌入太多字形檔。

在 Google Fonts 裡面挑選想要的字形(你可以像主站一樣,選個漂亮的英文放在菜單最上端)。這次我用簡體的 ZCOOL XiaoWei 以及思源黑體繁體來示範。

點擊你想要的字型左上方的 (+) ,會出現這樣的視窗:
font.PNG

中間那條 @import 你需要像這樣放在原始碼中:

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC|ZCOOL+XiaoWei');
[[/module]]

CSS 寫法也告訴你了:

font-family: 'ZCOOL XiaoWei', serif;
font-family: 'Noto Sans TC', sans-serif;

你有兩種方法可以設定文字屬性:

[[span style="font-family: 'ZCOOL XiaoWei', serif;font-size:150%;"]]安 布 罗 斯 有 机 蔬 食 [[/span]]
安 布 罗 斯 有 机 蔬 食

用 span 的話是這一行的文字有這屬性。

[[div style="font-family: 'ZCOOL XiaoWei', serif;font-size:150%;"]]
安 布 罗 斯 有 机 蔬 食
[[/div]]

安 布 罗 斯 有 机 蔬 食

用 div 則是再分一個區塊,區塊裡的文字有這個屬性。


分隔線

wikidot 自帶的分隔線是灰色的:


你可能覺得這和你的菜單不搭,
實際上我在夢神美食指南的菜單中底部用的水平線是用別的方式畫出來的:


看到了嗎?


我是這樣做的:
[[div style="border-bottom:2px solid #ab68d9; margin-bottom:1px;"]]
[[/div]]
前面講過一些 CSS 的東西了,所以顏色粗細和樣式應該知道怎麼調整了,那麼我就不再重複。

順便給兩條不同形式的水平線:

代碼1
[[div style="border-bottom:2px solid #98aca3; margin-bottom:1px;"]]
[[/div]]
[[div style="border-bottom:1px solid #98aca3;"]]
[[/div]]

效果1



代碼2
[[div style="border-bottom:1px solid #222;"]]
[[/div]]
[[div style="border-bottom:1px solid #444;"]]
[[/div]]
[[div style="border-bottom:1px solid #666;"]]
[[/div]]
[[div style="border-bottom:1px solid #888;"]]
[[/div]]
[[div style="border-bottom:1px solid #AAA;"]]
[[/div]]

效果2




內部排版

本樣品中所有中文亂數假文來自於李怡志所編寫的亂數假文產生器

推薦 pixabay 的 divider分隔線裝飾分類,有很多可以放在菜單上的分隔線。

你的標題可以用花一點的字型( Google Fonts 簡體中文的字型比繁體多了一些)

安 布 罗 斯 有 机 蔬 食

這裡可以放張圖
如何找到合乎CC的圖像
PS你的SCP

这里是餐厅的说明文,餐厅什么时候开幕,餐厅特色,目前有没有特别活动等等。标题以及这一段说明文我觉得可以用比较花俏的字型。

如果是套餐之類的價格固定的菜單就把價格放在這裡

免責聲明,或其他什麼東西

食品分类


菜名:价格
這裡是品項的解說,這邊我推薦用看得比較清楚的思源黑體。後面是排版用的亂數假文,別在意1。不他寶內也步中中麼;創離具商目活值手設大輕本開中第魚哥一交情;感持要本入,主是親火喜講設物最海道河示就:是不考到十細時傳省離數帶個車苦?下加夫



這裡可以放餐廳地址,電話,頁碼等等你覺得會出現在菜單底部的東西
你有在菜單上加註解記得放一段下面那種東西在這裡
[[footnoteblock title=" "]]

要不然腳註會自動跑到文章最底部。




三、評論

雖說評論區可以重複,但目前每篇安布羅斯GOI格式用的技巧都不太一樣。

這看起來很像 Facebook 或 Google map 的評價。

> [[>]]
> [[size 150%]] @帳號
> ★★★☆☆ [[/size]]
> [[/>]]
> 評論
> @@ @@

@帳號
★★★☆☆


評論

注意,如果你要用顯示讀者帳號的代碼,你要這樣寫:

[[module ListUsers users="."]]
> [[>]]
> [[size 150%]] @%%title%%
> ★★☆☆☆ [[/size]]
> [[/>]]
> 評論
> @@ @@
[[/module]]

這個比較複雜
用div畫了一個背景區塊,然後又用 div 切出評論區。對不熟悉的人來說可怕的是這個 div 很多,可能會出錯。

最外層的框
[[div style="background: 這裡是背景區塊的顏色; border: 1px solid silver; padding: 1em;"]]
[[=]]
[[size 400%]]##firebrick|**大標題**##[[/size]]
,,副標題之類的,,
[[/=]]

最後面 (也就是評論的 [[/div]] 之後) 有個 [[/div]] 把框封起來。

在實際的例子裡背景顏色是 antiquewhite,你可以換成色碼,顏色名字就查維基百科的網頁顏色吧。
##firebrick|**大標題**##這個是wikidot 語法的顏色寫法,你當然也能修改。

這個是放評論的白格子
[[div style="float: center; width: 80%; margin: auto; box-shadow: 2px 2px 2px rgba(0,0,0,.4); padding: 1em; background: white"]]
(此處插入裝評論者資料的 div,見下方)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis lacus sed elit consequat consectetur in non augue. Maecenas non ornare eros. In tincidunt magna quis condimentum ornare. Cras facilisis dolor sed malesuada ornare.

[[/div]]

注意:如果你想要開另一個評論,在[[/div]] 與新的 [[div style="float: center; width: 80%; margin: auto; box-shadow: 2px 2px 2px rgba(0,0,0,.4); padding: 1em; background: white"]]
 之間必須強制用@@@@空一行,不然兩個白塊會黏在一起。

這個 div 是裝評論者資料
[[div style="text-align: right; font-size: 1.2em; font-family: serif"]]
**名字**
★★★★☆
[[/div]]


改了一下顏色和字型大小,效果會像這樣:

大 標 題

副標題之類的

名字
★★★★☆


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque convallis lacus sed elit consequat consectetur in non augue. Maecenas non ornare eros. In tincidunt magna quis condimentum ornare. Cras facilisis dolor sed malesuada ornare.



這個雖然看起來很和倫敦店很像,但是這篇不是用 div 畫評論格,而是直接用 wikidot 的引用代碼。

[[div style="background: #201420; border: 1px solid silver; padding: 1em; margin-top: 2.5em;"]]
[[=]]
[[span style="color: #ffe4e1; font-family: 'Ruluko'; font-size: 2em"]]
MICHELIN GUIDE ONLINE[[/span]]
[[span class="dark web" style="color: #eebfeb; font-family: 'Ruluko'; font-size: 1.5em"]]**//Powered by [http://www.scp-wiki.net/the-dark-web-dke79-o2rg5-4jlw6 The Dark Web]//**[[/span]]
[[/=]]
> ★★★★☆
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
>
> 名字
[[/div]]

效果是這樣的:


MICHELIN GUIDE ONLINE

Powered by The Dark Web

★★★★☆
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

名字


這裡的字型不一樣是因為我沒有嵌入 Ruluko 這個字型,
超連結顏色不同的原因,還有 span class="dark web" 的涵義請看第四節的連結顏色。

我們把那一串連結與顏色的代碼先清掉,簡化以後得到下列模板:

大標題
副標題

★★★★☆
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

名字

★★★★☆
評論欄之間的分隔只要空行就好

名字

[[div style="background: #c9ad7f; border: 1px solid silver; padding: 1em; margin-top: 2.5em;"]]
[[=]]
[[span style="font-size: 2em"]]大標題[[/span]]
[[span style="font-size: 1.2em"]]//副標題//[[/span]]
[[/=]]
> ★★★★☆
> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
> 
> 名字

> ★★★★☆
> 評論欄之間的分隔只要空行就好
> 
> 名字
[[/div]]

這篇值得注意的是,他的評論區底色寫法不是用單色的 background: #201420
而是用和菜單一樣的漸層 background-image: radial-gradient(#201420 60%, #d356d3 )


四、連結的小把戲

連結顏色

安布羅斯的 GOI 格式會參考很多網站上的其他異常,通常還會加個連結。但是 SCP 基金會用的連結顏色可能會和菜單不合:

蘆筍、高麗菜、黃瓜、莧菜、山蘇、空心菜、龍鬚菜、小白菜、青花菜、荷蘭芹、西洋芹

你需要在原始碼中加入這個:

[[module css]]
.menu a:link{color: #88AA00}
.menu a:newpage{color: #88AA00}
.menu a:visited{color: #88AA00}
.menu a:hover{color: #ADFF2F}
[[/module]]

我分了一個分類叫:menu
從上至下分別是:
  • 連結顏色
  • 本 wiki 上還沒有的頁面的連結顏色 (註:需使用內連語法,外連語法連到不存在的頁面和一般連結色相同)
  • 點過的連結的顏色
  • 滑鼠移到上方時連結的顏色

接下來你要用 span class="menu" 或 div class="menu"

(這裡的字型我已經設定成思源黑體了,下面的代碼會省略掉設定字體的代碼。)

[http://scp-wiki-cn.wikidot.com/scp-167-jp 荷蘭芹] [[[sdewfefwee| 不存在]]]

[[span class="menu"]] [http://scp-wiki-cn.wikidot.com/scp-167-jp 荷蘭芹] [[[sdewfefwee| 不存在]]][[/span]]

荷蘭芹 不存在

荷蘭芹 不存在


不過到底要怎麼配色就是必須多次嘗試的事情了。

或者您可以使用 HTML <a> 標籤:
[[a href="網址" style="color:#色碼"]]文字[[/a]]

[[a href="http://www.scp-wiki.net/main" style="color:#366da8"]]點我回主站[[/a]]
點我回主站


什麼也連不到的連結

代碼
[# 點我前往安布羅斯官方網站]
效果
點我前往安布羅斯官方網站

這和可以和上面結合起來成為改顏色的連結:
[[span class="menu"]][# 點我前往安布羅斯官方網站][[/span]]
點我前往安布羅斯官方網站

不過如果你要用 a href 的語法,「網址」是:javascript:void(0);
[[a href="javascript:void(0);" style="color:#366da8"]]點我前往安布羅斯官方網站[[/a]]
點我前往安布羅斯官方網站


五、評論擴展包


類推特

這是三波特蘭設定中的 Void,由於安布羅斯設定上和三波特蘭關係滿大的,所以使用這種東西發評論也很合理。


頭像圖


暱稱
⁂Loremipsum(這是帳號)



#Void的井字標籤是藍色的 ⁂ambrose-restaurant 別忘記標籤還有 tag 帳號之後要加空格
  • 迴響(ECHOES) 12
  • 哼(HUMS) 20


XX:XX PM - X XXXX XXX (反正就填時間)



理論上你可以把表示轉推和喜歡的東西換個詞或是換顏色,還有把 ⁂ 換成 @ 就是別的社群網站了。


類 Reddit

嗯,其實是夢神中心頁的東西,不過那邊有個問題:有些 " 變成了 ” ,所以代碼實際的呈現會怪怪的,我有空去修。還有我有個魔法要玩:




除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License