如何獲得最近的第一篇文章和第二篇……將它們放在博客模板中的幻燈片中

Question

更新

我只想要一個 function 來按日期提取最后 3 個帖子，同時准備 Blogger 模板，它必須是一個單獨的 function 來提取每個單獨的帖子（第一 - 第二 - 第三），然后將其包含在附加的幻燈片中下面的代碼

我只想要一個 function 從 Blogger 博客中提取最后 3 篇文章，並將在下面的代碼中使用

https://github.com/ahmedmehanna700/post-code

我有一個引導程序 slider 顯示最近的帖子我想獲得 3 個帖子的標題和圖像並將它們放入 img scr 和 p 我想分別帶來每個項目以便能夠將它放在代碼中

Answer 1

你的問題不是很清楚。 此代碼創建圖像和標題列表：

 var items = document.querySelectorAll(".carousel-item"), list = []; for(let i = 0; i < items.length; i++) { let data = {}; data.img = items[i].querySelector("img"); data.title = items[i].querySelector(".carousel-caption > h5"); list[list.length] = data; } console.log("Title from second post: ", list[1].title.textContent); console.log("Image url from third post: ", list[2].img.src); console.log("list of all posts:"); console.log(list);

 <div class='flex-grow widget-inner'> <div class='carousel slide' data-bs-ride='carousel' id='carouselExampleCaptions'> <div class='carousel-indicators'> <button aria-current='true' aria-label='Slide 1' class='active' data-bs-slide-to='0' data-bs-target='#carouselExampleCaptions' type='button'/> <button aria-label='Slide 2' data-bs-slide-to='1' data-bs-target='#carouselExampleCaptions' type='button'/> <button aria-label='Slide 3' data-bs-slide-to='2' data-bs-target='#carouselExampleCaptions' type='button'/> </div> <div class='carousel-inner'> <div class='carousel-item active'> <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-qq6KbFXzexw/YHoA4BaCfBI/AAAAAAAAF-8/o93DIHz4xa4zMMyYfmX_hDEDrUUardirwCLcBGAsYHQ/s16000/%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B1%25D8%25A7%25D8%25A9%2B%25D8%25A7%25D9%2584%25D8%25A3%25D9%2587%25D9%2584%25D9%2589%2B%25D9%2588%25D8%25A7%25D9%2584%25D8%25B2%25D9%2585%25D8%25A7%25D9%2584%25D9%2583%2B18-4-2021.webp'/> <div class='carousel-caption d-none d-md-block'> <h5>First slide label</h5> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class='carousel-item'> <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-vYM4UIdLty4/YHnxtDr8IcI/AAAAAAAAF-0/1JR8EZpgtIEyRlW7sffau6ost0dVJWlaQCLcBGAsYHQ/s16000/%25D8%25A8%25D8%25AB%2B%25D9%2585%25D8%25A8%25D8%25A7%25D8%25B4%25D8%25B1%2B%25D8%25A8%25D8%25B1%25D8%25B4%25D9%2584%25D9%2588%25D9%2586%25D8%25A9%2B%25D9%2588%25D8%25A7%25D8%25AA%25D9%2584%25D8%25AA%25D9%258A%25D9%2583%2B%25D8%25A8%25D9%2584%25D8%25A8%25D8%25A7%25D9%2588%2B%2B%25D8%25A8%25D8%25AF%25D9%2588%25D9%2586%2B%25D8%25AA%25D9%2582%25D8%25B7%25D9%258A%25D8%25B9%2B%2B%25D8%25A7%25D9%2584%25D8%25A7%25D9%2586.webp'/> <div class='carousel-caption d-none d-md-block'> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class='carousel-item'> <img alt='...' class='d-block w-100' src='https://1.bp.blogspot.com/-RsLYxQ6LElo/YGFsiqK1zNI/AAAAAAAAF8s/PzyjKOyecNsDxVdxQ2GJ15fnJCESdXIigCLcBGAsYHQ/s16000/%25D8%25A7%25D9%2584%25D8%25AA%25D8%25B3%25D8%25AC%25D9%258A%25D9%2584%2B%25D9%2581%25D9%2589%2B%25D9%2584%25D9%2582%25D8%25A7%25D8%25AD%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2588%25D9%2586%25D8%25A7%2B%25D9%2583%25D9%2588%25D8%25B1%25D9%2586%25D8%25A71.webp'/> <div class='carousel-caption d-none d-md-block'> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class='carousel-control-prev' data-bs-slide='prev' data-bs-target='#carouselExampleCaptions' type='button'> <span aria-hidden='true' class='carousel-control-prev-icon'/> <span class='visually-hidden'>Previous</span> </button> <button class='carousel-control-next' data-bs-slide='next' data-bs-target='#carouselExampleCaptions' type='button'> <span aria-hidden='true' class='carousel-control-next-icon'/> <span class='visually-hidden'>Next</span> </button> </div> </div>