筆記

調整 Nuxt Content 渲染的標籤樣式

可以在專案目錄中建立一個同名元件,路徑預設為components/content/,如:components/content/ProseA.vue,用來修改以下語法:

markdowncontent/article.md
[Link](/components/prose)

然後參考 Source進行修改:

vue-htmlcomponents/content/ProseA.vue
<template>
  <NuxtLink :href="props.href" :target="props.target">
    <slot />
  </NuxtLink>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

const props = defineProps({
  href: {
    type: String,
    default: ''
  },
  target: {
    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
    default: undefined,
    required: false
  }
})
</script>

資料來源:Prose Components

2024-12-20

理解 noopener 與 noreferrer 的差異

設置 target="_blank" 時,點擊連結會在新視窗或分頁中打開連結,但這也會導致新窗口或分頁能夠通過 window.opener 訪問原本的頁面。

html
<a href="https://example.com" target="_blank" rel="noopener">Example</a>

<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>

簡單對比

屬性阻止 window.opener不傳 HTTP 參照標頭
noopener✔︎✖︎
noreferrer✔︎✔︎
2024-12-16

簡易 Github 上傳流程

  1. 到 GitHub 上創建一個新的儲存庫(repository)
  2. 將現有專案連結到 GitHub: 如果你的專案已經存在本地,打開終端機,執行以下指令:
bash
  # 進入專案目錄
  cd path/to/your-project

  # 初始化 Git
  git init

  # 將本地專案與 GitHub 儲存庫連結
  git remote add origin https://github.com/your-github-account/your-project.git

  # 添加所有檔案
  git add .

  # 第一次提交
  git commit -m 'Initial commit'

  # 推送到 GitHub main 分支
  git branch -M main
  git push -u origin main
2024-12-16

瓜熊

努力學習 Nuxt 中……