Markdown Jekyll: แทรก iframe ที่เติมเต็มคอนเทนเนอร์

วิธีรวมวิดีโอในบล็อก jekyll markdown อธิบายวิธีแทรก iframe ในโพสต์ให้ฉันฟัง อย่างไรก็ตาม ฉันใช้ iframe สำหรับแผนที่แผ่นพับ ไม่เหมือน วิธีแสดงแผนที่แผ่นพับใน โพสต์เดียวใน jekyll? ฉันกำลังจัดเก็บรหัสแผนที่ในไฟล์ html ตำแหน่งแยกต่างหาก และกำลังแสดงแผนที่ภายใน iframe ในโพสต์ของฉัน ฉันโฮสต์สิ่งนี้บน github ดังนั้นฉันจึงใช้ปลั๊กอิน jekyll ไม่ได้

ฉันสามารถแสดงแผนที่ได้ แต่ฉันไม่เข้าใจวิธีการตรวจสอบให้แน่ใจว่า iframe เติมเต็มคอนเทนเนอร์ของบล็อกในลักษณะที่ตอบสนองต่อการปรับขนาดหน้าต่างเบราว์เซอร์ มีวิธีระบุเฉพาะในโค้ดสำหรับโพสต์บล็อกหรือไม่ หรือฉันต้องสร้างสไตล์ css ของตัวเองเช่นนี้ บล็อกโพสต์


jekyll iframe leaflet
person raphael    schedule 27.07.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
6
arrow_downward

ฉันสมมติว่าคุณกำลังทำ {% include mapName.html %} สำหรับรหัสแผนที่ของคุณ แต่อย่างใดคำถามของคุณจะขึ้นอยู่กับคอนเทนเนอร์และสไตล์ CSS มากกว่า คุณอาจต้องเขียนสไตล์ของคุณเองเพื่อให้แน่ใจว่า iframe ตอบสนอง นี่คือตัวอย่าง ซึ่งนำมาจากและอธิบายโดยละเอียด ที่นี่ (โปรดอ้างอิงถึงไซต์นั้นเพื่อดูตัวอย่างเพิ่มเติม คุณควรทำจริงๆ เนื่องจากเป็นคำอธิบายที่ละเอียดมาก) นี่คือตัวอย่างสั้นๆ ของกระบวนการ ตามที่กล่าวไว้ในโพสต์นั้น:

  1. สร้าง div สำหรับ iframe ของคุณด้วยรหัส:

    <div class="video-container">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

  2. จัดสไตล์ div ใน CSS:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
}

  3. และสุดท้ายก็จัดรูปแบบ iframe:

    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

ดังที่กล่าวไปแล้วว่าหากโค้ดแผนที่ของคุณไม่ได้มีเอกลักษณ์เฉพาะตัวเลย คุณก็อาจเลือกเส้นทางที่ง่ายกว่า และไม่ต้องจัดการกับสไตล์ CSS ใดๆ ด้วยบริการอย่าง embed .ly ซึ่งฉันใช้บนบล็อกของตัวเองเมื่อฝังวิดีโอและ iframe เนื่องจากใช้รูปภาพแบบตอบสนองโดยใช้ Javascript

person matrixanomaly    schedule 28.07.2015
comment
หลังจากใช้ความพยายามเล็กน้อยฉันก็ได้สิ่งนี้มาทำงาน ฉันละทิ้งวิธีแก้ปัญหาที่แนะนำในโพสต์บล็อกที่ฉันเชื่อมโยงกับคำถามของฉันเนื่องจากการใช้ <div> ในโพสต์มาร์กดาวน์ของฉันทำให้การจัดรูปแบบมาร์กดาวน์อื่น ๆ ภายนอก <div> เสียหาย ปรากฎว่า (ฉันคิดว่า) นี่เป็นเพราะธีมของฉันใช้ redcarpet เป็นตัวแยกวิเคราะห์ การเปลี่ยนไปใช้ kramdown ได้ผล คำถาม ฉันไม่ค่อยทำตามประโยคแรกของคุณ ขณะนี้ฉันกำลังใช้ปลั๊กอินใน QGIS เพื่อสร้างแผนที่แผ่นพับแบบสแตนด์อโลนในโฟลเดอร์ของตัวเอง และด้วย index.html ของมันเอง จากนั้นฉันก็ใช้ iframe เพื่อฝังแผนที่ภายในโพสต์ - person raphael; 29.07.2015
comment
@raphael อ่า เข้าใจแล้ว สิ่งที่ฉันหมายถึงในประโยคแรกคือคุณสามารถ 'แทรก' ตัวอย่างสิ่งที่คุณต้องการได้โดยใช้ไวยากรณ์ `{% include filename.html %} ซึ่งฉันคิดว่าอาจเป็นสิ่งที่คุณกำลังทำอยู่ ใช้เพื่อรวมแถบส่วนหัวไว้ด้วย ตัวอย่างเช่น นี่คือเอกสารสำหรับมัน: jekyllrb.com/docs/templates /#รวม - person matrixanomaly; 30.07.2015

arrow_upward
0
arrow_downward

ตัวช่วย CSS

.is-fullwidth {
    width: 100%;
}

ในมาร์กดาวน์

    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" class="is-fullwidth" height="315px"
    </iframe>
person Arash Outadi    schedule 12.12.2019