Custom Landing Page
3 นาที
คุณสามารถตั้งค่า html แบบกำหนดเอง เพื่อให้โหลดแทนเอกสารแรก ซึ่งเป็นตัวเลือกเริ่มต้นเมื่อไซต์เอกสารถูกโหลด ในการเปลี่ยนตัวเลือกหน้าแลนดิ้ง ให้ทำตามขั้นตอนต่อไปนี้ คลิกที่ space ที่คุณต้องการเพิ่มหน้าแลนดิ้ง html แบบกำหนดเอง มองหาไอคอนรูปเฟือง settings ( ⚙️ ) แล้วคลิก ในหน้าต่าง space settings ไปที่แท็บ landing page เลือก custom html เพิ่ม โค้ด html ของคุณในช่อง landing page html และกด save โปรดจำไว้ว่านี่คือไฟล์ index html ของคุณ custom html รองรับ handlebars https //handlebarsjs com/ และ tailwind https //tailwindcss com/ คุณสามารถแทรกตัวแปรบางอย่างในแม่แบบ html ได้ นี่คือตัวออบเจกต์ที่เราส่งไปยังเทมเพลต; คุณสามารถเรนเดอร์ตัวแปรใดๆ เหล่านี้ได้ first level variables export interface publicdocspaceresponse { id string name string icon string publiclogourl string darkpubliclogourl string publictheme 'light' | 'dark' | 'auto' contentlayout 'one column' | 'two column' isindexable boolean template 'booklet' | 'stripe' | 'widget' faviconurl string landingpageheadertext string landingpagesubheadertext string landingtemplate? string footertemplate? string headerincludes? string jwtredirecturl? string hostingtitle string showreadtime boolean showlastupdate boolean showcontributors boolean showdocfeedback boolean logoredirecturl string hostingcolor string darkhostingcolor string hostname string hostnamepath string proxydomain string isarchbeebrandvisible boolean i18nlanguage string isauthenticated boolean showpdfbooklink boolean pdfbooklink? string createdat string spacelinks publicspacelink\[] externallinks publicexternallink\[] versionlinks publicversionlink\[] publicdocstree publicdoctreeresponse\[] } prop interfaces export interface publicdoctreeresponse { id string name string icon string urlkey string expanded? boolean iscategory? boolean categoryname? string islink? boolean linktitle? string linkhref? string linkopensinnewtab? boolean parentdocid? string rightdoc? publicdoctreeresponse leftdoc? publicdoctreeresponse children publicdoctreeresponse\[] } export type publicspacelink = { label string docspaceid string icon? string versionlinks? publicversionlink\[] hasversionswithoutlinks? boolean } export type publicversionlink = { label string docspaceid string forkedfrom string language string versionlinks? publicversionlink\[] } export type publicexternallink = { label string url string } นี่คือตัวอย่าง html สำหรับการเรนเดอร์ html แบบกำหนดเองในหน้าแลนดิ้ง publiclogourl props example id {{ id }} name {{ name }} icon {{{ rendericon icon }}} public docs tree {{#each publicdocstree}} name {{name}} {{#if children}} {{#each children}} name {{name}} {{/each}} {{/if}} {{/each}} สำหรับโครงสร้างแบบนี้และโลโก้ที่อัปโหลด คุณควรจะเห็นสิ่งที่คล้ายกับนี้ พร้อมด้วยโค้ดด้านบน ฟังก์ชันกำหนดเองสำหรับการเปิดใช้งานการค้นหา บนหน้าแลนดิ้งแบบกำหนดเอง คุณสามารถสร้างช่องค้นหาของคุณเองได้ แต่คุณก็ต้องมีวิธีในการแสดงโมดัลการค้นหาด้วย — เรามีให้คุณแล้ว บน `window` ของเบราว์เซอร์มีเมธอด 2 ตัวที่คุณสามารถเรียกใช้เพื่อควบคุมโมดัลการค้นหา // shows the search modal window\ showsearch() // hides the search modal window\ hidesearch() ฟังก์ชันเหล่านี้ยังสามารถใช้งานได้ในสคริปต์ที่คุณกำหนดเองด้วย
Have a question?
Our super-smart AI, knowledgeable support team and an awesome community will get you an answer in a flash.
To ask a question or participate in discussions, you'll need to authenticate first.