定義 ::before 原本的元素[之前]加 入內容 ::after 原本的元素[之後]加 入內容 使用方式 使用時，需要加上content 才能使用 產生出來虛擬元素為inline特性。無法控制寬、高、行距 有關SEO內容，不應該放在content內 content:搜尋引擎找不倒裡面的文字 可以減少HTML標籤數量，相對也加重瀏覽器的渲染區塊 偽元素123456789101112131415161718192021@charset "UTF-8";.box { background-color: yellowgreen; width: 500px; padding: 15px; margin-left: auto; margin-right: auto;}.box::before { content: "我是 before"; background-color: pink; display: block;}.box::after { content: "我是 after" ...

前言近期與友人提到前後端定位後，發現友人對於前端的認知不是很清楚，因此我就想要寫一篇文章來介紹一下前端的基本知識，讓大家對於前端有一個基本的認知。 甚麼是前端？前端是指網頁的前端，也就是網頁的使用者介面，包含了網頁的內容、結構和外觀等等，主要是使用 HTML、CSS 和 JavaScript 來實現。 前端有工作有以下幾種： 前端設計師 (UI / UX/ RWD) 前端工程師 (實現畫面、多複雜功能、排版等) 依據工作內容定義上還是有落差，也可以稍微專注 104 資訊上的職缺，來了解前端工程師的工作內容。 網站三兄弟網站的前端主要由三種技術組成，分別是 HTML、CSS 和 JavaScript，這三種技術各司其職，共同組成了一個完整的網站。 1. HTMLHTML 是 HyperText Markup Language 的縮寫，中文翻譯為超文本標記語言，是一種用於建立網頁的標準標記語言，它描述了網頁的結構，並且使用標籤來標示網頁上的不同內容，包括 元素(Elements)、標籤(Tag)、內容(Content)，例如標題、段落、表格、圖片等等。 2. C ...

前言近期為了要解決終端機的問題，因為 VSC 讀出來的OhMyPosh的字體都是亂碼，所以我就想說要解決這個問題，所以就找到了解決方案，這邊就紀錄一下。 相關文章 : https://blog.miniasp.com/post/2021/11/24/PowerShell-prompt-with-Oh-My-Posh-and-Windows-Terminal 亂碼原因從保哥的文章中，可以看到原因是因為字體的問題，原初是使用指令方式下載字體，實際上沒有到字體的地方，所以就會出現亂碼的問題。 解決方式從Github 社群上已經有人提供了解決方式，可以用這裡的下載點下載字體。 [Caskaydia NF](/upload/zip/Caskaydia Cove Nerd Font Complete Windows Compatible Regular.otf) Github Issue 若按裝好字體後與下圖一樣動作即可，就可以解決亂碼問題了。

前言近期有重新為新電腦安裝環境，發現終端機字體不是很好看，所以就想要修改一下，這邊紀錄一下修改的過程。紀錄部分主要是稍微抱怨終端機設定外觀位置，因為他有兩個設定外觀的位置，因此預防忘記還是紀錄一下。 一、修改字體本文是用最新版本的終端機來改變字體，所以如果你的終端機版本不是最新的，請先更新一下。 1-1 安裝字體輸入以下指令，安裝字體並且要按裝到 OhMyPosh，主要要讓終端機可以顯示小icon。 12winget install JanDeDobbeleer.OhMyPoshoh-my-posh.exe font install CascadiaCode 1-2 解決方式 1-3 補充 - 移除PowerShell Logo只要輸入在捷徑或是設定檔案的路徑後面加上 -nologo 就可以移除PowerShell Logo了。

前言過去幾個專案在執行時，有時候 API 格式規劃、調整、修改必須要有一個統性規劃，也是新手在開發時常常會忽略的部分，因此這篇主要是紀錄一下 ResultFilter 的使用方式。 參考文件 ASP.NET Core 中的結果過濾器 ASP.NET Core Web API 入門教學(13_5) - ResultFilter 之統一回傳格式紀錄 補充需要學習進階 API 使用方式，可以參考上方文章、影片會有所幫助。 何謂 ResultFilterResultFilter 是一個可以在執行結果前、後進行處理的過濾器，主要是透過 OnResultExecuting、OnResultExecuted 來進行處理，以下為官方文件範例。 123456789101112public class SampleResultFilterAttribute : Attribute, IResultFilter{ public void OnResultExecuting(ResultExecutingContext context) { // Do som ...

一、前言最近幾個月使用 github coplit 來練習 react ，順便紀錄 react 的學習過程，這篇主要是使用 api 方式加入 routes。 二、使用 api 方式加入 routes2-1 加入 API 調用在 App.js 中加入 API 調用，並將獲取的數據設置到狀態中。以下為資料庫結構 123456789[ { "id": 1, "name": "首頁", "path": "/", "importAt": "Template/Home", "icon": "fas fa-home" }] 以上目的是為了抓取 import 的路徑，並且將資料庫的資料設置到狀態中，以便後續使用。接著用從 API 取得資料即可。 12345678const [routesData, setRoutesData] = useState([]);useEf ...

一、前言近期已經完成 WebJob 章節，後續衍生一些問題是 Azure WebJob 排程上的問題一直沒有執行成功，利用最簡單方式 CI/CD 來解決這個問題。 1-1. 期初想法第一次使用 CICD 會有幾個想法。 動作 : CICD 可以編譯、發佈、測試、部署、排程、通知等等。可以把所有事情都做完，非常符合我的需求。 定時/手動 : CICD 是可以定時執行，也可以手動執行，非常方便。 環境 : CICD 可以在不同環境執行，例如：測試、正式、開發等等。 Git 選擇 : Github 必定是首選。光 Actions 額度、便利性、社群、擴充性等等都是首選。 二、Github Action前幾篇有提到 Actions 實作方式，這裡就用最簡單方式來實作排程。需要步驟如下 : 手動/定時執行 : 手動排程可以直接點選執行，定時排程可以設定排程時間。當功能異常可以利用手動排程來執行。 環境 : 因為我使用的是 .NET CORE 可以用 linux 減少建置、執行時間。 執行動作 : 動作需要安裝Nuget、建置、執行 2-1 手動/ ...

前置作業完成下方指令已可繼續本章節。 123docker pull httpddocker create -p 8080:80 --name web -i httpddocker start web 進入 Container 內 Cli12docker ps -a #看狀態 docker exec -it web bash 修改 index.html 內容123456#找到 htdocs內的index.htmlcat htdocs/index.html## 修改index.html內容echo Hello world - Docker > htdocs/index.html && exit 離開後直接開啟 http://localhost:8080/ 即可看到效果，如果看不到效果請再重新整理container。

使用 httpd這邊使用上篇使用方式設定port。步驟如下 創建 images1docker pull httpd 創建 Container 環境這裡需要留意 -p 、--publish兩個參數可以使用，都是設定port forwarding。 host 8080連線後，會直接轉到Container 中的 80 port。12```cmddocker create -p 8080:80 --name web -i httpd 稍微補充資訊，像是沒有特別指定 port 參數是不會有預設port ，如下圖顯示。 執行畫面start沒有設定port參數，所以需要從 Container 設定 ，啟動後就可以使用 httpd畫面 1docker start web 刪除背景程式httpd 執行後會以背景程式方式執行，如果想要直接結束作業必須要使用 -f參數，如下指令。 1docker rm -f web

一、加解密基礎概念當我們談論加解密時，我們實際上是在討論一種數學和計算概念，其目的是保護資訊的機密性和完整性。加解密是資訊安全的基石，它們用於在傳輸或存儲資訊時將其保護起來，使得未經授權的人無法存取或理解其內容。 加密 (Encryption):加密是將原始資訊轉換成不可讀的形式的過程，以保護資訊的隱私。這通常涉及使用密鑰（key）來對資訊進行數學運算，從而產生看似雜亂無章的資料，即密文。常見的加密算法包括對稱加密和非對稱加密。 對稱加密 (Symmetric Encryption):在對稱加密中，相同的密鑰用於加密和解密資訊。這意味著發送和接收方都必須共享相同的密鑰。AES（Advanced Encryption Standard）是一個廣泛使用的對稱加密算法。 例如，當Alice想要發送一個加密的訊息給Bob時，她將使用共享的密鑰對訊息進行加密。Bob將使用相同的密鑰對接收到的密文進行解密，以恢復原始的訊息。 非對稱加密 (Asymmetric Encryption):在非對稱加密中，有一對密鑰：公開金鑰和私密金鑰。發送方使用接收方的公開金鑰來加密資訊，而接收方使用他們的私密 ...