หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

หมายเหตุ: พื้นที่เก็บข้อมูลนี้ถูกเก็บถาวรแล้ว

โครงการนี้ได้รับการพัฒนาภายใต้ระยะก่อนหน้าของ Yale Digital Humanities Lab ปัจจุบันเป็นส่วนหนึ่งของแผนกวิธีคำนวณและข้อมูลของห้องสมุด Yale ห้องแล็บไม่ได้รวมโปรเจ็กต์นี้ไว้ในขอบเขตงานอีกต่อไป ดังนั้นจึงจะไม่มีการอัพเดตเพิ่มเติมอีก มีเว็บไซต์สดที่ใช้รหัสนี้ เมื่อเว็บไซต์นี้ใช้งานไม่ได้ เว็บไซต์จะถูกลบออกจากเว็บ

gathering a building

พื้นที่เก็บข้อมูลนี้มีซอร์สโค้ดสำหรับเว็บแอปพลิเคชันที่ให้รายละเอียดแง่มุมต่างๆ ของสถาปัตยกรรมของมหาวิทยาลัยเยล แอปพลิเคชันนี้สร้างขึ้นบนส่วนหน้าของ Angular 1 ที่นำเสนอข้อมูลการทำแผนที่จากเซิร์ฟเวอร์ CartoDB และเนื้อหามัลติมีเดียจากแบ็กเอนด์ Wordpress API

กำลังอัปเดตเนื้อหาโพสต์

ผู้ใช้ที่เป็นผู้ดูแลระบบสามารถอัปเดตข้อมูลที่แสดงบนเว็บไซต์ได้โดยไปที่อินเทอร์เฟซผู้ดูแลระบบของเว็บไซต์ หลังจากเข้าสู่ระบบ ผู้ใช้สามารถสร้างข้อมูลที่จะแสดงบนเว็บไซต์โดยการสร้างและแก้ไขโพสต์โดยใช้ฟิลด์ข้อมูลเมตาต่อไปนี้:

ช่องข้อมูลเมตาที่จำเป็น

ชื่อ

ฟิลด์เริ่มต้น

ชื่อของแต่ละโพสต์ถูกกำหนดโดยฟิลด์ชื่อโพสต์ Wordpress แบบดั้งเดิม (ฟิลด์ตัวอย่าง)

ย่อหน้า

ฟิลด์เริ่มต้น

เนื้อหาข้อความสำหรับแต่ละโพสต์ถูกกำหนดโดยฟิลด์เนื้อหาข้อความ Wordpress แบบดั้งเดิม (ฟิลด์ย่อหน้าตัวอย่าง)

ตัวควบคุม

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * home
 * historical-geography
 * architecture-and-urbanism
 * material-journeys
 * people-and-places
 * about-the-author
 * downloads
 * links

ฟิลด์ควบคุมภายในโพสต์จะควบคุมตำแหน่งที่โพสต์นั้นจะถูกแสดงในการนำทางของไซต์: เช่น ว่าโพสต์จะปรากฏภายใต้ www.mydomain.com/routes/historical-geography หรือ www.mydomain.com/routes/people-and-places หรือเส้นทางอื่นบนไซต์ (ตัวอย่างฟิลด์ตัวควบคุม)

คำสั่ง

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * An integer value between 0 and the number of posts for the given controller -1

ฟิลด์ลำดับภายในโพสต์ควบคุมตำแหน่งที่โพสต์จะถูกนำเสนอภายในเส้นทาง กล่าวคือ ลำดับที่ส่วนต่างๆ จะปรากฏภายในคอลัมน์ข้อความเมื่อผู้ใช้เลื่อนดูเนื้อหาสำหรับเส้นทางที่กำหนด

เมื่อพิจารณาถึงโพสต์ทั้งหมดที่ใช้คอนโทรลเลอร์ร่วมกัน เราสามารถกำหนดลำดับที่โพสต์เหล่านั้นจะปรากฏโดยให้โพสต์ที่ควรปรากฏก่อนมีค่าลำดับเป็น 0 โพสต์ถัดไปที่ควรปรากฏค่าลำดับเป็น 1 และอื่นๆ โปรดทราบว่าระบบไม่ยอมรับมูลค่าคำสั่งซื้อที่ซ้ำกัน (ช่องคำสั่งซื้อตัวอย่าง)

ประเภทส่วน

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * table-of-contents
 * text

ฟิลด์ SectionType ภายในโพสต์จะระบุว่าโพสต์ที่ระบุแสดงถึงส่วนสารบัญสำหรับตัวควบคุมเฉพาะหรือส่วนที่เป็นข้อความสำหรับตัวควบคุมนั้น

table-of-contents
หากค่า SectionType ของโพสต์ถูกตั้งค่าเป็นสารบัญ (ตัวอย่างฟิลด์สารบัญ) คอลัมน์ข้อความสำหรับส่วนนั้นจะแสดงเป็นชุดลิงก์ตามด้วยย่อหน้าเดียวแนะนำส่วน (แสดงตัวอย่าง) . ในการสร้างสารบัญ ควรระบุโพสต์ทั้งหมดสำหรับคอนโทรลเลอร์ที่กำหนด จากนั้นสร้างหนึ่งย่อหน้าในกล่องข้อความหลักของ Wordpress สำหรับแต่ละส่วนภายในคอนโทรลเลอร์ที่ตามหลังสารบัญ (ตัวอย่างเนื้อหาย่อหน้าสารบัญ ).

text
หากค่า SectionType ของโพสต์ถูกตั้งค่าเป็นข้อความ (ช่องข้อความตัวอย่าง) คอลัมน์ข้อความสำหรับส่วนนั้นจะแสดงเป็นชุดของย่อหน้าแบบดั้งเดิม (แสดงตัวอย่าง) ในการสร้างโพสต์ข้อความ คุณควรป้อนย่อหน้าลงในฟิลด์ข้อความ Wordpress ดั้งเดิม เช่น เนื้อหาย่อหน้าของข้อความ)

แม่แบบ

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * one-div-container
 * three-div-container
 * four-div-container

ช่องเทมเพลตภายในโพสต์จะระบุประเภทของเนื้อหาที่จะแสดงด้านหลังคอลัมน์ข้อความ มีสามตัวเลือก:

one-div-container
หากตั้งค่าเทมเพลตของโพสต์เป็น one-div-container พื้นหลังของโพสต์จะเป็นภาพพื้นหลังแบบเต็มหน้า (แสดงตัวอย่าง) ภาพพื้นหลังถูกกำหนดโดยรูปภาพเด่นสำหรับโพสต์ที่กำหนด (ตัวอย่างฟิลด์ one-div-container)

three-div-container
หากค่าเทมเพลตของโพสต์ถูกตั้งค่าเป็น 3-div-container พื้นหลังของโพสต์จะประกอบด้วยองค์ประกอบ 3 รายการที่แสดงทางด้านขวามือของหน้าจอ (การแสดงตัวอย่าง) เนื้อหาภายในองค์ประกอบเหล่านี้ถูกกำหนดโดยช่องที่กำหนดเองต่อไปนี้: topImage , bottomImage , topCaption , bottomCaption ทั้งช่อง topImage และ BottomImage เป็นเส้นทางแบบเต็มไปยังไฟล์ภาพ ในขณะที่ช่อง topCaption และ BottomCaption เป็นช่องคำอธิบายภาพธรรมดา (ตัวอย่างฟิลด์ three-div-container)

four-div-container
หากค่าเทมเพลตของโพสต์ถูกตั้งค่าเป็น 4-div-container พื้นหลังของโพสต์จะประกอบด้วยรูปภาพขนาดเต็มความสูง 4 รูปที่ลิงก์ไปยังส่วนต่างๆ ภายในตัวควบคุมที่กำหนด (แสดงตัวอย่าง) ภาพพื้นหลังสำหรับเทมเพลตพื้นหลังนี้ถูกกำหนดโดยฟิลด์ introImage ภายในโพสต์สำหรับคอนโทรลเลอร์นี้ ตัวอย่างเช่น การแสดงตัวอย่างที่เชื่อมโยงไว้ก่อนหน้าในย่อหน้านี้จะแสดงหน้าเว็บที่มีภาพพื้นหลังสี่ภาพ: คอนกรีต หิน อิฐ และแก้ว รูปภาพแรก (คอนกรีต) ถูกกำหนดโดยค่า introImage ภายในโพสต์ที่มีค่าลำดับ 1 (เนื่องจากนี่เป็นโพสต์แรกที่ปรากฏหลังสารบัญ) ภายในโพสต์ที่มีค่าลำดับ 1 รูปภาพที่จะแสดงในคอนเทนเนอร์ four-div จะถูกระบุในช่องที่กำหนดเองของ introImage (ตัวอย่างช่อง four-div-container)

แบรนด์ไอคอน

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * light
 * dark

light
การตั้งค่า brandIcon เป็นสีอ่อนจะทำให้ไอคอนแบรนด์ของไซต์ (เช่น DHLab) ปรากฏเป็นสีขาว ซึ่งแนะนำสำหรับหน้าเว็บที่มีพื้นหลังสีเข้ม (ตัวอย่างช่อง light brandIcon)

dark
การตั้งค่า brandIcon เป็นสีเข้มจะทำให้ไอคอนแบรนด์ของเว็บไซต์ (เช่น DHLab) ปรากฏเป็นสีเทาเข้ม ซึ่งแนะนำสำหรับหน้าเว็บที่มีพื้นหลังสีอ่อน

ปุ่มนำทาง

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * light
 * dark

light
การตั้งค่า NavigationButton ให้สว่างจะทำให้ปุ่มเมนูการนำทางของไซต์ (เช่น ไอคอน "แฮมเบอร์เกอร์") ปรากฏเป็นสีขาว ซึ่งแนะนำสำหรับเพจที่มีพื้นหลังสีเข้ม (ตัวอย่างฟิลด์ปุ่มนำทางแบบสว่าง)

dark
การตั้งค่า NavigationButton เป็นสีเข้มจะทำให้ปุ่มเมนูการนำทางของไซต์ (เช่น ไอคอน "แฮมเบอร์เกอร์") ปรากฏเป็นสีเทาเข้ม ซึ่งแนะนำสำหรับหน้าเว็บที่มีพื้นหลังสีอ่อน

ช่องข้อมูลเมตาเพิ่มเติม

ไอเฟรม

ฟิลด์ที่กำหนดเอง 

 Accepted values:  
 * A fully-qualified url to an iframe

โพสต์ที่มีค่าตัวควบคุมของ Material-journeys อาจใช้ iframe เพื่อเติมการแสดงโดเมน iframe แบบเต็มหน้าด้านหลังคอลัมน์ข้อความ (แสดงตัวอย่าง) ในการทำเช่นนั้น คุณเพียงแค่ต้องตั้งค่าของ iframe ให้กับเพจที่คุณต้องการแสดง (ตัวอย่างฟิลด์ iframe)

การอัปเดตไอคอนหน้าแรก

หน้าแรกของไซต์ประกอบด้วยชุดไอคอนที่ซ้อนทับรูปภาพส่วนกลาง (ตัวอย่างไอคอนหน้าแรก) เนื้อหาภายในไอคอนเหล่านี้และตำแหน่งของไอคอนเหล่านี้จะถูกกำหนดโดยโพสต์ที่มีช่องข้อมูลเมตาต่อไปนี้:

ช่องข้อมูลเมตาที่จำเป็น

ชื่อ

ฟิลด์เริ่มต้น

ชื่อของแต่ละไอคอนบนหน้าแรกถูกกำหนดโดยฟิลด์ชื่อโพสต์ Wordpress แบบดั้งเดิม (ฟิลด์ชื่อตัวอย่าง) ตามด้วยชื่อเรื่องด้วย » ทำให้เกิดการแสดงภาพที่สวยงาม

ข้อความ

ฟิลด์เริ่มต้น

เนื้อหาข้อความสำหรับไอคอนหน้าแรกถูกกำหนดโดยฟิลด์เนื้อหาข้อความ Wordpress แบบดั้งเดิม (ฟิลด์ข้อความตัวอย่าง)

ตัวควบคุม

ฟิลด์ที่กำหนดเอง 

 Accepted values:
 * home

แต่ละไอคอนบนหน้าแรกจะต้องตั้งค่าตัวควบคุมเป็นหน้าแรก (ตัวอย่างช่องตัวควบคุม)

ตัวควบคุมปลายทาง

ฟิลด์ที่กำหนดเอง 

 Accepted values:
 * historical-geography
 * architecture-and-urbanism
 * material-journeys
 * people-and-places

แต่ละค่า DestinationController จะควบคุมเส้นทางที่ผู้ใช้ควรถูกนำทางเมื่อคลิกลิงก์ภายในไอคอนโฮมที่กำหนด ตัวอย่างเช่น การตั้งค่า DestinationController ของไอคอนหน้าแรกเป็น Material-Journeys จะช่วยให้แน่ใจว่าผู้ใช้จะถูกส่งไปยังเส้นทาง Material-Journeys หลังจากคลิกลิงก์ไอคอน Home (ตัวอย่างฟิลด์ DestinationController)

รหัสปลายทาง

ฟิลด์ที่กำหนดเอง 

 Accepted values:
 * An value between 0 and the number of posts for the given destinationController -1

DestinationId ระบุโพสต์ภายใน DestinationController ที่ผู้ใช้ควรถูกกำหนดเส้นทางไปหลังจากคลิกลิงก์ภายในไอคอนหน้าแรกที่กำหนด ตัวอย่างเช่น การตั้งค่า DestinationController ของไอคอนหน้าแรกเป็น Material-Journeys และ DestinationId เป็น 3 จะช่วยให้มั่นใจได้ว่าผู้ใช้ที่คลิกลิงก์ของไอคอน Home จะถูกส่งไปยังโพสต์ที่กำหนดค่าคอนโทรลเลอร์ของ Material-Journeys และค่าคำสั่งซื้อเป็น 3 (ตัวอย่างฟิลด์ DestinationId) .

xออฟเซ็ต

ฟิลด์ที่กำหนดเอง 

 Accepted values:
 * A decimal value between 0 and 1

ค่า xOffset ของไอคอนหน้าแรกจะระบุตำแหน่งที่ไอคอนควรวางอยู่เหนือรูปภาพหลักบนแกน x การตั้งค่านี้เป็น 0 จะทำให้ไอคอนอยู่ในตำแหน่งที่ขอบซ้ายสุดของรูปภาพ การตั้งค่าเป็น 1 จะทำให้ไอคอนอยู่ในตำแหน่งที่ขอบขวาสุดของรูปภาพ และตั้งค่าเป็นทศนิยมระหว่าง 0 และ 1 จะวางตำแหน่งไอคอนภายในสเปกตรัมที่ล้อมรอบด้วยจุดทั้งสองนั้น (ตัวอย่างฟิลด์ xOffset)

yออฟเซ็ต

ฟิลด์ที่กำหนดเอง 

 Accepted values:
 * A decimal value between 0 and 1

ค่า yOffset ของไอคอนหน้าแรกจะระบุตำแหน่งที่ไอคอนควรวางอยู่เหนือรูปภาพหลักบนแกน y การตั้งค่านี้เป็น 0 จะทำให้ไอคอนอยู่ในตำแหน่งที่ขอบบนสุดของรูปภาพ การตั้งค่าเป็น 1 จะทำให้ไอคอนอยู่ในตำแหน่งที่ขอบล่างสุดของรูปภาพ และตั้งค่าเป็นทศนิยมระหว่าง 0 และ 1 จะวางตำแหน่งไอคอนภายในสเปกตรัมที่ล้อมรอบด้วยจุดทั้งสองนั้น (ตัวอย่างฟิลด์ yOffset)

อินสแตนซ์การพัฒนา

อินสแตนซ์การพัฒนาของที่เก็บนี้อาจพบได้ที่นี่

กำลังพัฒนา

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

which node

หากคุณได้รับคำตอบที่ระบุว่าโหนดไม่เป็นที่รู้จัก คุณจะต้องติดตั้ง Node

เมื่อติดตั้ง Node แล้ว คุณสามารถโคลนซอร์สโค้ด ติดตั้งการขึ้นต่อกัน และเริ่มเว็บเซิร์ฟเวอร์ในเครื่องด้วยคำสั่งต่อไปนี้: 

 git clone https://github.com/YaleDHLab/gathering-a-building
cd gathering-a-building
npm install --no-optional
npm start

หากคุณเปิดเบราว์เซอร์และไปที่ localhost:8000 คุณจะเห็นแอปพลิเคชัน คุณสามารถยุติเซิร์ฟเวอร์ภายในเครื่องนี้ได้ตลอดเวลาโดยการกด CTRL+C ในหน้าต่างเทอร์มินัลที่เซิร์ฟเวอร์กำลังทำงานอยู่

การดูตัวอย่างการเปลี่ยนแปลง

หลังจากทำการเปลี่ยนแปลงฐานข้อมูล Wordpress ของคุณแล้ว คุณสามารถดูตัวอย่างการเปลี่ยนแปลงได้โดยการดึง json จากเซิร์ฟเวอร์ Wordpress ไปยังเครื่องภายในเครื่องของคุณด้วยคำสั่งต่อไปนี้: 

 npm run build-content {{username}} {{password}}

ในที่นี้ {{username}} และ {{password}} หมายถึงสตริงชื่อผู้ใช้และรหัสผ่านที่คุณจะป้อนเพื่อเข้าถึง URL ของไซต์ที่ป้องกันด้วยรหัสผ่าน

หากช่องในฐานข้อมูล Wordpress ได้รับการตั้งค่าตามคำแนะนำด้านบน คุณจะเห็นข้อความยืนยันว่ามีการเขียน json สำหรับคอนโทรลเลอร์แต่ละตัว หากคุณได้รับข้อความแสดงข้อผิดพลาดในการตรวจสอบความถูกต้อง โปรดแก้ไขฟิลด์ข้อมูลเมตาที่ได้รับผลกระทบ และเรียกใช้คำสั่ง npm run build-content อีกครั้ง

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

การรวมสาขาการพัฒนา

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

ขั้นแรก คุณสามารถเพิ่มและคอมมิตการเปลี่ยนแปลงใดๆ ที่คุณได้ทำกับพื้นที่เก็บข้อมูลในเครื่องของคุณด้วยคำสั่งต่อไปนี้: 

 git add .
git commit -m "type a message indicating the changes you made here"

จากนั้น หากต้องการดึงการเปลี่ยนแปลงล่าสุดในสาขาหลักบน GitHub คุณสามารถเรียกใช้: 

 git pull origin master

นี่จะเป็นการเปิดตัวแก้ไขข้อความบรรทัดคำสั่ง vim โดยแจ้งให้คุณพิมพ์ "ข้อความยืนยัน" ลงในหน้าจอ คุณสามารถทำได้โดยการกด i (ซึ่งย้ายโปรแกรมแก้ไขข้อความเป็นกลุ่มไปที่โหมดแทรก) ตามด้วยลูกศรลง (ซึ่งเลื่อนเคอร์เซอร์ลงหนึ่งแถวในเอกสารข้อความ) ตามด้วยข้อความถึงเพื่อนร่วมทีมของคุณ (เช่น " การรวมต้นแบบระยะไกลเข้ากับต้นแบบท้องถิ่น") ตามด้วย ESCAPE :wq ENTER

หากต้องการผสานสาขาบน GitHub ที่ยังไม่ได้ผสานเข้ากับสาขาหลักบน Github แทน คุณสามารถเรียกใช้: 

 git pull origin {{branch-name}}

การปรับใช้เนื้อหาที่อัปเดต

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

 chmod 600 PEM_FILE_NAME.pem
npm run deploy

การดำเนินการนี้จะแทนที่ไฟล์บนเซิร์ฟเวอร์ระยะไกลด้วยสำเนาไฟล์เหล่านั้นในเครื่องของคุณ

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด