分類: 網頁

單機 xampp 建立 ssl https連線方式

# Step1 產生一組沒有加密的 2048 bits 私密金鑰（PK: Private Key）
openssl genrsa -out server.key 2048

# Step2 產生憑證簽署請求（CSR: Certificate Signing Request）
# /C=Country 國別 
# /ST=State 州
# /L=Location 地區
# /O=Organization 組織
# /OU=Organizational Unit 組織部門單位
# /CN=Common Name 網域名稱
openssl req -sha512 -new -key server.key -out server.csr -subj "/C=TW/ST=Taipei/L=Taipei/O=example/OU=Personal/CN=www.example.com"

# Step3 檢查 CSR，列出請求內部資料（可省略）
openssl req -in server.csr -noout -text

# Step4 建立自我簽署的憑證（Self-Sign Certificate）
openssl x509 -sha512 -req -days 3650 -in server.csr -signkey server.key -out server.crt

 
 

資料來源: 如何建立 OpenSSL Self-Sign Certificate https://dev.twsiyuan.com/2016/01/self-sign-certificate.html

使用AI 製作 互動式 網站製作需求收集 遊戲

心血來潮 做一個需求收集 網站製作需求 的 互動小遊戲
確實感覺到 雖然不盡完美 但十分可怕的AI智能

https://need.98goto.com/

google antigravity gemini3 好威猛阿.. 看來又要好好學習一番了
目前看起來並不會輸 gemini cli 裡面整合了版控 補足了 cli 的短版
給這個IDE評價 增高中…很期待下一版 版面語言的問題能在處理得更好 目前摸索功能有點苦手

#google #antigravity #gemini #小毛網站

微型網站架設選擇 Cloudflare Pages

微型網站架設選擇 Cloudflare Pages

在偶然的狀況下 測試了 Cloudflare Pages

用於架設不須資料庫的 微型網站 是可考慮的 但也有其缺點 像是無法使用FTP等

亮點:
1.有 gitHub 可以連接做版控
2.也可選擇檔案直接丟上來
3.可以設定自己的域名
4.有SSL

這是 測試的範例 freepagetest.98goto.com 後面再來使用AI(gemini cli) 來做個簡易界面試試

gemini cli 使用 Chrome Dev Tools (MCP) 控制 chrome瀏覽器

本次測試了使用 gemini cli 的 mcp 功能 來控制 chrome 瀏覽器 閱讀 與 debug 輸入 等功能 效果驚人

安裝需求:
node.js 22 up
google chrome

github:
https://github.com/ChromeDevTools/chrome-devtools-mcp

閱讀全文〈gemini cli 使用 Chrome Dev Tools (MCP) 控制 chrome瀏覽器〉

[轉貼]使用 .htaccess 實現 Redirect 301/302 重定向轉址規則

如何重定向（301 Redirect）整個網站／網域到另一個新的網站／網域？

Redirect 301 / https://newsite.com/

如何重定向（301 Redirect）子目錄到另一個新的網站？

Redirect 301 /subfolder https://newsite.com/

.htaccess 能夠幫助我們透過簡單的幾行程式碼，就能輕鬆的寫入  Redirect 規則，實現 301 或 302 的轉址，讓老舊的網址能夠自動跳轉至指定的新網址，不怕讓使用者看到錯誤畫面而造成使用者體驗不佳的情況了。

內容出處: 使用 .htaccess 實現 Redirect 301/302 重定向轉址規則 – TechMoon 科技月球

使用 Bootstrap 3/Bootstrap 4 顯示/隱藏 HTML 元素

 

BS3 BS4
visible-xs d-block d-sm-none
visible-sm d-none d-sm-block d-md-none
visible-md d-none d-md-block d-lg-none
visible-lg d-none d-lg-block d-xl-none
visible-xl d-none d-xl-block
hidden-xs d-none d-sm-bloc
hidden-sm d-block d-sm-none d-md-block
hidden-md d-block d-md-none d-lg-block
hidden-lg d-block d-lg-none d-xl-block
hidden-xl d-block d-xl-none
BS4
d-none d-sm-block
d-none d-md-block
d-none d-lg-block
d-none d-xl-block
d-none
d-sm-none
d-md-none
d-lg-none
d-xl-none

 

使用 Bootstrap 4 顯示/隱藏 HTML 元素

內容出處: 使用 Bootstrap 4 顯示/隱藏 HTML 元素

工作效率提升 – 使用 google 試算表 結合 chatGPT生產大量文案 結合 FB API 自動發佈文章排程

這篇文章比較硬一些 主要是因為會需要動手與了解程式運作 但整體能不去操作 可怕的FB排程發文介面已經很感動不已 因為在大量排文章時 絕對能理解有多痛苦

使用這工具教學 最大的好處在於 效率的提升 只是想要把資料 發出去 卻想不到 該怎麼做些引詞 這時候 就是 chatGPT的強項 透過 API的方式 讓其運作 效率驚人(20美金網頁版的 還要等他慢慢跑 但 這API版本 甚至是10幾條一起同步運作)

閱讀全文〈工作效率提升 – 使用 google 試算表 結合 chatGPT生產大量文案 結合 FB API 自動發佈文章排程〉

 Base64String 圖像在 fancybox 打開

<a href="#myBase64String" class="fancybox" rel="group">
  <img src="data:image/jpg;base64,@Convert.ToBase64String(Model.Image)" alt="" id="myBase64String" />
</a>

$('[data-fancybox="images"]').fancybox({
  beforeLoad : function(instance, current) {
    if (current.src=== '#') {
    current.src = current.opts.$orig.find('img').attr('src');
    }
  }
});

內容出處: jquery – Fancybox Base64String image disappears when fancybox opens – Stack Overflow

[轉貼]清除 LINE 快取，強制重新抓取分享連結縮圖與文字

如果抓取錯誤或頁面有更新，臉書提供了一個除錯平台，只需輸入網址，系統就會重新抓取頁面中的資料。

連結網址：https://poker.line.naver.jp/

閱讀全文〈[轉貼]清除 LINE 快取，強制重新抓取分享連結縮圖與文字〉

[轉貼]Vectorizer.AI – 將你的圖片轉為向量檔，可無限放大變超清晰

阿湯哥 介紹的這個工具 感覺真的利害威猛了 快點記錄下來 分享給大家

Vectorizer.AI – 將你的圖片轉為向量檔，可無限放大變超清晰

內容出處: Vectorizer.AI – 將你的圖片轉為向量檔，可無限放大變超清晰 | 就是教不落 – 給你最豐富的 3C 資訊、教學網站

[轉貼]如何讓 ChatGPT 產生「圖文並茂」的內容？ | 就是教不落 – 給你最豐富的 3C 資訊、教學網站

比如像這樣，在要顯示圖片時，只要加入以下指令即可：

顯示圖片請透過 markdown 語法 (https://source.unsplash.com/960x640/?<關鍵詞>)

你看，這樣就可以搭配圖片顯示了，雖然不見得全部的圖片都會搭配的很好，但也有個七、八成，你再依需求去修改調整就好。

很多人在使用 ChatGPT 時，以為他就是單純的文字聊天機器人，但其實只是我們沒有用對方式來讓他可以顯示圖片

內容出處: 如何讓 ChatGPT 產生「圖文並茂」的內容？ | 就是教不落 – 給你最豐富的 3C 資訊、教學網站

[Bootstrap 3] 格狀系統 Grid System

其中xs代表裝置寬度小於768px(手機裝置)，
sm代表大於768px且小於992px(平板)，
md代表大於992px且小於1200px(筆電)，
lg代表大於1200px(外接螢幕,桌機)。

其中xs代表裝置寬度小魚768px(手機裝置)，sm代表大於768px且小於992px(平板)，md代表大於992px且小於1200px(筆電)，lg代表大於1200px(外接螢幕)。

內容出處: [Bootstrap 3] 格狀系統 Grid System

WordPress 後台 wp-admin 無限循環 https 302重定向 或 cloudflare 無限循環 301 的解决方法

wp-config.php 增加

$_SERVER['HTTPS'] = 'on';
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

 

如果有使用 cloudflare ssl 要設定

內容出處: WordPress登录后台wp-admin无限循环https 302重定向的解决方法 − 生活的美

[轉貼]【2021】Woocommerce 教學，不懂程式照樣自架電商網站 | WebLai

WP + Woocommerce 購物車 製作方式

你想架設一個品牌電商網站，但卻不知如何開始嗎？沒有足夠的預算請工程師架設，想要嘗試自己架看看嗎？這篇文章，主要是幫助那些跟我以前一樣，完全不懂程式碼的網路新手，透過 WordPress 上的 Woocommerce 電子商務外掛系統，來架出一個屬於自己的品牌電商網站。

內容出處: 【2021】Woocommerce 教學，不懂程式照樣自架電商網站 | WebLai