---
# System prepended metadata

title: News article page study
tags: [UX / UI]

---

## News article page study

> 5GIOTLEAD Official site new feature, NEWS article page
> 

### IDEAS
- **Time zone** in the Beginning of cotent
    - e.g. ![截圖 2025-02-04 下午1.35.57](https://hackmd.io/_uploads/rkTBPXyYye.png)
- "**Back**" to NEWS list at the bottom of the page
    - for users who have finished reading the article
- **Reading time**
- **Share button***
    - [x]    share to linkedin, X(twitter),Facebook 
        - 分享後自動顯示貼文內容 “ I found this interesting news on 5GIOTLEAD Technology's official website! ” 、“我在捷智康科技的官網看到這篇有趣的新聞！”
    -   ENG version embed code
![截圖 2025-02-05 下午4.26.40](https://hackmd.io/_uploads/S1F8MolY1g.png)
將該英文版文章網址嵌入“YOUR_ARTICLE_URL”即可。
    ``` <!-- Facebook Share -->
    <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_ARTICLE_URL&quote=I found this interesting news on 5GIOTLEAD Technology's official website!" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/733/733547.png" alt="Facebook" width="30">
    </a>

    <!-- X (Twitter) Share -->
    <a href="https://twitter.com/intent/tweet?url=YOUR_ARTICLE_URL&text=I found this interesting news on 5GIOTLEAD Technology's official website!" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/733/733579.png" alt="Twitter" width="30">
    </a>

    <!-- LinkedIn Share -->
    <a href="https://www.linkedin.com/shareArticle?mini=true&url=YOUR_ARTICLE_URL&title=I found this interesting news on 5GIOTLEAD Technology's official website!" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/145/145807.png" alt="LinkedIn" width="30">
    </a>
    ```
    - 中文版 embed code
    ![截圖 2025-02-05 下午4.47.53](https://hackmd.io/_uploads/H1QCSjetJl.png)
    將該中文版文章網址嵌入“YOUR_ARTICLE_URL”即可。
    ``` <!-- Facebook 分享 -->
    <a href="https://www.facebook.com/sharer/sharer.php?u=YOUR_ARTICLE_URL&quote=我在捷智康科技的官網看到這篇有趣的新聞！" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/733/733547.png" alt="Facebook" width="30">
    </a>

    <!-- X (Twitter) 分享 -->
    <a href="https://twitter.com/intent/tweet?url=YOUR_ARTICLE_URL&text=我在捷智康科技的官網看到這篇有趣的新聞！" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/733/733579.png" alt="Twitter" width="30">
    </a>

    <!-- LinkedIn 分享 -->
    <a href="https://www.linkedin.com/shareArticle?mini=true&url=YOUR_ARTICLE_URL&title=我在捷智康科技的官網看到這篇有趣的新聞！" target="_blank">
        <img src="https://cdn-icons-png.flaticon.com/64/145/145807.png" alt="LinkedIn" width="30">
    </a>
    ```
    - **僅有X (Twitter)能自動在發佈文章時呈現自訂文字的原因：**
        - Facebook & LinkedIn → 需要 在網站 HTML 加入 Open Graph Metadata，才能顯示正確的標題與描述。
        - X (Twitter) → 可以直接透過 text 參數顯示自訂文字。
        - 但 Google Sites 的限制 → 你無法修改 Open Graph Metadata，除非你的文章託管在 其他支援 Open Graph 的網站。
        如果你的文章是直接放在 Google Sites，而不是一個可自訂 HTML <head> 的網站，所以 Facebook 和 LinkedIn 分享時只能顯示 Google Sites 自動抓取的標題與內容，無法強制修改顯示文字。 by GPT-4-turbo

- 

## UX/UI Ref.
- https://www.deltaww.com/en-us/news/39547
- https://blogs.nvidia.com/blog/hyundai-motor-group-ces/
- Wonderful& lil dynamic motions https://www.apple.com/newsroom/2025/01/apple-miami-worldcenter-opens-to-excited-customers-in-downtown-miami/
- https://www.ibm.com/new/announcements/announcing-the-integration-between-ibm-concert-and-instana-streamlining-application-observability-risk-and-resilience
- https://news.samsung.com/global/samsung-members-connect-2025-samsung-electronics-holds-exclusive-event-for-global-members-to-experience-galaxy-s25-series-firsthand

## Code
Written by GPT-4-turbo