整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eta（原 Facebook）開(kāi)源了全新的 CSS-in-JS 庫(kù) StyleX。
GitHub 地址：https://github.com/facebook/stylex
官方介紹道，StyleX 是一個(gè)富有表現(xiàn)力、具有確定性、可靠且可擴(kuò)展的樣式系統(tǒng)。它通過(guò)使用編譯時(shí) (compile-time) 工具融合了靜態(tài) CSS 的性能和可擴(kuò)展性。
此外，StyleX 不僅僅是一個(gè)基于編譯器的 CSS-in-JS 庫(kù)，它經(jīng)過(guò)精心設(shè)計(jì)，可以滿足大型應(yīng)用程序、可復(fù)用組件庫(kù)和靜態(tài)類型代碼庫(kù)的要求。Meta 旗下多款產(chǎn)品如 Facebook、WhatsApp、Instagram、Workplace、Threads 等都在使用 StyleX 作為其 CSS 樣式解決方案。
StyleX 主要特性
快速：StyleX 在編譯時(shí)和運(yùn)行時(shí)都具備高效的性能。Babel 轉(zhuǎn)換不會(huì)對(duì)構(gòu)建過(guò)程產(chǎn)生顯著影響。在運(yùn)行時(shí)，StyleX 避免了使用 JavaScript 插入樣式的開(kāi)銷，并僅在必要時(shí)高效地組合類名字符串。生成的 CSS 經(jīng)過(guò)優(yōu)化，確保即使是大型網(wǎng)站的樣式也能被瀏覽器快速解析。
可擴(kuò)展：StyleX 旨在適應(yīng)像 Meta 這樣的超大型代碼庫(kù)。通過(guò)原子構(gòu)建和文件級(jí)緩存，Babel 插件能夠處理數(shù)萬(wàn)個(gè)組件在編譯時(shí)的樣式處理。由于 StyleX 設(shè)計(jì)為封裝樣式，它允許在隔離環(huán)境中開(kāi)發(fā)新組件，并期望一旦在其他組件中使用時(shí)能夠可預(yù)測(cè)地呈現(xiàn)。
可預(yù)測(cè)性：StyleX 會(huì)自動(dòng)管理 CSS 選擇器的特異性，以確保生成的規(guī)則之間不會(huì)發(fā)生沖突。它為開(kāi)發(fā)人員提供了一個(gè)可靠地應(yīng)用樣式的系統(tǒng)，并確保 “最后應(yīng)用的樣式始終生效”。
類型安全：使用 TypeScript 或 Flow 類型來(lái)約束組件接受的樣式，每個(gè)樣式屬性和變量都具有完全的類型定義。這有助于提高代碼的可讀性和可維護(hù)性，同時(shí)減少潛在的錯(cuò)誤和沖突。
樣式去重：StyleX 鼓勵(lì)在同一文件中編寫(xiě)樣式和組件。這種方法有助于使樣式在長(zhǎng)期內(nèi)更具可讀性和可維護(hù)性。StyleX 能夠利用靜態(tài)分析和構(gòu)建時(shí)工具來(lái)跨組件去重樣式，并刪除未使用的樣式。
可測(cè)試性：StyleX 可以配置為輸出調(diào)試類名，而不是功能性的原子類名。這可以用于生成快照，以便在對(duì)設(shè)計(jì)進(jìn)行輕微更改時(shí)不會(huì)經(jīng)常變化。通過(guò)這種方式，開(kāi)發(fā)人員可以更輕松地測(cè)試和驗(yàn)證樣式的正確性，從而提高開(kāi)發(fā)效率和產(chǎn)品質(zhì)量。
示例代碼
import stylex from '@stylexjs/stylex';const styles = stylex.create({
root: {
padding: 10,
},
element: {
backgroundColor: 'red',
},});const styleProps = stylex.apply(styles.root, styles.element);下面是一個(gè)按鈕組件的示例代碼
：本文存在大量原文中的鏈接，如需訪問(wèn)，請(qǐng)選擇“閱讀原文”
才疏學(xué)淺，歡迎指正。標(biāo)*內(nèi)容為譯者增添，可略過(guò)。希望大家都能像寫(xiě) Markdown 一樣，輕松寫(xiě)出互動(dòng)小說(shuō)。個(gè)人建議：簡(jiǎn)單學(xué)習(xí)基礎(chǔ)部分，認(rèn)真看下“編織”部分，粗略看下高階部分。
原文 https://www.inklestudios.com/ink/web-tutorial
文稿 https://www.yuque.com/inky/pcke0w/gix3ga
特別感謝：Saryta 與 jaxyong
編寫(xiě)互動(dòng)小說(shuō)從未如此簡(jiǎn)單，因?yàn)槲覀冇泻芏嗫捎玫膭?chuàng)作工具。Twine 因其對(duì)用戶友好，用其可視化的"貼便箋與字符串"來(lái)規(guī)劃故事，因此在創(chuàng)作基于 Web 的互動(dòng)小說(shuō)中很受歡迎。
相比之下，INK 最初不是為 Web 設(shè)計(jì)的工具，它被設(shè)計(jì)成集成到傳統(tǒng)的游戲引擎中的插件。在 Inkle，我們幾乎把它用于我們所創(chuàng)造的一切，從 80 Days（最初為移動(dòng)端）到即將到來(lái)的 Heaven’s Vault 的 PS4與 PC 版。由于我們的開(kāi)源，它也被用于一系列受人矚目的獨(dú)立游戲，像 Bury Me My Love 和 Where the Water Tastes Like Wine，兩者都在2018年被 IGFs 提名。
但是用 INK 為 Web 寫(xiě)故事是很容易的！到目前為止，缺少的是一個(gè)簡(jiǎn)單的教程，提供了用 INK 寫(xiě)故事的方法，將其發(fā)布到網(wǎng)絡(luò)上并供人瀏覽基礎(chǔ)知識(shí)。
本教程假定你對(duì) INK 或 Web 技術(shù)的經(jīng)驗(yàn)知識(shí)為零，缺乏技術(shù)的作者能從這擁有入門所需的一切。但如果你希望深入了解某個(gè)主題，我們將在整個(gè)過(guò)程中隨時(shí)提供切入點(diǎn)。
下面是本教程大致的主體。隨意跳過(guò)或?yàn)g覽你已熟悉的任何主題：
上手 INK ：下載工具并編寫(xiě)一個(gè)簡(jiǎn)單的故事。
導(dǎo)出為 Web - 如何為你的故事創(chuàng)建可共享網(wǎng)頁(yè)。
可選：自定義頁(yè)面的外觀，包括 CSS 基礎(chǔ)知識(shí)的說(shuō)明。
發(fā)布到網(wǎng)頁(yè)*：上傳你的作品到供他人游玩的完美場(chǎng)所。
這有一個(gè) 官方文檔，告訴你關(guān)于 INK 所有需要知道的，從基礎(chǔ)知識(shí)到復(fù)雜強(qiáng)大的結(jié)構(gòu)。
但本指南將略過(guò)這些，指出其中最容易理解的功能，以便你能上手編寫(xiě)一個(gè)簡(jiǎn)單的故事。當(dāng)然，如果你想嘗試更高級(jí)的內(nèi)容，請(qǐng)隨時(shí)進(jìn)入官方文檔。
下載 Inky
我們將用 Inky 編寫(xiě)——用于創(chuàng)作 INK 腳本的官方編輯器。所以，請(qǐng)繼續(xù)前進(jìn)，并點(diǎn)擊這里下載它！支持 Widows、Mac、Linux（如果你習(xí)慣 VS code *，也有用于支持編輯 INK 的插件）。
啟動(dòng)它時(shí)，你將看到一個(gè)雙欄窗口。左側(cè)編寫(xiě)故事，右側(cè)可預(yù)覽故事的運(yùn)行。
首先要了解 INK，從本質(zhì)上講，它只是純文本，并帶有特殊的注釋（“標(biāo)記”）使其具有交互性。所以請(qǐng)繼續(xù)，在左側(cè)試著寫(xiě)一個(gè)句子，你會(huì)看到它出現(xiàn)在右邊的預(yù)覽區(qū)。也可以試著寫(xiě)多個(gè)段落看看。
重要*，寫(xiě)作時(shí)記得經(jīng)常保存項(xiàng)目（Save Project），以防發(fā)生意外造成不必要的損失。
現(xiàn)在，讓我們看門見(jiàn)山，來(lái)看一個(gè)簡(jiǎn)單的故事示例。
若你以前從未接觸過(guò)編程（很多符號(hào)！），下方截屏中的藍(lán)色標(biāo)記最初可能讓人望而生畏。但我們會(huì)逐步介紹它們，以便你了解它們的組合方式。
請(qǐng)將下方內(nèi)容復(fù)制到 Inky 的左欄中，然后在右欄中預(yù)覽。右上角的單箭頭是后退，雙箭頭是重置預(yù)覽的故事。
倫敦，1872年PhileasFogg先生的住所。-> london
===london===//這是節(jié)點(diǎn)PhileasFogg先生早早從改革俱樂(lè)部回到了家，并乘坐了新型的蒸汽運(yùn)輸機(jī)！
“領(lǐng)航,” 他喊到。"我們?nèi)キh(huán)游世界！"+ “環(huán)游世界，先生？”
我大吃一驚。
-> astonished
+ [點(diǎn)頭。] -> nod
===astonished===“你在開(kāi)玩笑！” 我認(rèn)真地對(duì)他說(shuō)。“你一定是在和我開(kāi)玩笑，先生。”
“我很認(rèn)真。”
+ “好吧。”
-> ending
===nod===我點(diǎn)了點(diǎn)頭，但不相信一個(gè)字。-> ending
===ending //這也是節(jié)點(diǎn)# CLASS: end“我們將在八十天內(nèi)環(huán)游地球。” 他很平靜地提出了這個(gè)近乎瘋狂地計(jì)劃“我們8:25去巴黎。一小時(shí)后。”->END
預(yù)覽時(shí)，調(diào)整左欄的內(nèi)容，右欄預(yù)覽也會(huì)實(shí)時(shí)更新，即使你正處于故事中。你甚至可以點(diǎn)擊右欄中的某個(gè)單詞，它會(huì)選中左欄中的源文本（當(dāng)故事變得非常復(fù)雜時(shí)，這非常有用！）。你也可以先看這個(gè)故事，用默認(rèn)模板發(fā)布到到網(wǎng)頁(yè)的效果，點(diǎn)我運(yùn)行體驗(yàn)。
學(xué)會(huì)注釋*
好記性不如爛筆頭。你可以在任何地方，用 // ，或 /* …… */ 幫你插入注釋，記住你想記住的東西，避免一覺(jué)醒來(lái)就忘記“這是什么東西”。注釋內(nèi)容不會(huì)在故事運(yùn)行時(shí)顯示給玩家，也不會(huì)影響周圍的其他內(nèi)容。
“你怎么看？” 她問(wèn)。
// 一行注釋 “我無(wú)法評(píng)論，”我答。
/* ……
或者一段注釋
*/
還有一種更強(qiáng)的注釋 TODO: ，幫你提醒要做什么。
TODO: 認(rèn)真寫(xiě)這一節(jié)！
在這個(gè)簡(jiǎn)單的故事中，你只需要簡(jiǎn)單的了解三個(gè)部分：結(jié)點(diǎn)、跳轉(zhuǎn)和選項(xiàng)。
故事是由多個(gè)相互鏈接的部分構(gòu)成的，在 INK 中我們稱其為結(jié)點(diǎn)（knots）。結(jié)點(diǎn)名稱的左側(cè)至少需要兩個(gè)等號(hào)（==）進(jìn)行標(biāo)記，右側(cè)的則是可選的（例如===london===）。Inky 中會(huì)用藍(lán)色突出顯示已識(shí)別的標(biāo)記，提示書(shū)寫(xiě)正確，并與其他內(nèi)容區(qū)分。結(jié)點(diǎn)標(biāo)記下面的內(nèi)容都屬于這個(gè)結(jié)點(diǎn)。
===london===//這是節(jié)點(diǎn) PhileasFogg先生早早從改革俱樂(lè)部回到了家，并乘坐了新型的蒸汽運(yùn)輸機(jī)！
“領(lǐng)航,” 他喊到。 “我們?nèi)キh(huán)游世界！”
現(xiàn)在談?wù)勬溄樱覀兎Q之為跳轉(zhuǎn)（divert）。-> london
使用跳轉(zhuǎn)箭頭（輸入"減"與"右尖括號(hào)"），告訴故事去另一個(gè)結(jié)點(diǎn)。運(yùn)行故事時(shí)，跳轉(zhuǎn)是自動(dòng)的且不會(huì)顯示給玩家。
因此，在故事的開(kāi)頭，顯示了介紹性段落之后，就有 -> london 的跳轉(zhuǎn)，可將玩家直接跳入該名稱的結(jié)點(diǎn)中。
倫敦，1872年PhileasFogg先生的住所。-> london //這是跳轉(zhuǎn)===london===//這是節(jié)點(diǎn)PhileasFogg先生早早從改革俱樂(lè)部回到了家，并乘坐了新型的蒸汽運(yùn)輸機(jī)！
“領(lǐng)航，” 他喊到。 “我們?nèi)キh(huán)游世界！”
特殊：END
這個(gè)故事的結(jié)尾，還有一種特殊的跳轉(zhuǎn)。如果你跳轉(zhuǎn)到“ END”，會(huì)告訴 INK 我們完成了，這里是結(jié)局。
===ending //這也是節(jié)點(diǎn) 開(kāi)始
“我們將在八十天內(nèi)環(huán)游地球。” 他很平靜地提出了這個(gè)近乎瘋狂地計(jì)劃“我們8:25去巴黎。一小時(shí)后。”
->END//特殊的跳轉(zhuǎn) 結(jié)局
試著刪除例子中該有的 -> END ，Inky 將在邊緣顯示錯(cuò)誤。若將鼠標(biāo)懸停在警告上，會(huì)提示你“l(fā)oose end”。
這是 Inky 的一個(gè)重要的幫助功能，當(dāng)你故事越來(lái)越復(fù)雜時(shí)，這些警告可提醒你仍要編寫(xiě)哪些部分。
膠水* glue
如必須讓內(nèi)容在同一行顯示，還可以使用膠水（glue） <> 將其強(qiáng)制黏在同一行。
我們回家<>
-> to_savile_row
===to_savile_row===去薩維爾街<>-> as_fast_as_we_could
===as_fast_as_we_could===盡可能的快
你會(huì)在預(yù)覽看到 我們回家去薩維爾街盡可能的快 ，而非分三行顯示。
談到分歧，為了使互動(dòng)小說(shuō)更有趣，我們需要的最后一個(gè)關(guān)鍵功能當(dāng)然是選項(xiàng)（choices）：
+ “環(huán)游世界，先生？”
選項(xiàng)看起來(lái)是 INK 中最重要的元素。通常它們會(huì)與跳轉(zhuǎn)直接結(jié)合在一起，以便能創(chuàng)造一個(gè)直接跳轉(zhuǎn)到故事其他地方的選項(xiàng)。
+ [點(diǎn)頭。] -> nod
我們編寫(xiě)這些內(nèi)容時(shí)，需要注意幾件事：
通常，你輸入的選項(xiàng)內(nèi)容既會(huì)成為可點(diǎn)擊的選項(xiàng)，也會(huì)成為你點(diǎn)擊后出現(xiàn)的文本的一部分。但是，如果你想要一個(gè)“無(wú)聲的”（如動(dòng)作）選項(xiàng)，則可以將選項(xiàng)放在[方括號(hào)中]，如上方第二個(gè)示例所示。
這可以用于某些形式，像是不同的敘述風(fēng)格。例如：
+ [草率的點(diǎn)頭] -> nod
+ 我草率的點(diǎn)了點(diǎn)頭， -> nod
==nod==這有些不可思議。
你還可以在選項(xiàng)下添加額外的文本行。這將在選擇后顯示。例如：
+ “環(huán)游世界，先生？”
我大吃一驚。
“你在開(kāi)玩笑！” 我認(rèn)真地對(duì)他說(shuō)。“你一定是在和我開(kāi)玩笑，先生。”
-> astonished
===astonished===略……
等同于——
+ “環(huán)游世界，先生？” -> astonished
===astonished===我大吃一驚。“你在開(kāi)玩笑！” 我認(rèn)真地對(duì)他說(shuō)。“你一定是在和我開(kāi)玩笑，先生。”
略……
INK 是非常靈活的，它可以讓你有很多不同的方式來(lái)構(gòu)建你的故事。
事實(shí)上*，] 之前的部分會(huì)被顯示為選項(xiàng)， 內(nèi)的內(nèi)容會(huì)在選擇后隱藏。你也可以把 當(dāng)作選項(xiàng)與選擇之后內(nèi)容的分隔符，便于快速輸入，這些內(nèi)容會(huì)顯示在同一行。
+ 我草率的點(diǎn)了點(diǎn)頭，這有些不可思議。
小技巧，你也可以試試 “就是死我也不會(huì)吃的[！”]……真香！” ，體驗(yàn)下選擇前后的語(yǔ)氣變化，這種細(xì)節(jié)在某些敘事風(fēng)格種很有用。
一次性選項(xiàng)*
如想要選項(xiàng)只能被被玩家點(diǎn)一次，最簡(jiǎn)單的方式就是把選項(xiàng)的 + 改成 * 。
* “環(huán)游世界，先生？”
舉個(gè)例子，你會(huì)發(fā)現(xiàn)下圖中的一次性選項(xiàng)“2 Hello back!”不見(jiàn)了。
->hello
==hello
Helloworld!+1Helloback! //普通選項(xiàng)
Niceto hearfromyou! ->hello
*2Helloback!//一次性選項(xiàng)
Niceto hearfromyou! ->hello
+3Helloback!
Niceto hearfromyou! ->hello
結(jié)構(gòu)說(shuō)明
關(guān)于 INK 整體結(jié)構(gòu)最后的說(shuō)明：INK 始終從文件的頂部開(kāi)始，然后一直向下運(yùn)行。但如果你將所有內(nèi)容拆分為結(jié)點(diǎn)，則務(wù)必確保在文件頂部至少有一個(gè)初始跳轉(zhuǎn)（如-> top_knot），以告訴它以哪個(gè)結(jié)點(diǎn)開(kāi)始（修改初始跳轉(zhuǎn)，可更方便的進(jìn)行測(cè)試）。
-> top_knot //初始跳轉(zhuǎn)===top_knot===Helloworld!->END
現(xiàn)在，為什么不嘗試?yán)m(xù)寫(xiě)個(gè)故事呢？嘗試插入更多的結(jié)點(diǎn)，更多的跳轉(zhuǎn)，更多的選項(xiàng)，更多的結(jié)局，看看會(huì)發(fā)生什么！作為練習(xí)的開(kāi)始，也許先試著把介紹性段落變成你的結(jié)點(diǎn)？
到目前為止，我們編寫(xiě)的所有內(nèi)容，都能寫(xiě)成可發(fā)布的互動(dòng)小說(shuō)。但如果我們想根據(jù)玩家之前的經(jīng)歷不同，顯示不同的文本和選項(xiàng)呢？
INK 會(huì)記錄運(yùn)行中玩家經(jīng)歷的每個(gè)內(nèi)容，以便你今后查詢。例如，要確定玩家是否經(jīng)過(guò)了稱為（地下墓穴）的特定結(jié)點(diǎn) catacombs：
{ catacombs: //條件：經(jīng)過(guò)地下墓穴
這里比巴黎的地下墓穴還要暗。}在這個(gè){大括號(hào)中} ，你可以包含多行內(nèi)容，甚至是跳轉(zhuǎn)和選項(xiàng)（只有玩家經(jīng)過(guò)了“catacombs”這個(gè)結(jié)點(diǎn)，大括號(hào)里的內(nèi)容才會(huì)被顯示）。
但是，一個(gè)更簡(jiǎn)潔的編寫(xiě)條件選項(xiàng)的方法如下，僅當(dāng)玩家經(jīng)過(guò)某個(gè)結(jié)點(diǎn)后才顯示特定選項(xiàng)的方法：
+ {catacombs} [告訴她你的發(fā)現(xiàn)] -> tell_her如果你想反轉(zhuǎn)這個(gè)條件，換句話說(shuō)，如果你想確認(rèn)玩家沒(méi)有經(jīng)過(guò)地下墓穴，你只需在前面簡(jiǎn)單地加上：not
+ {notcatacombs} [前往地下墓穴] -> catacombs最后，你可用 and 和 or 形成更復(fù)雜的判定條件，并且用小括號(hào)來(lái)闡明邏輯的細(xì)節(jié)。幾個(gè)例子：
{ catacombs andnotpick_up_ring: //條件：經(jīng)過(guò)地下墓穴且沒(méi)經(jīng)過(guò)撿起戒指
“所以你之后沒(méi)找到它？”她質(zhì)問(wèn)到。
+ [抱歉] -> apologise
}{ (catacombsorcross_riverorsing_in_rain)andnotbuy_new_shoes:
//條件：（經(jīng)過(guò)地下墓穴或穿過(guò)河或在雨中唱歌）且沒(méi)經(jīng)過(guò)買新鞋
那天我的鞋子早就爛了。}再看個(gè)例子*，你能發(fā)現(xiàn)選“白色的”雖然和灰色的后面走的是一樣的結(jié)點(diǎn)，但顯示的內(nèi)容變多了。
你想買什么顏色的狼？+ 白色的…… -> white
+ 灰色的…… -> gray
==white
讓我找找看。-> gray
==gray
{ white:白色的狼賣沒(méi)了。 }要買灰色的狼嗎?+ {white}我一定要白色的狼->wolf
+ 好的，買灰色的狼->wolf
==wolf
……略->END
我們只介紹了 INK 中強(qiáng)大功能的一小部分。如你想閱讀更多或只是深入了解已經(jīng)看到的東西，看看官方文檔：
與任何編程語(yǔ)言一樣，你可以創(chuàng)建自定義變量并執(zhí)行數(shù)學(xué)計(jì)算。
我們一直在使用+作為選項(xiàng)符號(hào)，但通常我們建議使用*。區(qū)別在于，*選項(xiàng)只能選擇一次，非常適合需要重復(fù)瀏覽，但你不希望重復(fù)選擇的選項(xiàng)。
一個(gè)有點(diǎn)難學(xué)但易于編寫(xiě)的系統(tǒng)，稱為“編織（weave）”，用于編寫(xiě)復(fù)雜分支，不需要你自己命名每個(gè)部分。我們的大多數(shù)游戲像 80 天，都是用這種系統(tǒng)編寫(xiě)的。
在結(jié)點(diǎn)中，你還可以包含稱為“針腳（stitches）”的子結(jié)點(diǎn)。
寫(xiě)不同的內(nèi)容和分支的中間內(nèi)容是可能的，也是直截了當(dāng)?shù)模ǎ浚?/p>
你可將 INK 文件拆分為多個(gè)連在一起的較小文件。
……
到這里為止，你已經(jīng)掌握了 Inky 書(shū)寫(xiě)故事最最基礎(chǔ)的語(yǔ)法。現(xiàn)在試著考驗(yàn)下自己：寫(xiě)一段游戲中常見(jiàn)的“詢問(wèn) NPC”劇情。基礎(chǔ)要求至少有三個(gè)可以問(wèn) NPC 的選項(xiàng)，且可以問(wèn)完所有問(wèn)題。進(jìn)一步要求，玩家至少問(wèn)一個(gè)問(wèn)題后才能繼續(xù)劇情，玩家問(wèn)完所有問(wèn)題后會(huì)直接繼續(xù)劇情……
是不是覺(jué)得有些難（或麻煩）呢？這也是為什么會(huì)有高階 INK 的原因。強(qiáng)烈建議你讀一下“編織”，這個(gè)問(wèn)題的答案就在編織那塊的底部。你會(huì)發(fā)現(xiàn)，INK 應(yīng)對(duì)這種內(nèi)容其實(shí)游刃有余，或者說(shuō) INK 就是為寫(xiě)這種故事而生的，簡(jiǎn)單而流暢。事實(shí)也是如此，大部分 INK 的故事都是用編織寫(xiě)主要部分的，而非最基礎(chǔ)的語(yǔ)法。
下一步是將我們的故事保存到一組文件中，這些文件可以作為網(wǎng)頁(yè)上傳到網(wǎng)上。要在 Inky 中執(zhí)行此操作，請(qǐng)選擇“File”，然后選擇“Export for web…”，然后選下故事的名稱。你選擇的名稱將同時(shí)用于網(wǎng)頁(yè)上的標(biāo)題（因此，請(qǐng)適當(dāng)?shù)挠每崭窈痛髮?xiě)字母），以及保存到的文件夾的名稱。
當(dāng)你對(duì)故事進(jìn)行更改后，尤其是你對(duì)外觀更改后（參見(jiàn)下文），你應(yīng)該選擇“Export story.js only...”，將其保存到相同的位置并覆蓋“ 故事名字.js”。這是更新 INK 內(nèi)容后唯一需要更新的文件，其余的文件都只是 Web 模板的一部分。因此，若你更改了模板的外觀，這樣就不會(huì)意外覆蓋。
至此，你已經(jīng)完成了！如果愿意，你可以直接跳到“發(fā)布到網(wǎng)頁(yè)”的步驟。
但是，如果你還想添加圖像，修改外觀，請(qǐng)繼續(xù)閱讀！
INK 被設(shè)計(jì)成盡可能的專注于一項(xiàng)任務(wù)：編寫(xiě)交互式文本。為了在功能性、靈活性和簡(jiǎn)潔性保持良好的平衡，我們抵制了可能使語(yǔ)言超載的額外功能。
因此，INK 語(yǔ)言中沒(méi)有用于插入圖像之類的任何內(nèi)置工具，這完全取決于你創(chuàng)造的故事類型。如你正在為3D 游戲編寫(xiě)對(duì)話，那么指定要顯示的圖像則不一定有意義。
但是，Inky 確實(shí)提供了一些額外的功能，這些功能可在導(dǎo)出 Web 后可用（自0.10.0版本開(kāi)始）。這些額外功能都用的是 INK 的標(biāo)簽系統(tǒng)，它允許你為每個(gè)行提供特殊的文本注釋，在行的開(kāi)頭或上方。標(biāo)簽是玩家不可見(jiàn)的，但可以由系統(tǒng)或 Web 模板讀取。
插入圖片的方法如下（圖片會(huì)在導(dǎo)出 web 后顯示）：
# IMAGE: imageName.jpg
圖像文件應(yīng)與其他文件位于同一文件夾中，或者如果需要，可以使用相對(duì)路徑：
# IMAGE: myImages/imageName.jpg
你也可以在行尾添加圖片標(biāo)簽。該圖像將始終顯示在游戲文本上方。
Theabove pictureisa dog. # IMAGE: wolf.jpg
（因?yàn)樗袠?biāo)記都與特定的文本行相關(guān)聯(lián)，且當(dāng)單獨(dú)在某行放個(gè)標(biāo)記時(shí)，它將與其下方的文本行關(guān)聯(lián)。）
Inky 的 Web 模板另一個(gè)特有功能是 clear 標(biāo)簽：# CLEAR
這將清空當(dāng)前顯示的所有文本，從頁(yè)面頂部重新開(kāi)始。建議僅在選項(xiàng)后直接插入！如果插入到文本中間，則部分內(nèi)容將在看到之前就被清除。
要用深色主題，只需將其放在 INK 文件的最頂部：# theme: dark
Web 模板能夠讀取它作為一個(gè)全局標(biāo)簽，并內(nèi)置了樣式來(lái)改變主題（它使用"dark"作為整個(gè)頁(yè)面的類。當(dāng)你在 CSS 文件中看到 .dark 選擇器的使用時(shí)，這些是深色主題的重寫(xiě)。）
要設(shè)置作者姓名，請(qǐng)將其放在 INK 文件的頂部：# author: 你的名字
這將用到 Inky 的 Web 模板種，并位于主標(biāo)題的正下方。
你還可以使用 CSS 類完全自定義各行文本的外觀。在 INK 中，如下添加標(biāo)簽到文本行里：
你進(jìn)入了森林。地上有一灘血。 # CLASS: danger
然后，可以通過(guò)向你的 style.css 文件中添加以下內(nèi)容，來(lái)告訴瀏覽器“danger”CSS 類的外觀：
.danger {
color: red;}示例：END
如要以居中粗體顯示結(jié)尾的“全劇終”，可用 Inky 模板包含的 end 的內(nèi)置樣式：
# CLASS: end全劇終-> END
回顧下：
中間一行是文本本身。
第一行將 CSS 類"end"應(yīng)用于文本。
最后一行告訴 INK ，我們完成了，這不是一個(gè)“l(fā)oose end”。
要調(diào)整 end CSS 類的樣式，請(qǐng)?jiān)?CSS 文件底部查找 .end 。
Inky 的 Web 模板還具有一個(gè)內(nèi)置功能，如果插入 # RESTART 標(biāo)簽，它將立即重置故事的進(jìn)度（包括玩家選擇的所有經(jīng)歷和變量），并從頭開(kāi)始。由于它會(huì)立刻生效，建議你放在一個(gè)選項(xiàng)后，例如：
你死啦！+ 從頭來(lái)過(guò)。
# RESTART
->END
本指南面向初學(xué)者 ，假定他對(duì) Web 技術(shù)一無(wú)所知。
文件結(jié)構(gòu)
上面的導(dǎo)出步驟應(yīng)已保存出包含以下文件的文件夾（分享故事請(qǐng)分享整個(gè)文件夾）：
index.html - HTML 文件將其他文件綁定在一起，如你想運(yùn)行你的故事，雙擊該文件。它告訴瀏覽器頁(yè)面的結(jié)構(gòu)，并告訴它加載其他文件。
main.js - 這是主要的 JavaScript 文件，你可在其中自定義故事的呈現(xiàn)方式。
style.css - 這是主要的 CSS 文件，它定義諸如顏色、字體以及大小調(diào)整和間距信息（如段落的寬度和邊距）之類的內(nèi)容。我們還可以定義過(guò)渡，例如段落淡入的方式。
故事名字.js - 這是你 INK 的實(shí)際內(nèi)容，由 Inky 導(dǎo)出。這是你故事的唯一文件，而非 Inky 保存的通用模板的一部分。請(qǐng)勿直接編輯此文件。
ink.js - 這是 INK 引擎本身的 JavaScript 端口。
要修改任何文件，應(yīng)在純文本編輯器中打開(kāi)，如 VS Code 而非 Word！
更改字體和顏色
字體和顏色均由 CSS 文件 style.css 控制。如果打開(kāi)文件，你將看到一系列類似下面的塊：
body {
font-family:'Open Sans', sans-serif;
font-weight: lighter;
background: white;}每個(gè)名稱都以“ body”或“ h1”之類的名稱開(kāi)頭。在 CSS 中，這稱為選擇器，因?yàn)樗x擇網(wǎng)頁(yè)的特定部分進(jìn)行樣式設(shè)置。在上述情況下，它選擇正文，實(shí)際上是整個(gè)頁(yè)面。
字體列表 font-family 按優(yōu)先順序排列，這取決于用戶計(jì)算機(jī)上的可用內(nèi)容。在上面的示例中，Open Sans 是一種網(wǎng)絡(luò)字體，是在文件頂部導(dǎo)入的，只需訪問(wèn) fonts.google.com 進(jìn)行選擇即可選擇，并說(shuō)明如何使用它們（它為你提供了幾個(gè)@import，你可以自己粘貼）。如由于某些原因無(wú)法下載該字體，它將退回到 sans-serif 選項(xiàng)。
你還可以使用用戶系統(tǒng)中自帶的字體，但是問(wèn)題是，一定都有的字體 非常有限。因此通常字體最后都會(huì)寫(xiě)上 sans-serif。
強(qiáng)烈建議*前往 W3C School，花些時(shí)間簡(jiǎn)單的自學(xué)下 CSS 教程，再看下方陰影部分更容易上手。
文件中的一些 CSS 選擇器和規(guī)則包括：
h1-代表“一級(jí)標(biāo)題”-即最大的標(biāo)題，用于頁(yè)面頂部故事的主要標(biāo)題。如果要更改標(biāo)題的大小，可在 font-size 更改屬性。同樣，這 h1, h2是一次可同時(shí)在兩個(gè)選擇器上設(shè)置規(guī)則的快捷方式，即一級(jí)二級(jí)標(biāo)題。如果# author: 你的名字 在 INK 頂部有標(biāo)簽，則后者用于副標(biāo)題。
.header-以點(diǎn)開(kāi)頭的名稱是類名稱。這個(gè)特定的示例選擇一個(gè)元素，該元素只是 title 和 byline 的容器。通常，在 HTML/CSS 中，元素被賦予容器來(lái)幫助構(gòu)建或?qū)﹂g距和布局進(jìn)行精細(xì)控制。
p-這代表“段落”。它是頁(yè)面上主體文本的選擇器。因此，這是你要更改字體大小，文本顏色等的地方。
a-這代表錨標(biāo)記，錨標(biāo)記是可點(diǎn)擊鏈接的 HTML 術(shù)語(yǔ)-這些標(biāo)記僅在我們的頁(yè)面上用于可點(diǎn)擊的選擇，但也可以是任何東西。
p.choice-“具有'choice'類的段落”。如果只是.choice，那就意味著“任何選項(xiàng)類”。我們頁(yè)面上的選擇實(shí)際上是按特殊樣式設(shè)計(jì)的段落，其中包含可單擊的鏈接（錨標(biāo)記）。
a:hover-這里:hover 稱為偽類，它用于當(dāng)用戶的鼠標(biāo)指針懸停該元素上時(shí)選擇一個(gè)元素。
CSS 根據(jù)優(yōu)先級(jí)應(yīng)用樣式，優(yōu)先級(jí)基于選擇器的具體程度（更具體的是更高的優(yōu)先級(jí)）和文件中的位置（更低的是較高優(yōu)先級(jí)）。這使你可以首先使用粗筆畫(huà)定義樣式，然后逐步覆蓋它們。例如，我們 h2先定義，然后下移.dark h2覆蓋 h2樣式的一部分：當(dāng)深色主題處于活動(dòng)狀態(tài)（.dark 類分配給整個(gè)頁(yè)面-）時(shí)，我們更改顏色。
有關(guān)可以單獨(dú)使用 CSS 更改樣式的所有其他方式的更多信息，請(qǐng)嘗試使用搜索“ CSS 教程”，那里有大量的資源！
例子：花哨標(biāo)題
在 Google 字體 上選擇字體，然后插入 CSS 文件頂部的行，例如：@import
@importurl('https://fonts.googleapis.com/css?family=Lobster');然后，將規(guī)則更改為類似的：
h1 {
font-family:'Lobster', cursive;
font-size:80pt;
text-align: center;}原文此部分介紹的是發(fā)布到 itch.io ，但好消息是，你幾乎可以把 Inky 導(dǎo)出的 Web 托管到任何可以放靜態(tài)網(wǎng)頁(yè)的地方，如 netlify(或 ZIET)，github page，coding…… 和你的服務(wù)器上。
Netlify*
注冊(cè) netlify ；
將你的故事文件夾拖動(dòng)到“Want to deploy a new site without connecting to Git?Drag and drop your site folder here”的框里。顯示綠色的發(fā)布網(wǎng)址后，即發(fā)布成功，點(diǎn)擊網(wǎng)址訪問(wèn)你的故事。
點(diǎn)擊 Domain Setting ，可修改你故事的網(wǎng)址。
如需更新故事，選擇 Depolys ，將更新后的文件夾拖入框里即可。（事實(shí)上，你一開(kāi)始也可以通過(guò)連接 Github，完成全自動(dòng)的更新發(fā)布，這里不再贅述了。)
看一下我們剛發(fā)布的example 。
App*
將網(wǎng)頁(yè)打包成安裝包是件很容易的事。
你可嘗試用 HBuilderX 創(chuàng)建“5+App”項(xiàng)目進(jìn)行云打包，這里不再贅述了。
另一種思路，也可以選擇創(chuàng)建“Wap2App”項(xiàng)目，將托管的網(wǎng)頁(yè)設(shè)成“wap 站首頁(yè)地址”，更新與打包更容易些。
評(píng)論系統(tǒng)*
為網(wǎng)頁(yè)插入評(píng)論系統(tǒng)里是容易的，同理為 Inky 生成的網(wǎng)頁(yè)插入評(píng)論系統(tǒng)也是容易的。
這里有一個(gè)將 Gitlak 評(píng)論系統(tǒng)插入的 例子，點(diǎn)我運(yùn)行體驗(yàn)。
當(dāng)然如果你愿意，甚至還能插入 DaoVoice 這樣的客服系統(tǒng)。
統(tǒng)計(jì)代碼*
想知道有多少人玩，最簡(jiǎn)單的方式就是插入統(tǒng)計(jì)代碼。方法和插入到網(wǎng)頁(yè)一樣，這里不再贅述了。
itch.io
你已經(jīng)完成了你的杰作！是時(shí)候與世界分享它了。
你可以選擇將文件上傳到允許你托管網(wǎng)頁(yè)的任何地方，但我們建議 itch.io，因?yàn)樗且粋€(gè)擁有獨(dú)立游戲開(kāi)發(fā)者的偉大社區(qū)，它是少數(shù)幾個(gè)允許你上傳純 Web 內(nèi)容的地方之一，最重要的是，它是免費(fèi)的！如果你愿意，你甚至可以選擇出售你的內(nèi)容。
itch.io 還允許你上傳游戲內(nèi)容為私有草稿，以便在發(fā)布之前測(cè)試該過(guò)程。
最后，Inkjam 是從 itch.io 托管的，如果你已經(jīng)將游戲上傳到平臺(tái)上，就可以輕松加入。
首先，如果你尚未 注冊(cè)帳戶，請(qǐng)?jiān)诖颂幾?cè)。然后：
從 儀表板 中選擇"創(chuàng)建新項(xiàng)目"。
輸入游戲/故事的詳細(xì)信息，確保為項(xiàng)目類型選擇"HTML"。
壓縮從 inky 導(dǎo)出的所有文件并上傳它們。
選擇"此文件將在瀏覽器中播放"。
嵌入：我們建議你嘗試此設(shè)置，以查看你喜歡的內(nèi)容。
大小：我們建議 800 x 600 更適合閱讀文本，而不是默認(rèn)大小。對(duì)于移動(dòng)設(shè)備來(lái)說(shuō)，它仍然會(huì)縮小。
移動(dòng)友好：是
自動(dòng)啟動(dòng)：我們建議你試試它，并決定你喜歡什么。
全屏按鈕：我們建議是的，但由你決定。
啟用滾動(dòng)條：由于模板內(nèi)置了滾動(dòng)，因此沒(méi)有必要這樣做。
你可在“查看和訪問(wèn)”下選擇“草稿”，預(yù)覽你的游戲。一旦你準(zhǔn)備好把游戲發(fā)布，只需選擇“公共”。
現(xiàn)代社會(huì)，網(wǎng)頁(yè)已經(jīng)成為企業(yè)、個(gè)人展示和宣傳的重要窗口，因此掌握網(wǎng)頁(yè)制作技能是非常有必要的。今天，我們將為大家介紹8款優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)模板網(wǎng)站，哪怕是小白也能幫助你快速搭建出令人驚艷的網(wǎng)頁(yè)。
即時(shí)設(shè)計(jì)是一款支持在線協(xié)作的專業(yè)級(jí) UI 設(shè)計(jì)工具，用戶數(shù)已突破230萬(wàn)，支持 Sketch、Figma、XD 格式導(dǎo)入，無(wú)需下載，在線使用。10000+精選設(shè)計(jì)資源、100+提效插件即拿即用；支持創(chuàng)建交互原型、獲取設(shè)計(jì)標(biāo)注，為產(chǎn)設(shè)研團(tuán)隊(duì)提供一站式協(xié)同辦公體驗(yàn)，一個(gè)鏈接即可完成交付，內(nèi)容修改實(shí)時(shí)同步。
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)：
優(yōu)點(diǎn)：
17素材網(wǎng)主要收集jQuery網(wǎng)頁(yè)特效、jQuery網(wǎng)頁(yè)代碼、網(wǎng)站模板、網(wǎng)頁(yè)模板、企業(yè)模板、商城模板、圖標(biāo)等素材，為html網(wǎng)站模板開(kāi)發(fā)人員提供高效率的工作方式。
部分素材需要積分才能下載。
jQuery插件庫(kù)是一組由開(kāi)發(fā)者編寫(xiě)的、可重復(fù)使用的jQuery插件集合，為Web開(kāi)發(fā)人員提供了多種常用功能的封裝。這些插件可以快速實(shí)現(xiàn)諸如表單驗(yàn)證、圖片輪播、下拉菜單、模態(tài)框等功能，使得Web開(kāi)發(fā)人員能夠更快地完成開(kāi)發(fā)任務(wù)，減少代碼重復(fù)性工作。
它快速、輕量并且簡(jiǎn)化了我們?yōu)g覽 HTML 文檔和操作頁(yè)面元素的方式。因?yàn)樗€具有高度可擴(kuò)展性，所以在框架之上構(gòu)建了許多jQuery 插件來(lái)為網(wǎng)站添加功能。從 UI 組件和元素到布局和網(wǎng)格，有一個(gè)jQuery 插件可以滿足您網(wǎng)站所需的幾乎所有功能。
詳情頁(yè)還可以查看詳細(xì)代碼。
凡科建站提供自助建站、做網(wǎng)站、快速建站等營(yíng)銷推廣服務(wù)，凡科建站平臺(tái)提供網(wǎng)站模板資源，擁有2000萬(wàn)+流量入口，精選優(yōu)質(zhì)服務(wù)商，7*8在線服務(wù)；四大搜索覆蓋，快速上線，全網(wǎng)曝光，助力商家完成營(yíng)銷目標(biāo)。
網(wǎng)站模板圖片素材定期更新，簡(jiǎn)單易操作，小白也會(huì)使用；而且擁有SEO框架布局，首頁(yè)、欄目產(chǎn)品及文章頁(yè)均可獨(dú)立設(shè)置標(biāo)題/關(guān)鍵詞/描述；后臺(tái)直接修改聯(lián)系方式、傳真、郵箱、地址等，修改更加方便；同一個(gè)后臺(tái)管理，四網(wǎng)合一，用戶體驗(yàn)好！
優(yōu)點(diǎn)：
網(wǎng)站模板庫(kù)提供大量精選高質(zhì)量并永久免費(fèi)的(網(wǎng)站模版、網(wǎng)頁(yè)模板、手機(jī)模板、企業(yè)網(wǎng)站模板、網(wǎng)站模版)，包括html模板、后臺(tái)管理模板、博客模板及各行業(yè)類型等上千種模版。
模板素材眾多。
優(yōu)點(diǎn)：
提供海量精美免費(fèi)網(wǎng)站模板、企業(yè)網(wǎng)站模板、html模板網(wǎng)站、公司網(wǎng)站模板、手機(jī)網(wǎng)站模板、自適應(yīng)網(wǎng)站模板等免下載使用。
該網(wǎng)站收集了大量?jī)?yōu)質(zhì)網(wǎng)站設(shè)計(jì)作品，適用于多個(gè)專業(yè)的 WordPress 主題模板、HTML5模板、CSS Menu等實(shí)用資源。
特色：
AB模板網(wǎng)專注企業(yè)網(wǎng)站模板制作，包括企業(yè)pbootcms網(wǎng)站模板，靜態(tài)網(wǎng)頁(yè)模板，網(wǎng)站源碼下載，HTML網(wǎng)站模板等等。
這個(gè)網(wǎng)站專門提供織夢(mèng)的網(wǎng)頁(yè)模板，性質(zhì)和上面一樣，也是上傳到服務(wù)器上。
特點(diǎn)：
織夢(mèng)貓是一個(gè)網(wǎng)站模板分享交流平臺(tái)，網(wǎng)站以織夢(mèng)模板、建站資訊、織夢(mèng)教程為主要內(nèi)容，以“共享創(chuàng)造價(jià)值”為理念，以“尊重原創(chuàng)”為準(zhǔn)則。滿足用戶不同的網(wǎng)站模板需求。
同樣也提供dedecms的網(wǎng)頁(yè)模板。
模板安裝方法：
1）進(jìn)入dede后臺(tái)，找到“系統(tǒng)”-“數(shù)據(jù)庫(kù)備份/還原”
2）在屏幕右上角點(diǎn)擊“數(shù)據(jù)還原”
3）點(diǎn)擊屏幕下方的'開(kāi)始還原'按鈕
1）點(diǎn)擊“系統(tǒng)”---系統(tǒng)基本參數(shù)
2）將“站點(diǎn)根網(wǎng)址”改為您的網(wǎng)址，如http://www.xxx.com/（本地安裝請(qǐng)保持http://127.0.0.1。）
3）點(diǎn)擊“確定”按鈕
這些網(wǎng)頁(yè)模板網(wǎng)站提供了多樣化的選擇，從專業(yè)的商業(yè)網(wǎng)站到個(gè)人博客，從免費(fèi)的模板到付費(fèi)的高級(jí)模板，滿足了不同用戶的需求。無(wú)論您是有設(shè)計(jì)經(jīng)驗(yàn)的專業(yè)人士還是初學(xué)者，這些網(wǎng)站都能幫助您快速搭建一個(gè)具有吸引力和功能性的網(wǎng)站。
如果你還有更好的方式或工具推薦，記得在評(píng)論區(qū)互動(dòng)討論！
分享6款免費(fèi)項(xiàng)目管理工具，讓你的工作效率暴增！
想提高工作效率？快來(lái)看看這6個(gè)辦公神器！
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
