by Rain Chu 12 月 24, 2021 | Chrome 外掛
用 YouTube 學英文，許多人應該都會先想到 VoiceTube ，不得不稱讚他，是個學習語言的好工具，但對我來說只能看上面他們提供的影片，我自己喜歡看的影片沒能有比較好的處理，所以會想到下載雙字幕的外掛軟體，在學習知識時候也學習語言，可以看看我自己的學習步驟。
先盲聽一遍，不看字幕，試著去理解內容，如果太難懂，我就會直接進入第二步 開啟雙字幕，外語和母語一起顯示，此時可以了解兩種語言的對照 關閉雙字幕，留下外語字幕，但細節有一些聽不懂時候，可以再複習一次 關閉所有的字幕，只用耳朵聽，訓練聽力 試用後，我要推薦 YouTube 雙字幕 和 CapTube (Dual Captions for YouTube)
YouTube™ 雙字幕
VIDEO
基本的功能-雙字幕顯示 介面高度整合到 YouTube 中，要選擇功能不用去找另外的選單 可以下載字幕 自訂字幕位置 自訂字幕的字型、外框、顏色等 有了自訂字型，我還可以用注音字型進去，可以讓小朋友看注音學習
CapTube (Dual Captions for YouTube)
支援雙字幕 可以自訂第三方的翻譯、例如:騰訊翻譯 DeepL翻譯 開源專案、OpenSource 在中國或是想用自己的翻譯的人以及 IT 高手很適合這套，不過缺點是需要自己申請翻譯的 API，或是自己寫寫程式碼
下載以及安裝
CapTube (Dual Captions for YouTube)
YouTube™ 雙字幕
追加看影片學英文的好幫手 – Language Reactor – Netflix也適用
這一套 Language Reactor 跟前面不一樣的部分是加強了學習的功能，安裝上去之後，介面會感覺像是 VoiceTube ，預設會把所有段落的字幕放在右側，可以點選想要看的字幕而去連動影片的播放，另外也可以針對單字選取以及查詢，也同時支援各個國家，像是華人常學的英文、韓文、日文、越南文、泰文等。
Netflix 影片的單字翻譯以及學習功能 設定功能選項 下載 Language Recator https://chrome.google.com/webstore/detail/language-reactor/hoombieeljmmljlkjmnheibnpciblicm/related
by Rain Chu 11 月 18, 2021 | PHP , woocommerce , wordpress
WooCommerce 預設安裝好會在結帳畫面中，出現「配送道不同的地址」的選項，並且預設是勾選起來的，常常有客戶需要把這個選項關閉，或是隱藏他，做法很多種，我這邊是以複製該 template 到自己的子佈景主題中，然後修改 PHP 的程式碼為主
先複製 wp-content/plugins/woocommerce/templates/checkout/form-shipping.php 到 wp-content/themes/[themes-child]/woocommerce/checkout/form-shipping.php
sudo cp /var/www/html/wp-content/plugins/woocommerce/templates/checkout/form-shipping.php /var/www/html/wp-content/themes/themes-child/woocommerce/checkout/form-shipping.php
2. 修改 form-shipping.php 的內容，將預設選項移除，以及將整個欄位隱藏
原先的程式碼如下
<h3 id="ship-to-different-address">
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input id="ship-to-different-address-checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 1 ); ?> type="checkbox" name="ship_to_different_address" value="1" /> <span><?php esc_html_e( 'Ship to a different address?', 'woocommerce' ); ?></span>
</label>
</h3> 修改後的程式碼如下
<h3 id="ship-to-different-address" style="display:none" >
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox checkbox">
<input id="ship-to-different-address-checkbox" class="woocommerce-form__input woocommerce-form__input-checkbox input-checkbox" <?php checked( apply_filters( 'woocommerce_ship_to_different_address_checked', 'shipping' === get_option( 'woocommerce_ship_to_destination' ) ? 1 : 0 ), 0 ); ?> type="checkbox" name="ship_to_different_address" value="0" /> <span><?php esc_html_e( 'Ship to a different address?', 'woocommerce' ); ?></span>
</label>
</h3> 其中在 <h3> tag 中，加入 style=”display:none” ，在 ‘shipping’ === get_option 中，把傳回的數值調整成0，代表預設不會勾選，這樣就可以隱藏運送到不同的地址的選項了
參考資料
by Rain Chu 11 月 18, 2021 | Nginx , PHP , Ubuntu , VSCODE
假設你已經在 Ubuntu 上安裝好了 Nginx 、 Php8.0、 VSCODE，那麼我們就可以專注在如何讓你的 VSCODE 可以對 PHP 除錯
先安裝 php-xdebug 套件 sudo apt install php-xdebug 對應 Php8.0 的環境下，會安裝對應不同 php 版本的 mods ，我的環境下安裝的是 PHP 8.1 版本，路徑是 /etc/php/8.1/mods-available/
2. 更改 xdebug.ini 的設定
sudo /etc/php/8.1/mods-available/xdebug.ini 3. 將 xdebug.ini 內容改成
zend_extension = xdebug.so
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_handler = dbgp
xdebug.remote_host = 172.17.0.1 ;指定vscode所在的IP
xdebug.remote_connect_back = 1 ;如果為1，則會忽略remote_host
xdebug.remote_port = 9000
xdebug.remote_log = "/var/log/xdebug.log" 4. 重新啟動服務
sudo systemctl start php8.0-fpm
sudo systemctl start nginx 5. 要讓 VSCODE 支援 PHP Debug ，要先安裝 php debug
6. 安裝完畢後，在 PHP 的專案目錄下要建立 launch.json 讓除錯器知道要連線到那裏
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
}
]
} 到這裡，就可以用你的 VSCODE 去除錯你的 PHP CODE 了
by Rain Chu 11 月 12, 2021 | PHP , woocommerce , wordpress
雖然說網路上開店最棒的優勢就是可以 24 x 7 的不間斷賺錢，但是如果是線下升級成線上的店家們，會需要配合公司政策，一天開店八小時，假日不開店或是配合結帳時間，月底不收單等
WooCommerce 實現關店的想法
建立關店時間表 依照時間表判斷是否要開店 關店的狀態是要把 WooCommerce 的訂單按鈕都關閉以及隱藏起來 顯示訊息告知使用者現在關店中 WordPress Plug or Themes PHP 撰寫
以下示範每個月25號到月底作帳時間內，不讓客戶下單的寫法
// 啟動商店的假日檔
add_action ('init', 'qqqtips_woocommerce_holiday_mode');
// Disable Cart, Checkout, Add Cart
// 將下單相關的按鈕都關閉
function qqqtips_woocommerce_holiday_mode() {
//remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
//remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
//remove_action( 'woocommerce_proceed_to_checkout', 'woocommerce_button_proceed_to_checkout', 20 );
//remove_action( 'woocommerce_checkout_order_review', 'woocommerce_checkout_payment', 20 );
add_filter( 'woocommerce_is_purchasable', '__return_false'); //
add_action( 'woocommerce_before_main_content', 'qqqtips_wc_shop_disabled', 5 );
add_action( 'woocommerce_before_cart', 'qqqtips_wc_shop_disabled', 5 );
add_action( 'woocommerce_before_checkout_form', 'qqqtips_wc_shop_disabled', 5 );
}
// Show Holiday Notice
// 每月25號關帳，次月1號打開
function qqqtips_wc_shop_disabled() {
$qqq_today = number_format(date('d'));
if( $qqq_today >= 25 && $qqq_today <= 31) {
wc_print_notice( '店家已經關帳，請下個月再來!', 'error');
}
} 參考資料
Open Close Store Hours for WooCommerce
相關文章
by Rain Chu 11 月 11, 2021 | VisualStudio , 程式
Visual Studio 2022 正式上市，新增功能介紹
在試用了將近半年的 Visual Studio 2022 Preview，終於等到了 Visual Studio 2022 正式版上市的這天，看了 Visual Studio 2022 的新功能 介紹，重點落於
Visual Studio IDE 執行程序改成 64 位元，意思是可以執行大型的程式，在也不用受限於 4GB 的限制了
IntelliCode 的更新，在 Visual Studio 2019 更新中有導入的 AI IntelliCode 在 Visual Studio 2022 變成預設，打些關鍵字按下 TAB 就可以讓 AI 接手完成後續的程式碼，大幅度的增加寫程式的速度
文字搜尋的速度，比起舊版本，快了 3 倍速度
原生支援 .NET 6 ，.NET 6 重寫了所有的 FileStream ，採用了動態PGO技術，C# 特別有感覺，以及.NET多平臺應用程式UI（Multi-platform App UI，MAUI），可以寫一次程式碼給桌面和行動裝置使用，.NET 6 效能大躍進
AI 時代來了，用語音寫程式，只要寫幾行程式，AI 機器人自動就幫你完成後面的 Code，這些都已經實現了，未來已經到來.
每三年一次改版，每次都有非常好的體驗，配合 .NET 6 的推出，效能又網上了不只一階，檔案存取的效率增加了15-30%，JSON Class 轉換的效率也有明顯的改善，Hot Reload in ASP.NET 和 C++，更好的支援 Linux 和 GitHub。
by Rain Chu 11 月 4, 2021 | Linux , MariaDB , Nginx , PHP , SERVER , wordpress , 資料庫
sudo apt update -y
sudo apt upgrade -y
安裝 Nginx
sudo apt install nginx -y
想要支援 fastcgi_cache purge module 的話，請改用下面的方法安裝 nginx
sudo add-apt-repository ppa:rtcamp/nginx
sudo apt-get update
sudo apt-get remove nginx*
sudo apt-get install nginx-full
可以用下面的指令，確認是否有安裝 fastcgi cache purge module
nginx -V 2>&1 | grep nginx-cache-purge -o
安裝完畢後可以啟用 nginx
sudo systemctl start nginx
sudo systemctl enable nginx
如果有啟用防火牆，記得要開啟相對應的PORT
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw reload
驗證以及測試一下是否正常
安裝以及設定 MariaDB
接下來可以安裝資料庫MariaDB
sudo apt install mariadb-server
sudo systemctl status mariadb
保護好你的資料庫，修改 root 密碼，以及移除用不到的帳戶以及資料表，和防止 root 遠端登入
sudo mysql_secure_installation
啟動 MariaDB Service
sudo systemctl start mariadb
sudo systemctl enable mariadb
為資料庫建立一個專用使用者，用來操作 wordpress db
sudo mysql -u root -p
MariaDB [(none)]> CREATE USER 'wordpressdbuser'@'localhost' IDENTIFIED BY 'password';
建立一個資料庫，以及一個資料庫的使用者(USER)，要給 wordpress 系統使用的
sudo mysql -u root -p
MariaDB [(none)]> CREATE DATABASE wordpress DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
MariaDB [(none)]> GRANT ALL ON wordpress.* TO 'wordpressdbuser'@'localhost' IDENTIFIED BY 'password';
MariaDB [(none)]> FLUSH PRIVILEGES;
設定完畢後退出 MariaDB 的介面
安裝 PHP 8.0
因為 php 8 較新，還沒包含在標準套件中，所以我們要新增 PHP 8 的軟體包
sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update
sudo apt upgrade
新增了PPA後，我們可以直接下指令安裝 PHP 8.0
驗證是否安裝正確
預設 php8.0 安裝完畢後會是支援 apache ，我們需要在安裝 PHP 8 FPM 讓他可以支援 Nginx
sudo apt install php8.0-fpm
安裝常用的 PHP 8.0 擴充套件，可以依照情況刪減
sudo apt install php8.0-common php8.0-mysql php8.0-xml php8.0-curl php8.0-gd php8.0-imagick php8.0-cli php8.0-dev php8.0-imap php8.0-mbstring php8.0-opcache php8.0-soap php8.0-zip -y
為 Nginx 設定 PHP 8
sudo nano /etc/php/8.0/fpm/php.ini
可以修改下列的預設數值，讓 PHP 可以運行得更好
upload_max_filesize = 32M
post_max_size = 48M
memory_limit = 256M
max_execution_time = 600
max_input_vars = 3000
max_input_time = 1000
修改完畢後存檔，並且重啟 PHP 8
sudo php-fpm8.0 -t
sudo service php8.0-fpm restart
2023-11 更新，官方推薦也可以安裝 8.2 版本
#安裝php8.2-fpm
sudo apt-get install php8.2-fpm -y
#安裝php8.2套件
sudo apt install php8.2-common php8.2-mysql php8.2-xml php8.2-curl php8.2-gd php8.2-imagick php8.2-cli php8.2-dev php8.2-imap php8.2-mbstring php8.2-opcache php8.2-soap php8.2-zip -y
#檢查PHP版本
php -v
安裝 wordpress
先下載wordpress，我安裝的版本是中文正體 wordpress 5.8.1，下載完畢後，解壓縮，並且放到你想要放的目錄下，本例是 /var/www/mysite
wget -c https://tw.wordpress.org/latest-zh_TW.zip
unzip latest-zh_TW.zip
sudo cp -R ./wordpress/* /var/www/mysite/
剛複製過去的權限會是 root 的權限，接下來用指令設置權限為 www-data
sudo chown -R www-data:www-data /var/www/mysite
sudo chmod -R 775 /var/www/mysite
在 Nginx 中建立 WordPress 的虛擬伺服器 (VirtualHost)
先刪除 Nginx 中的預設檔，然後建立一個自己的設定檔(.conf)
sudo rm /etc/nginx/sites-enabled/default
sudo rm /etc/nginx/sites-available/default
sudo nano /etc/nginx/sites-available/mysite.conf
mysite.conf 內容如下，mysite 的資訊要換成你自己的伺服器資訊
server {
listen 80;
listen [::]:80;
root /var/www/mysite.com;
index index.php index.html index.htm;
server_name mysite.com www.mysite.com;
error_log /var/log/nginx/mysite.com_error.log;
access_log /var/log/nginx/mysite.com_access.log;
client_max_body_size 100M;
location / {
try_files $uri $uri/ /index.php?$args;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
fastcgi_pass unix:/run/php/php8.0-fpm.sock;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
}
}
如果你是把 config 檔按放在 /etc/nginx/sites-available/ 下的話，要記得 ln (軟連結) config
sudo ln -sf /etc/nginx/sites-available/mysite.conf /etc/nginx/sites-enabled/mysite.conf
測試 Nginx ，成功的話就重啟伺服器
sudo nginx -t
sudo service nginx restart
透過瀏覽器安裝 WordPress
開啟瀏覽器，並且輸入 https://localhost/ 可以在本地端安裝 WordPress 系統
之後就大功告成了 多網站連結
可以使用另外建立一個 a config檔案，並且利用ln指令做連結
cd /etc/nginx/sites-enable/
sudo ln -s /etc/nginx/sites-available/a
參考資料：
https://tw511.com/a/01/23398.html
https://cn.linux-console.net/?p=1601
近期留言