Khang

Ở phần Custom transformation function trong repo có hướng dẫn đó bạn. Trong file next-sitemap.config.js bạn có thể khai báo hàm transform như sau:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  // các option khác
  ...
  transform: async(config, path) => {
    // config: object chứa các cài đặt mặc định của next-sitemap
    // path: đường dẫn của trang đang được transform
    return {
      loc: path,
      priority: path === '/' ? 1 : 0.8,
      changefreq: config.changefreq,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  }
}

Hẳn là do overflow: hidden của carousel bọc ngoài rồi bạn ạ, chắc không còn cách nào khác ngoài tăng margin/padding cho content bên trong để box-shadow không bị che đi thôi.

Strapi cũng chỉ là NodeJS, bạn muốn truy cập biến lưu trong .env thì chỉ cần gọi process.env.my_variables.

Hoặc Strapi đã cung cấp sẵn hàm util env() để bạn dùng, phần này đã có sẵn trong docs của họ: https://docs-next.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/optional/environment.html

Câu hỏi này khá hay 👍 Trước giờ mình làm việc với công nghệ nào thì toàn mặc định follow theo docs của họ mà ít khi đặt câu hỏi tại sao, có lẽ do mindset của mình là ông tác giả viết ra framework/library nào thì họ đã nắm rõ bản chất, nguyên tắc để làm việc với đứa con của họ hơn 😅

Anyway, trên stackoverflow cũng có 1 câu hỏi tương tự bạn có thể tham khảo: https://stackoverflow.com/questions/50532260/vue-emitting-vs-passing-function-as-props

Tóm tắt đại ý các câu trả lời là: Bố thích thế nào thì viết thế đấy... jk 😂 Mỗi kiểu đều có pros and cons, nhưng khác biệt lớn nhất chỉ là về mặt semantic, dùng kiểu emit giúp bạn tách biệt flow rõ ràng so với kiểu props:

• Props: cha -> con (chỉ truyền object/primitive types chứ ko truyền function)
• Emit: cha <- con (emit function, giống như bạn dùng event onclick trên thẻ button vậy)

Nhưng đổi lại với kiểu props thì code sẽ tường minh hơn, vì bạn thấy được function mình truyền vào từ props được sử dụng như thế nào, dễ debug hơn.

Tùy project, preference của ông lead hoặc nếu bạn là lead thì cứ chọn 1 cái rồi cả team cùng follow thôi.

Bạn đặt meta tags cho trang web chuẩn là khi share URL trang web, hình ảnh đi kèm sẽ tự động được hiển thị theo thôi 🙂

Bạn có thể sử dụng tool này để tạo meta tags cho nhiều trang mạng xh: https://metatags.io

Bạn tham khảo thử cách sau.

Ví dụ Strapi API bạn có route /api/movies để lấy danh sách phim từ Strapi. Khi call API thì nhận được content dạng như:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "The Terminator",
        "slug": "the-terminator",
        "description": "Super robot saves the world from evil AI",
        "locale": "en"
      }
    }
  ]
}

Danh sách phim đã được đa ngữ sẽ có 2 route /api/movies?locale=en (EN) và /api/movies?locale=vi (VI). Route VI của bạn sẽ có dạng như:

{
  "data": [
    {
      "id": 1,
      "attributes": {
        "name": "Kẻ hủy diệt",
        "slug": "ke-huy-diet",
        "description": "Siêu người máy giải cứu khỏi bọn AI xấu xa",
        "locale": "vi"
      }
    }
  ]
}

Như bạn thấy thì chỉ có phần content được thay đổi cho đa ngữ, các attribute key như name, description vẫn giống nhau, nên trong Vue component, sau khi mount, bạn chỉ việc gọi đến API route tương ứng rồi render dựa theo các key đó là được.

<template>
  <ul>
    <li v-for="movie in movies" :key="movie.id">
      <h2>{{ movie.name }}</h2>
      <p>{{ movie.description }}</p>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      movies: []
    };
  },
  async mounted() {
    const { data } = await fetch(`/api/movies?locale=${locale}`);
    this.movies = data;
  }
};
</script>

locale bạn có thấy truy xuất từ route nếu dùng vue router, hoặc từ prop của component, hoặc thậm chí từ localStorage.

Một giải pháp đơn giản nhưng cực kỳ 🍌 là bạn có thể hardcode những từ tiếng việt để replace sang tiếng anh (áp dụng regex sẽ gọn hơn), vd:

function normalize(text) {
  return text.replace(/[ìíịỉĩ]/gi, 'i').replace(/[àáạảãâầấậẩẫăằắặẳẵ]/gi, 'a').replace().replace()...
}

a = li[i].getElementsByTagName("a")[0];
if (normalize(a.innerHTML).toUpperCase().indexOf(filter) > -1) { ... }

Còn để có giải pháp xịn xò, chỉn chu hơn chắc phải tìm hiểu sâu hơn về UTF encoding 🤷‍♂️

Lỗi của bạn liên quan đến thư viện react-router-dom. Cách lấy param id từ route /edit chính xác là phải sử dụng hook useParams của react-router. Ở đây mình thấy component của bạn đang tạo dạng class component, bạn nên chuyển nó sang dạng functional component thì mới có thể sử dụng được hook (nguồn), sau đó bạn có thể dùng như sau:

import { useParams } from "react-router-dom"

export default function EditRestaurants() {
  const { id } = useParams();
  console.log(id);
}

Còn để dùng được template literal thì bạn dùng dấu backtick nhé:

<Link to={`/edit/${item.id}`} className="btn">Edit</Link>

HTML cơ bản là đủ bạn ạ 🙂

<table>
  <tr>
    <td colspan="2"></td>
    <td>8/10</td>
    <td>9/10</td>
    <td>10/10</td>
  </tr>
  <tr>
    <th rowspan="2">Tiêu đề 1</th>
    <th>Tiêu đề 1.1</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <th>Tiêu đề 1.2</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <th colspan="2">Tiêu đề 2</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <th colspan="2">Tiêu đề 3</th>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>```

1. Bạn tải LuaBinaries bản executable về máy:

2. Giải nén ra rồi bạn chạy lua54.exe là có thể bắt đầu code.

Hi vọng giải đáp đúng câu hỏi của bạn

Bạn có thể tham khảo cách của mình:

// 1. Tổ chức bảng từ DB thành cấu trúc mảng tương đương
const categories = [
  {
    id: 1,
    name: "Áo",
    slug: "",
    parent: 0
  },
  {
    id: 2,
    name: "Quần",
    slug: "",
    parent: 0
  },
  {
    id: 3,
    name: "Giày dép",
    slug: "",
    parent: 0
  },
  {
    id: 4,
    name: "Phụ kiện",
    slug: "",
    parent: 0
  },
  {
    id: 5,
    name: "Áo phông",
    slug: "",
    parent: 1
  },
  {
    id: 6,
    name: "Áo len",
    slug: "",
    parent: 1
  },
  {
    id: 7,
    name: "Quần Jean",
    slug: "",
    parent: 2
  }
];

// 2. Lọc những category không có parent thành menu cấp cao nhất
const menu = categories.filter(category => !category.parent);

// 3. Trong từng cấp menu, lọc ra những menu con có "parent" trùng với "id" của menu cha
menu.forEach(category => {
  category.children = categories.filter(c => c.parent === category.id);
});

// Cuối cùng là render cấu trúc menu bằng React thôi :)

1. Có 2 cách

• Mỳ ăn liền thì bạn dùng thư viện (inputmask chẳng hạn)
• Còn để nâng trình thì bạn tham khảo đáp án này trên stackoverflow (cố gắng nuốt cái Regular Expression )

$(".getvalue").each(function () {
  const self = $(this);
  self.text(self.prev().val());
});

Bài viết này sẽ trả lời cho câu hỏi của bạn và những câu hỏi tương tự khác nếu có https://viblo.asia/p/hoc-regular-expression-va-cuoc-doi-ban-se-bot-kho-updated-v22-Az45bnoO5xY

Package này không hỗ trợ yêu cầu của bạn rồi, bạn phải tự custom lại thôi. Một trong những cách giải quyết theo hướng sử dụng showCalendar của bạn là gắn thêm hàm xử lý (vd "onClickOutside") vào event click của document, trong hàm này check nếu user click ra ngoài cái datepicker thì bạn gọi

this.$refs.picker.close()

Bạn có thể dùng tab network trong devtool của trình duyệt để check các request nào được gọi trong trang. Trường hợp ít hoặc ko có request nào thì tức website được thiết kế theo kiểu server-side rendering, nếu họ ko public API thì ko có cách nào để lấy API (hoặc có thể có nhưng nằm ngoài hiểu biết của mình).

1. v-for bạn đặt trong option mới đúng nha (đọc thêm: https://vi.vuejs.org/v2/guide/list.html)
2. Ở đây mình thấy bạn đặt nhomcon trong thẻ select sẽ không có tác dụng gì. Thẻ select chỉ đi với thẻ option, còn nhomcon là một component bạn viết riêng bằng Vue.
3. Mính góp ý thêm là bạn nên tìm hiểu thêm về các thuật ngữ như "hàm", "đệ quy", "vòng lặp" để đặt câu hỏi chính xác hơn.

Bạn đặt ngôn ngữ theo URL path là được, window.navigator.language thì dùng cho trường hợp mặc định. Vd:

const langFromPath = location.pathname.split("/")[1];
const hasLang = langFromPath.length === 2; // nếu path có dạng: abc.com/xx/something-else
const siteLang = hasLang ? langFromPath : navigator.language;

Keyword là lazy loading nha bạn.

Cụ thể cách trang shopee thực hiện ở đây là họ tạo 1 div chồng lên ảnh gốc, trong div này họ set thuộc tính backgroung-image với 1 ảnh nhỏ loại svg nên chắc chắn sẽ ko mất bao nhiêu ms để load ảnh này vào div, sau khi ảnh gốc được load xong thì chỉ việc xóa div này đi. Bước xóa div được xử lý trong sự kiện onload của thẻ <img />.

Bạn có thể đặt thuộc tính css "pointer-events: none" vào body hoặc root. Nhưng thường chỉ cần khóa button login đi là đủ, vì người dùng có click đi đâu cũng ko ảnh hưởng request auth đã gửi - họ vẫn sẽ được tự động redirect về trang chủ (hoặc lý tưởng hơn là trang đang truy cập) sau khi login thành công.

Thay vì bỏ thời gian để làm lại một thư viên y chang chi bằng bạn đọc và nghiên cứu kỹ cách sử dụng nó rồi tạo một wrapper bằng jQuery để sử dụng lại nó thôi