Dynamic Footer Date

Наличие уведомления об авторских правах с указанием текущего года, например © 2024 - Все права защищены, является обычной необходимостью (хотя юридически это никак не закреплено).

Дата на стороне сервера: вопрос

src/components/Footer.astro

---
const year = new Date().getFullYear()
---

<footer>
    <p>&copy; {year} - All rights reserved</p>
</footer>

Однако он будет отображать только год, когда сайт был создан в последний раз! Он обновится только при следующей перестройке сайта.

Заметка

warning Примечание Это прекрасно работает в SSR, потому что данные вычисляются при загрузке страницы.

Решение

Решение заключается в использовании JavaScript на стороне клиента для получения текущего года при загрузке страницы.

1. Во время сборки мы готовим откат даты. Если браузер пользователя не может выполнить JavaScript, нам нужно показать последнюю известную дату.

   ---
   const year = new Date().getFullYear()
   ---

2. Мы пишем разметку. У нас есть span с id footer-year, чтобы на него можно было ссылаться из нашего скрипта. Его значение по умолчанию - дата возврата из шага 1.

   <footer>
     <p>&copy; <span id="footer-year">{year}</span> - All rights reserved</p>
   </footer>

3. В нашем скрипте мы можем получить элемент <span> по его id и обновить его содержимое до текущего года. Код отличается в зависимости от версии Astro и от того, используете ли вы View Transitions.

   MPA

   <script is:inline>
     document.getElementById("footer-year").innerText = new Date().getFullYear();
   </script>

   VT < 4.5

   <script is:inline>
     const handleFooterDate = () => {
       document.getElementById("footer-year").innerText = new Date().getFullYear();
     };
   
     handleFooterDate();
     document.addEventListener("astro:after-swap", () => handleFooterDate());
   </script>

   VT >= 4.5

   <script is:inline data-astro-rerun>
     document.getElementById("footer-year").innerText = new Date().getFullYear();
   </script>

Полный код

MPA

---
const year = new Date().getFullYear()
---

{' '}

<footer>
<p>
  &copy; <span id="footer-year">{year}</span> - Все права защищены
</p>
</footer>

{' '}

<script is:inline>
document.getElementById("footer-year").innerText = new Date().getFullYear();
</script>

VT < 4.5

---
const year = new Date().getFullYear()
---

<footer>
  <p>&copy; <span id="footer-year">{year}</span> - All rights reserved</p>
</footer>

<script is:inline>
  const handleFooterDate = () => {
    document.getElementById("footer-year").innerText = new Date().getFullYear();
  };

  handleFooterDate();
  document.addEventListener("astro:after-swap", () => handleFooterDate());
</script>

VT >= 4.5

---
const year = new Date().getFullYear()
---

{' '}

<footer>
<p>
  &copy; <span id="footer-year">{year}</span> - Все права защищены
</p>
</footer>

{' '}

<script
is:inline
data-astro-rerun>
document.getElementById("footer-year").innerText = new Date().getFullYear();
</script>