about notion page embeded / or href

[leechiuhui]

https://galacticproject.notion.site/a0a32d5d4ddf43b28ae6a73c073e1c8c?v=72e87b01f9844b849d442458fe46aa04

"Preliminary reference materials from ChatGPT queries. Expected to be studied on weekdays (Tuesday or Friday). However, Teacher Tang or anyone else who is available can handle it first.

要將 Notion 網頁嵌入到 Vue 3 網頁中，你可以使用 <iframe> 元素來實現。以下是詳細步驟和程式碼範例：

1. 建立 Vue 3 項目（如果你還沒有項目）：

   • 使用 Vue CLI 或 Vite 建立一個新的 Vue 3 項目。

2. 在 Vue 組件中嵌入 Notion 網頁：

   • 在你的 Vue 組件中使用 <iframe> 元素來嵌入 Notion 網頁。

以下是具體程式碼範例：

建立新的 Vue 項目（如果還沒有）

# 使用 Vue CLI
vue create my-vue-project
cd my-vue-project

# 或使用 Vite
npm init vite@latest my-vue-project --template vue
cd my-vue-project
npm install

在 Vue 項目中嵌入 Notion 網頁

1. 編輯 src/App.vue 或建立新的 Vue 組件，例如 src/components/NotionEmbed.vue。

2. 使用 <iframe> 元素嵌入 Notion 網頁：

src/App.vue 的範例程式碼：

<template>
  <div id="app">
    <h1>嵌入 Notion 網頁</h1>
    <iframe
      src="https://galacticproject.notion.site/a0a32d5d4ddf43b28ae6a73c073e1c8c?v=72e87b01f9844b849d442458fe46aa04"
      width="100%"
      height="800px"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
}

iframe {
  border: none;
}
</style>

或者，你可以建立一個新的組件，例如 NotionEmbed.vue：

src/components/NotionEmbed.vue 的範例程式碼：

<template>
  <div class="notion-embed">
    <iframe
      src="https://galacticproject.notion.site/a0a32d5d4ddf43b28ae6a73c073e1c8c?v=72e87b01f9844b849d442458fe46aa04"
      width="100%"
      height="800px"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
</template>

<script>
export default {
  name: 'NotionEmbed',
};
</script>

<style>
.notion-embed iframe {
  border: none;
}
</style>

3. 在 App.vue 中使用 NotionEmbed 組件：

src/App.vue 的範例程式碼：

<template>
  <div id="app">
    <h1>嵌入 Notion 網頁</h1>
    <NotionEmbed />
  </div>
</template>

<script>
import NotionEmbed from './components/NotionEmbed.vue';

export default {
  name: 'App',
  components: {
    NotionEmbed,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

這樣，你的 Notion 網頁就會嵌入到你的 Vue 3 網頁中並顯示出來。如果有任何進一步的問題或需要更詳細的說明，歡迎隨時提問！

當然可以，以下是使用 Pug 語法改寫後的程式碼。

src/App.vue 的範例程式碼

App.vue 使用 Pug 語法：

<template lang="pug">
  #app
    h1 嵌入 Notion 網頁
    iframe(
      src="https://galacticproject.notion.site/a0a32d5d4ddf43b28ae6a73c073e1c8c?v=72e87b01f9844b849d442458fe46aa04"
      width="100%"
      height="800px"
      frameborder="0"
      allowfullscreen
    )
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
#app {
  text-align: center;
}

iframe {
  border: none;
}
</style>

src/components/NotionEmbed.vue 的範例程式碼

NotionEmbed.vue 使用 Pug 語法：

<template lang="pug">
  .notion-embed
    iframe(
      src="https://galacticproject.notion.site/a0a32d5d4ddf43b28ae6a73c073e1c8c?v=72e87b01f9844b849d442458fe46aa04"
      width="100%"
      height="800px"
      frameborder="0"
      allowfullscreen
    )
</template>

<script>
export default {
  name: 'NotionEmbed',
};
</script>

<style>
.notion-embed iframe {
  border: none;
}
</style>

在 App.vue 中使用 NotionEmbed 組件

<template lang="pug">
  #app
    h1 嵌入 Notion 網頁
    NotionEmbed
</template>

<script>
import NotionEmbed from './components/NotionEmbed.vue';

export default {
  name: 'App',
  components: {
    NotionEmbed,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

以上是將 Vue 項目中嵌入 Notion 網頁的範例程式碼改寫為 Pug 語法的版本。如果有任何進一步的問題或需要更多的幫助，請隨時告訴我！

[bestian]

@leechiuhui 我試過iframe了, Noion不允許站外嵌入, GPT應該是不知道這件事所以生成了錯誤的回答。

我想可以改用超連結，新增一個"友站連結"頁面來處理

[leechiuhui]

Gemini Pro provided the answer. I have asked @ziaosen on Slack and will try again.

[bestian]

@leechiuhui

我之前用私訊和 @ziaosen 有聊過，他說官方嵌入 是一個付費服務. (不過再double check一下也是好的)

個人認為double check後如果還是需要付費的話, 是沒有必要為了"嵌入"來額外付費. 超連結的方式也是很好的.

有的時候我會想到一些點子，但那些點子不一定是最合適實作的. 請不必勉強實現. 💯

[leechiuhui]

Yes,sir.

[leechiuhui]

The private message! It seems that he might not mean that Notion needs to be paid… it seems he said a third party need to be paid😶‍🌫️

[leechiuhui]

YES!成功了

[leechiuhui]

However, after taking a closer look, I realized that what I thought was free will actually expire after 7 days. 🫠

I'll let it sit for a few days and think about it again on Friday.

[bestian]

I think we can use hyper-reference instead of iframe embed .

[leechiuhui]

Certainly, teacher. Will remove it and change it to a hyperlink. Simply enjoy trying new things I haven't experienced before.