สร้างเทมเพลทของไซต์จาก Bootstrap หรือเทมเพลทการออกแบบเว็บไซต์

กระบวนการพื้นฐาน

ต่อไปนี้เป็นภาพรวมของขั้นตอนต่างๆ ซึ่งจะมีคำอธิบายโดยละเอียดในหัวข้อต่อจากนี้

1. ข้อกำหนดเบื้องต้น

2. สร้างไซต์

3. ซิงโครไนซ์โฟลเดอร์ธีม

4. ตั้งค่าธีมพื้นฐาน

5. อัปเดตเพจของไซต์

6. อัปเดตการนาวิเกต

7. อัปเดตเลย์เอาต์ของไซต์

8. เผยแพร่ไซต์

9. สร้างเทมเพลทใหม่

ข้อกำหนดเบื้องต้น

• ตั้งค่าและใช้งานเดสก์ท็อปแอปพลิเคชัน Oracle Content Management สำหรับการซิงโครไนซ์โฟลเดอร์และไฟล์กับคอมพิวเตอร์ในระบบของคุณ

• ดาวน์โหลดโฟลเดอร์ ไฟล์ และเนื้อหาของธีมในเทมเพลท Bootstrap มายังคอมพิวเตอร์ของคุณ และเตรียมพร้อมสำหรับการใช้งาน

สร้างไซต์

สร้างไซต์จากเทมเพลทสำหรับผู้เริ่มต้นของ Oracle Content Management ดังนี้

1. ในการนาวิเกตด้านข้าง ให้คลิก ไซต์

   ระบบจะแสดงลิสต์ของไซต์ที่มีอยู่

2. คลิก สร้าง

3. ในไดอะล็อก "สร้างไซต์" ให้เลือก เทมเพลทสำหรับผู้เริ่มต้น JET หรือ เทมเพลทสำหรับผู้เริ่มต้น เพื่อใช้เป็นพื้นฐานสำหรับไซต์ของคุณ

4. ในไดอะล็อก ให้ป้อนชื่อสำหรับไซต์ มีการใช้ชื่อนี้ใน URL ของไซต์ คุณสามารถใช้ตัวอักษร ตัวเลข เครื่องหมายขีดล่าง (_) และเครื่องหมายขีดกลาง (-) หากคุณเว้นวรรค ระบบจะแทนที่เว้นวรรคด้วยเครื่องหมายขีดกลางโดยอัตโนมัติ

   ห้ามใช้ชื่อต่อไปนี้สำหรับเทมเพลท ธีม องค์ประกอบ ไซต์ หรือเพจของไซต์: authsite, content, pages, scstemplate_*, _comps, _components, _compsdelivery, _idcservice , _sitescloud, _sitesclouddelivery, _themes, _themesdelivery แม้ว่าคุณสามารถใช้ชื่อต่อไปนี้สำหรับเพจของไซต์ แต่ห้ามใช้สำหรับเทมเพลท ธีม องค์ประกอบ หรือไซต์: documents, sites

   หมายเหตุ:

   พาธสำหรับ URL ของไซต์ใน Oracle Content Management เป็นแบบพิจารณาตัวพิมพ์เล็กและใหญ่ ขนาดตัวพิมพ์ในสตริงการสืบค้นหรือส่วนของสตริงมีการจัดการโดยผู้พัฒนาในรหัสที่กำหนดเอง

         https:[//host[:port]][/]path[?query][#fragment] 
        \____________________/\________________________/
           Location                     Data

5. คุณสามารถเลือกที่จะป้อนคำอธิบายสำหรับไซต์ได้

6. เมื่อพร้อมแล้ว ให้คลิก สร้าง

   แถบความคืบหน้าแสดงชื่อไซต์ใหม่และสถานะการสร้าง ชื่อจะปรากฏในลิสต์ของไซต์เมื่อสร้างไซต์ สถานะเริ่มต้นของไซต์คือออฟไลน์

   ในการค้นหาไซต์ที่สร้างใหม่ของคุณในลิสต์อย่างรวดเร็ว ให้จัดเรียงลิสต์ตาม อัปเดตครั้งล่าสุด ไซต์ที่คุณเพิ่งสร้างจะปรากฏที่ด้านบนของลิสต์

ซิงโครไนซ์โฟลเดอร์ธีม

เมื่อคุณสร้างไซต์จากเทมเพลทสำหรับผู้เริ่มต้น ระบบจะสร้างสำเนาธีมของเทมเพลทสำหรับผู้เริ่มต้น และกำหนดชื่อโดยใช้ชื่อไซต์ตามด้วยชื่อธีม ตัวอย่างเช่น ธีมสำหรับ My_New_Site คือ My_New_SiteTheme

ใช้เดสก์ท็อปแอปพลิเคชันเพื่อซิงโครไนซ์โฟลเดอร์และไฟล์ของธีมสำหรับไซต์กับคอมพิวเตอร์ในระบบของคุณ โปรดดู เริ่มต้นใช้งานการซิงโครไนซ์ ใน การทำงานร่วมกันในเอกสารโดยใช้ Oracle Content Management

ในขั้นตอนนี้ คุณควรเห็นลำดับชั้นโฟลเดอร์และไฟล์ของธีมบนเดสก์ท็อปในระบบของคุณ ต่อไปนี้เป็นตัวอย่าง:

    theme_name
        assets
            css
                main.css
            js
                topnav.js
        designs
            default
                design.css
                design.json
                facebook.png
                googleplus.png
                linkedin.png
                twitter.png
                youtube.pgn
        layouts
            index.html
        responsepages
            404.html
        _folder.json
        _folder_icon.png
        components.json
        viewport.json

ตั้งค่าธีมพื้นฐาน

1. คัดลอกไฟล์ Bootstrap เหล่านี้ไปยังโฟลเดอร์ธีมที่ซิงโครไนซ์บนเดสก์ท็อปในระบบของคุณ เพื่อทับซ้อนไฟล์ที่มีอยู่

   • ไฟล์ html อยู่ในโฟลเดอร์ theme_name/layouts

   • ไฟล์ css อยู่ในโฟลเดอร์ theme_name/assets/css

   • ไฟล์ js อยู่ในโฟลเดอร์ theme_name/assets/js

   • ไฟล์ image อยู่ในโฟลเดอร์ theme_name/assets/images ซึ่งอาจมีการจัดกลุ่มเป็นโฟลเดอร์ย่อยที่มีรูปภาพสำหรับพื้นหลัง ส่วนท้าย ผู้ใช้ เป็นต้น

2. แก้ไขไฟล์ html ในโฟลเดอร์ layout เพื่ออัปเดตพาธแบบอ้างอิง และเพิ่มอีลิเมนต์ที่จำเป็น สำหรับธีมทั่วไปของ Bootstrap จะมีพาธแบบอ้างอิงจำนวนมากไปยังโฟลเดอร์ /assets คุณต้องแก้ไขเพื่อให้ชี้ไปยังโฟลเดอร์ธีม

   แก้ไขพาธของโฟลเดอร์ css, js และ images ที่จะใช้งาน:

   _scs_theme_root_/assets/css/
   _scs_theme_root_/assets/js/
   _scs_theme_root_/assets/images/
   

   หมายเหตุ:

   เมื่อทำขั้นตอนนี้เสร็จแล้ว ส่วน _scs_theme_root จะปรับโดยอัตโนมัติตามระบบที่มีการใช้ธีม

3. แต่ละเลย์เอาต์ของ Oracle Content Management มีข้อกำหนดสามประการดังนี้

   1. รวมแท็กต่อไปนี้ในแท็ก <head> ของไฟล์ html:

      • <!--$SCS_RENDER_INFO-->

      • <!--$SCS_SITE_HEADER-->

      •  <!--$SCS_PAGE_HEADER-->

   2. ระบุสคริปต์ของตัวแสดงผลที่ด้านท้ายของไฟล์เลย์เอาต์ โดยอยู่ภายในแท็ก <body> พาธทั้งสองรายการนี้จะปรับโดยอัตโนมัติในตัวสร้างไซต์และในระบบรันไทม์

      <script data-main="/_sitescloud/renderer/renderer.js" src="/_sitescloud/renderer/require.js"></script>

   3. ระบุแท็กต่อไปนี้หลังจากส่วน include ของไฟล์ renderer.js:

      • <!--$SCS_PAGE_FOOTER-->

      • <!--$SCS_SITE_FOOTER-->

ตรวจสอบว่ามีการซิงโครไนซ์ไฟล์ของธีมที่แก้ไขกับไซต์ใน Oracle Content Management แล้ว

อัปเดตเพจของไซต์

เมื่อคุณเปิดไซต์ในตัวสร้างไซต์ คุณจะเห็นเพจที่อยู่ในไซต์ดีฟอลต์เป็นอันดับแรก คุณสามารถลบเพจที่ไม่ต้องการ และสลับเลย์เอาต์ในเพจที่คุณต้องการเก็บไว้เป็นเลย์เอาต์ใหม่

1. ในการนาวิเกตด้านข้าง ให้คลิก ไซต์

   ระบบจะแสดงลิสต์ของไซต์ที่มีอยู่

2. เลือกไซต์และเลือก เปิด ในเมนูแบบคลิกขวา หรือคลิก ในแถบการดำเนินการ

3. ป้อนชื่อสำหรับการอัปเดตและคำอธิบายที่เลือกระบุได้ จากนั้นคลิก สร้าง

   สำหรับชื่อการอัปเดต คุณสามารถใช้ตัวอักษร ตัวเลข เครื่องหมายขีดล่าง (_) และเครื่องหมายขีดกลาง (-) หากคุณเว้นวรรค ระบบจะแทนที่เว้นวรรคด้วยเครื่องหมายขีดกลางโดยอัตโนมัติ

   หากมีการอัปเดตสำหรับไซต์อยู่แล้ว ให้เลือกการอัปเดตจากลิสต์ และคลิก

4. ตัวสร้างไซต์จะเปิดในโหมดแสดงตัวอย่าง ในการแก้ไขหรือใช้ตัวเลือกการนาวิเกตในแถบด้านข้าง ให้ตรวจสอบว่าตัวสลับการแก้ไข ถูกตั้งค่าเป็น แก้ไข แล้ว

5. ในการแก้ไขเพจที่ระบุ ให้เลือกเพจโดยใช้โครงสร้างไซต์ในแถบด้านข้างหรือใช้การนาวิเกตของไซต์นั้นเอง

6. ในการลบเพจที่คุณไม่ต้องการออก ให้เลือกเพจดังกล่าวและคลิก

7. ในการเพิ่มเพจใหม่ ให้คลิก เพิ่มเพจ คุณสามารถเปลี่ยนตำแหน่งของเพจในโครงสร้างไซต์ได้ โดยลากและวาง

8. ในการเปลี่ยนแปลงเลย์เอาต์ที่เชื่อมโยงกับเพจ ให้เลือกเพจในโครงสร้างไซต์และคลิก เพื่อแสดงการตั้งค่าเพจ

   ไปที่ฟิลด์ เลย์เอาต์ของเพจ และเลือกเลย์เอาต์อื่นจากเมนู จำนวนและประเภทของเลย์เอาต์ของเพจขึ้นอยู่กับธีมที่เชื่อมโยงกับไซต์ของคุณ

9. บันทึก เพื่อบันทึกการแก้ไขการอัปเดตปัจจุบัน คุณสามารถดำเนินการต่อกับการอัปเดตปัจจุบัน หรือสร้างการอัปเดตใหม่ได้หากต้องการ

อัปเดตการนาวิเกต

เมื่อคุณดูการนาวิเกตในการแสดงตัวอย่างไซต์ การนาวิเกตจะไม่ตรงกับลำดับชั้นปัจจุบัน เนื่องจากการนาวิเกตที่กำหนดถาวรในเลย์เอาต์จากธีม Bootstrap

อัปเดตการนาวิเกตเพื่อแทนที่รหัสที่กำหนดถาวรในธีม Bootstrap ด้วยรหัสที่สร้างแบบไดนามิคจากลำดับชั้นของไซต์

แก้ไขสำเนาที่ซิงโครไนซ์ในระบบของไฟล์ธีม

1. ลบรหัสการนาวิเกตที่กำหนดถาวรออกจากเลย์เอาต์ ต่อไปนี้เป็นตัวอย่างของการนาวิเกตที่กำหนดถาวร ซึ่งควรย้ายออกจากธีมทั่วไปของ Bootstrap นี่คือส่วนหัวโดยทั่วไป ซึ่งประกอบด้วยโลโก้ ส่วน ‘ท็อกเกิลการนาวิเกต’ สำหรับเมนู ‘Hamburger’ เมื่อเพจแคบเกินไป (ส่วนที่ตอบสนอง) และการนาวิเกตเพจที่กำหนดถาวรสำหรับเพจอื่น

   <header id="header" class="header navbar-fixed-top">  
           <div class="container">       
               <h1 class="logo">
                   <a href="index.html"><span class="text">Velocity</span></a>
               </h1><!--//logo-->
               <nav class="main-nav navbar-right" role="navigation">
                   <div class="navbar-header">
                       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                       </button><!--//nav-toggle-->
                   </div><!--//navbar-header-->
                   <div id="navbar-collapse" class="navbar-collapse collapse">
                       <ul class="nav navbar-nav">
                           <li class="active nav-item"><a href="index.html">Home</a></li>
                           <li class="nav-item"><a href="features.html">Features</a></li>
                           <li class="nav-item"><a href="pricing.html">Pricing</a></li>
                           <li class="nav-item dropdown">
                               <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Pages <i class="fa fa-angle-down"></i></a>
                               <ul class="dropdown-menu">
                                   <li><a href="download.html">Download Apps</a></li>
                                   <li><a href="blog.html">Blog</a></li>
                                   <li><a href="blog-single.html">Blog Single</a></li>
                                   <li><a href="blog-category.html">Blog Category</a></li>
                                   <li><a href="blog-archive.html">Blog Archive</a></li>
                                   <li><a href="about.html">About Us</a></li>
                                   <li><a href="contact.html">Contact</a></li>                    
                               </ul>                            
                           </li><!--//dropdown-->                         
                           <li class="nav-item"><a href="login.html">Log in</a></li>
                           <li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="signup.html">Sign Up Free</a></li>
                       </ul><!--//nav-->
                   </div><!--//navabr-collapse-->
               </nav><!--//main-nav-->                     
           </div><!--//container-->
       </header><!--//header-->
   

2. เขียนรหัส JavaScript เพื่อผ่านเข้าสู่ข้อมูลโครงสร้างของไซต์ และสร้างรหัสการนาวิเกต จากนั้นระบุรหัส JavaScript ในเลย์เอาต์ เช่น:

   <script type="text/javascript" src="_scs_theme_root_/assets/js/navbar.js"></script>

3. แก้ไขเอาต์พุตของไฟล์ topnav.js ให้ตรงกับมาร์คอัปที่คาดหมายใน CSS ของคุณโดยเฉพาะ

อัปเดตเลย์เอาต์ของไซต์

ในขั้นตอนนี้ ไซต์สามารถทำงานได้ แต่ไม่มีพื้นที่ที่แก้ไขได้ (สล็อต) ในเลย์เอาต์นี้

1. ค้นหาหรือเพิ่มอีลิเมนต์ DIV ในเลย์เอาต์ และกำหนดเป็นสล็อต

   สล็อต เป็นอีลิเมนต์ DIV ในเลย์เอาต์ที่มีค่า "scs-slot" ในแอททริบิวคลาส แต่ละสล็อตต้องมีแอททริบิว id ที่ไม่ซ้ำกัน ตัวอย่างเช่น:

   <div id="slot-content1" class="scs-slot scs-responsive"></div>

   หากต้องการกำหนดให้สล็อตปรับโดยอัตโนมัติตามขนาดพอร์ของวิวในเบราเซอร์ ให้ระบุแอททริบิวคลาส "scs-responsive"

2. ทำขั้นตอนนี้ซ้ำตามที่ต้องการ เพื่อสร้างสล็อตอื่นในเลย์เอาต์นี้ หรือในเลย์เอาต์อื่น

เผยแพร่ไซต์

หลังจากที่คุณดำเนินการเสร็จและบันทึกการเปลี่ยนแปลงทั้งหมดในไซต์แล้ว คุณต้อง เผยแพร่ ไซต์

การเผยแพร่ไซต์จะนำการเปลี่ยนแปลงทั้งหมดในการอัปเดตปัจจุบันมารวมเข้ากับฐาน ทำให้สิ่งที่เดิมเป็นการอัปเดตกลายเป็นไซต์ฐานใหม่

สร้างเทมเพลทใหม่

ขณะนี้คุณมีไซต์ที่ทำงานได้พร้อมธีมที่เชื่อมโยง ซึ่งคุณสามารถกำหนดเป็นเทมเพลทที่ใช้ร่วมกับคนอื่น และให้คนอื่นใช้เป็นฐานในการสร้างไซต์ของตนเอง

1. ในการนาวิเกตด้านข้างของ Oracle Content Management ให้คลิก ผู้พัฒนา

2. คลิก ดูเทมเพลททั้งหมด

3. คลิก สร้าง และเลือก จากไซต์ที่มีอยู่

4. เลือกไซต์ใหม่ที่คุณสร้างไว้ โดยใช้เทมเพลทสำหรับผู้เริ่มต้นและเทมเพลท Bootstrap

5. ป้อนชื่อสำหรับเทมเพลทใหม่และคลิก สร้าง

6. ในการสร้างแพ็คเกจของเทมเพลทสำหรับใช้กับอินสแตนซ์อื่นของ Oracle Content Management ให้เลือกเทมเพลทและเลือกตัวเลือกเมนู เอ็กซ์ปอร์ต เพื่อสร้างไฟล์ .zip ที่สามารถดาวน์โหลดได้