---
title: "Web 前端 - 一紙忘憂"
canonical_url: "https://www.ikxin.com/zh-tw/category/web"
locale: zh-tw
meta:
  "og:title": "Web 前端"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# Web 前端

## [在 GitHub 團隊專案中白嫖 Vercel 的免費服務](https://www.ikxin.com/zh-tw/article/vercel-team-free)

Vercel 是一個提供 Serverless 服務的平台，特別適合代理靜態頁面或建立簡單的 API。其免費方案對個人專案非常友善，尤其是在中國地區擁有良好的 CDN 支援。然而，對於託管在 GitHub 組織下的專案，Vercel 通常要

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2024.11.2523576 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/vercel-team-free#comments)

[Vercel](https://www.ikxin.com/zh-tw/tag/vercel)

[![HTML Video 在 Vue.js 中消失的 muted 屬性](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/uploads/2024/03/22/65fd9a4b7d41f.png)](https://www.ikxin.com/zh-tw/article/vue-muted-attribute)

## [HTML Video 在 Vue.js 中消失的 muted 屬性](https://www.ikxin.com/zh-tw/article/vue-muted-attribute)

公司有個新專案由我這邊獨立選型開發，專案需求是做一個英文的產品展示官網，考慮到專案比較簡單且週期不長，最終決定使用 Nuxt 框架來進行開發。 開發過程還算順利，但中途遇到一個 Bug 花了我不少的時間，在網上找了許久，僅能檢索到極少數相關

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2024.03.234852 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/vue-muted-attribute#comments)

[Vue.js](https://www.ikxin.com/zh-tw/tag/vuejs) [ Nuxt](https://www.ikxin.com/zh-tw/tag/nuxt)

[![konva.js 阻止 click 點擊事件冒泡到父元素](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/29/6423ea1d7d571.png)](https://www.ikxin.com/zh-tw/article/konva-click-bubbling)

## [konva.js 阻止 click 點擊事件冒泡到父元素](https://www.ikxin.com/zh-tw/article/konva-click-bubbling)

在 KonvaJS 中，事件冒泡是預設啟用的，這意味著當在子元素上觸發事件時，該事件將向上傳播到父元素。因此，如果在圖層上註冊了 click 事件並在其上建立了一個群組，那麼單擊該群組也將觸發該事件。 KonvaJS 並沒有 stopPro

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2023.03.295518 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/konva-click-bubbling#comments)

[Canvas](https://www.ikxin.com/zh-tw/tag/canvas)

[![Vue.js 中的 v-model 和 model-value 響應式區別](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2023/03/28/64229c4ad0677.png)](https://www.ikxin.com/zh-tw/article/vue-model-reactivity)

## [Vue.js 中的 v-model 和 model-value 響應式區別](https://www.ikxin.com/zh-tw/article/vue-model-reactivity)

Vue.js 中的 v-model 和 model-value 都是用於實現表單資料雙向繫結的指令。 v-model 是 Vue.js 提供的一種語法糖，可以讓開發者在模板中更方便地實現表單資料的雙向繫結。當在一個表單元素上使用 v-mod

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2023.03.285232 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/vue-model-reactivity#comments)

[Vue.js](https://www.ikxin.com/zh-tw/tag/vuejs)

[![Git Commit Message 程式碼約定式提交規範](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2022/05/19/62862f9890969.png)](https://www.ikxin.com/zh-tw/article/git-commit-conventions)

## [Git Commit Message 程式碼約定式提交規範](https://www.ikxin.com/zh-tw/article/git-commit-conventions)

上個月公司來了一位前端大佬，為我們團隊制訂了一些技術方面的規範，其中有一項是關於在 Git 上提交程式碼時撰寫 Commit Message 的一些規範。開始我還覺得多此一舉，看了許多大型專案的 Commit 紀錄之後，才知道這個規範算是業

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2022.05.195386 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/git-commit-conventions#comments)

[Git](https://www.ikxin.com/zh-tw/tag/git)

## [jQuery 線上生成 t.cn 新浪短網址單頁版小工具](https://www.ikxin.com/zh-tw/article/jquery-sina-shorturl-tool)

最近在學習 Ajax 技術，所以就經常會寫一些小 Demo 出來，比如上次寫的「jQuery 線上取得 QQ 名稱和頭像」，今天我帶來的也是一個 Ajax 專案，主要功能是線上生成 t.cn 的新浪短網址，我看過網路上很多的壓縮網址，都是需

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.08.106745 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/jquery-sina-shorturl-tool#comments)

[jQuery](https://www.ikxin.com/zh-tw/tag/jquery) [ 短网址](https://www.ikxin.com/zh-tw/tag/short-url) [ AJAX](https://www.ikxin.com/zh-tw/tag/ajax)

[![美化 WordPress 後台的登入頁面](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/27/5d14d6a46336d.jpg)](https://www.ikxin.com/zh-tw/article/wordpress-admin-login)

## [美化 WordPress 後台的登入頁面](https://www.ikxin.com/zh-tw/article/wordpress-admin-login)

有沒有很多人都和我一樣，覺得 WordPress 預設的後台登入頁面太醜了？強迫症的我當然受不了，於是就四處尋找修改後台登入頁面的外掛。 後來想了下，為了改一個頁面就使用外掛會不會太大材小用了，所以我就想著利用 CSS 來實現修改後台登入頁

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.08.055661 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/wordpress-admin-login#comments)

[WordPress](https://www.ikxin.com/zh-tw/tag/wordpress) [ CSS](https://www.ikxin.com/zh-tw/tag/css) [ 美化](https://www.ikxin.com/zh-tw/tag/beautify)

## [jQuery 線上取得 QQ 名稱和 QQ 頭像連結](https://www.ikxin.com/zh-tw/article/jquery-qq-profile)

昨天群裡有人問到 Dux 主題的評論處輸入 QQ 號直接取得名稱和頭像是怎麼實現的，我看了一下 Dux 主題，發現並沒有整合這個功能，倒是 Emlog 的 Dux 主題內建了這個功能，本來想移植過來 WordPress 的，但是發現 Eml

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.265239 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/jquery-qq-profile#comments)

[jQuery](https://www.ikxin.com/zh-tw/tag/jquery) [ QQ](https://www.ikxin.com/zh-tw/tag/qq) [ 头像](https://www.ikxin.com/zh-tw/tag/avatar)

[![線上壓縮解壓 HTML、JavaScript、CSS 等原始碼](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11e3fe93731.png)](https://www.ikxin.com/zh-tw/article/html-js-css-tools)

## [線上壓縮解壓 HTML、JavaScript、CSS 等原始碼](https://www.ikxin.com/zh-tw/article/html-js-css-tools)

前幾天本站發布了一個 HTML 線上執行的工具，來幫助大家學習前端 HTML，今天我繼續發布三個非常實用的小工具，分別是 HTML、JavaScript、CSS 的壓縮與解壓工具，可以幫助大家更好地優化自己的網站哦，示意圖在下方。 HTML

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.256856 人瀏覽 [1 則評論](https://www.ikxin.com/zh-tw/article/html-js-css-tools#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html) [ JavaScript](https://www.ikxin.com/zh-tw/tag/javascript)

[![jQuery 實作一個簡單的網頁背景顏色漸變](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11b0434fb46.jpg)](https://www.ikxin.com/zh-tw/article/jquery-background-gradient)

## [jQuery 實作一個簡單的網頁背景顏色漸變](https://www.ikxin.com/zh-tw/article/jquery-background-gradient)

今天在折騰網頁背景的時候，把整個網站都弄成透明的了，這樣一來就可以弄一個動態的背景。我首先想到了 CSS + jQuery，可是瞎搞了許久才發現沒法和知更鳥主題相容，兩者必須捨棄一個，我自然是放棄了背景。 然後想了下，還是把做好的背景發出來

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.248425 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/jquery-background-gradient#comments)

[jQuery](https://www.ikxin.com/zh-tw/tag/jquery)

[![網頁特殊字串 HTML 代碼大全](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11df0350d2e.png)](https://www.ikxin.com/zh-tw/article/html-special-characters)

## [網頁特殊字串 HTML 代碼大全](https://www.ikxin.com/zh-tw/article/html-special-characters)

在編寫網頁 HTML 時，經常會需要用到一些特殊字元。這些字元往往無法直接透過鍵盤輸入，所以我們需要使用對應的 HTML 實體代碼。這些代碼在 HTML 手冊中都有記載，但查閱起來並不方便。 為了方便自己和大家寫網頁時快速找到需要的字元代碼

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.195279 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/html-special-characters#comments)

[HTML](https://www.ikxin.com/zh-tw/tag/html)

[![「本站首發」線上執行靜態 HTML 工具站](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11de54d7581.png)](https://www.ikxin.com/zh-tw/article/online-html-tools)

## [「本站首發」線上執行靜態 HTML 工具站](https://www.ikxin.com/zh-tw/article/online-html-tools)

學習前端時，經常需要執行一些測試程式碼。當時我大多使用一些線上工具，比如 Chinaz 的站長工具。現在前端技術學得差不多了，於是決定自己動手寫一個線上執行工具，幫助更多人更方便地學習前端程式設計。下面是工具的示意圖： 關於 LOGO：目前

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.184507 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/online-html-tools#comments)

[HTML](https://www.ikxin.com/zh-tw/tag/html)

[![使用純 HTML 5 + CSS 3 繪出 iPhone 6 手機模型](https://www.ikxin.com/_ipx/f_webp&s_448x314/https://img.8b5.cn/2019/06/25/5d11dac82c0e0.png)](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model)

## [使用純 HTML 5 + CSS 3 繪出 iPhone 6 手機模型](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model)

在 B 站看到一個 HTML5 作品，是利用純程式碼來繪出 iPhone 的渲染圖，覺得挺有意思的，就發出來給小夥伴們也參考參考，下面先來張效果圖： 差不多快 60 行的程式碼，也不到 60 行，純程式碼寫的，沒有用一張圖片素材，包括電池圖

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.114316 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/html-css-iphone6-model#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html)

## [CSS 實現自訂瀏覽器捲軸樣式](https://www.ikxin.com/zh-tw/article/css-scrollbar-styling)

今天訪問憧憬部落格時，發現他的網站瀏覽器預設側邊捲軸被修改成了自訂樣式。後來上網查詢了一下，得知該樣式可以透過 CSS 來設計。於是我自己搗鼓了一下，順便把 CSS 程式碼借了過來，本網站已經用上了，效果大家可以自己看看。 注意： 該樣式僅

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.07.084421 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/css-scrollbar-styling#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css)

## [網頁添加累計運行時間 JavaScript 程式碼](https://www.ikxin.com/zh-tw/article/javascript-uptime-timer)

本站成立差不多二十天了，時間不算太長，畢竟才是剛剛開始，於是我就想著寫個線上計時器來給網站記錄已運行的時間。廢話少說，直接開始吧。 首先我想到了用 JavaScript 來定義時間，然後再用 HTML 輸出。最麻煩的主要還是時間計算問題。下

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.06.077271 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/javascript-uptime-timer#comments)

## [「防君子不防小人」停用瀏覽器檢視網頁 HTML 原始碼](https://www.ikxin.com/zh-tw/article/disable-view-source-code)

有時候我們架設了一個簡單的 HTML 網站，又不想讓別人看到網頁的原始碼，這時候我們就要用到程式碼來禁止別人檢視 HTML 程式碼，我們先分析一下別人是怎麼檢視網頁原始碼的吧。 一般我們都知道，透過瀏覽器當你開啟一個網頁的時候，等網頁完全載

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.05.265924 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/disable-view-source-code#comments)

[HTML](https://www.ikxin.com/zh-tw/tag/html)

## [「悼念」將整個網站頁面變成黑白兩色](https://www.ikxin.com/zh-tw/article/website-black-white)

記得去年知名歌手喬任梁去世的時候，百度圖片破天荒地給他搞了個黑白網頁，使得所有使用者在百度圖片搜尋喬任梁的時候都是顯示全站黑白的，對於一些需要悼念的日子，很多人也都想把自己的網站弄成全站黑白來表示自己的哀悼之情。 下面我就附上開啟全站黑白的

[Web 前端](https://www.ikxin.com/zh-tw/category/web) 2017.05.227415 人瀏覽 [0 則評論](https://www.ikxin.com/zh-tw/article/website-black-white#comments)

[CSS](https://www.ikxin.com/zh-tw/tag/css) [ HTML](https://www.ikxin.com/zh-tw/tag/html)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/zh-tw#website","@type":"WebSite","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","inLanguage":"zh-TW","name":"一紙忘憂","url":"https://www.ikxin.com/zh-tw","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/zh-tw/category/web#webpage","@type":"WebPage","description":"一紙忘憂的個人網站，關於技術探索與日常生活，記錄 Web 開發、後端與 DevOps 實踐，分享軟體工具、數位體驗，以及程式碼之外的見聞與思考。","name":"Web 前端","url":"https://www.ikxin.com/zh-tw/category/web","isPartOf":{"@id":"https://www.ikxin.com/zh-tw#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/zh-tw/category/web"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.