simple f3 multi lang site

一個簡單的多語言網站，沒有脂肪

幾乎完整（儘管簡單）F3設置

使用Bootstrap 4帶有帶有無脂肪的PHP框架的簡單多語言網站的前端 /後端設置，但沒有數據庫。

概述

我希望PHP框架與Bootstrap 4一起使用來構建將：

• 使用模板組裝頁面
• 提供乾淨的URL
• 支持自動語言選擇
• 在共享服務器上工作
• 易於安裝（只需複制和粘貼，不需要包裝管理器）

我的選擇是無脂的 - “強大而易於使用的PHP微型框架”

為了確保我可以建立一個網站，我創建了一個網站；關於我如何使用引導和無脂肪來創建網站的網站。該網站是我所做的事情和原因的記錄。

這不是CMS。沒有數據庫。所有內容均在配置文件，控制器文件和內容模板中。

*注意：我在https://github.com/richdebourke/simple-f3-bootstrap-5-multi-lang-site上有一個類似的Bootstrap 5存儲庫。

演示

該存儲庫中的所有代碼都在http://sbf-testing.byethost7.com上運行。目的是使代碼成為一個完全可行的軟件包，而不僅僅是用於構建站點的裸露起點。該演示正在使用提供PHP和Apache的免費託管服務上運行，但是沒有電子郵件和大多數機器人被阻止，因此沒有聯繫表格，也沒有SSL ¹ （這就是為什麼我說“一個幾乎完整的”站點），但是這些網站應該足夠容易，可以在生產主機上實現。

注¹ ：託管服務提供自簽名的證書，但我不確定Google是否接受搜索排名的證書。由於託管服務會阻止大多數機器人，因此很難對我的所有權進行驗證，因此我在沒有SSL的情況下運行了網站。

應用設置

我所有用於演示網站，無脂肪配置，控制器和模板文件以及關聯的SCSS，Image和JavaScript文件的文件都在此GitHub存儲庫中。引導和無脂肪文件可從引導和無脂肪中獲得。

用其他網站的內容替換我的網站內容應該很容易。

包括什麼（不是全面列表）

無脂

• config.ini
• 路由
• 所有控制器文件
• 所有頁面的所有模板包括：
  • 帶有字體選擇的代碼的頭部模板
  • 帶有用於組裝鏈接的代碼的導航模板
  • 站點地圖模板

不包括無脂肪的文件 - 這些文件可從無脂肪中獲得

引導程序

Bootstrap易於使用可用的類並使用SASS結構。我從標準的引導代碼中更改了兩件事：

• 從移動設備上的下拉菜單切換到滑入菜單
• 用動畫設計替換移動設備上菜單的切換按鈕

不包括引導程序 - 這些文件可從Bootstrap獲得

一般網站的東西

• 用XHTML生成動態站點地圖：替代語言的鏈接
• 停止頁腳上方的滾動按鈕
• 覆蓋圖像滑塊 - 簡單的，基於jQuery的覆蓋滑塊
  • SASS和JS目錄中有單獨的SASS和JavaScript文件
• 固定英雄圖像和快速加載
• 錯誤響應頁面

多語言支持

雖然演示網站的內容是英文，但演示確實有中文和韓國頁面來展示多語言操作。中文和韓國主頁是使用Google Translate從英語主頁創建的。其餘的中文和韓國頁面僅用於證明導航，只有Google翻譯英文頁面的標題和描述。

2022的其他功能

在2022年7月的更新中，除了驗證該網站與最新版本的無脂肪，Bootstrap 4和jQuery一起使用外，我還將網站修改為：

• 使用系統字體 - 從使用Google字體轉換為使用system-ui字體。使用Google字體需要用戶的瀏覽器將請求發送到Google的樣式表和所需的字體文件。這涉及將用戶的IP地址發送到Google，歐盟一般數據保護法規（GDPR）表示不允許。 system-ui指示瀏覽器使用操作系統用來顯示文本的相同字體。這提供了與用戶在系統屏幕上看到的相似的外觀，並且由於沒有字體可下載，因此它加快了頁面啟動時間。

• Self-host Bootstrap＆jQuery文件 - 由於GDPR要求不與其他站點共享用戶IP地址，因此從使用內容輸送網絡用於框架和庫文件中轉換為從我的服務器提供文件。我現在正在使用WebPack將jQuery，Bootstrap JavaScript，jQuery輕鬆插件和該站點的JavaScript組合到一個文件中（一個文件將更快下載）。

• 支持偏愛的動作 - 儘管Boostrap已經支持減少運動的用戶設置，但我沒有調整jQuery動畫。我現在做。

• 支持Prefers-Color-Scheme - 為喜歡深色格式而不是光格式的用戶添加了一個深色模式格式。

相容性

演示網站可與最新版本一起使用：

• 邊緣（桌面和表面）
• Chrome（移動和桌面）
• Firefox（移動和桌面）
• Android（三星）Internet瀏覽器
• 歌劇（移動和桌面）
• Safari（移動和桌面）

並與：

• 即9、10和11
  • 該網站與Internet Explorer的較舊版本無法使用，但是當我提供特殊的CSS文件並阻止IE 8及以上的JavaScript文件時，訪問者仍然可以看到內容。

許可

此代碼是根據MIT許可提供的。有關詳細信息，請參見許可證文件。

根據GNU公共許可（GPL V3）提供無脂肪

Bootstrap是根據MIT許可證提供的

OffCanvas導航是根據MIT許可提供的

更新

2018/09/23 - 初始版本。

2019/01/02 - 驗證了該網站可與無脂肪3.6.5一起使用，並更新了一些頁面內容以獲得更好的搜索引擎結果。

2019/05/10 - 驗證了該網站與JQuery 3.4.1和Bootstrap 4.3.1一起使用。

2019/05/27 - 由於Google有時在某些搜索引擎結果頁面上的摘要中包括通知文本，因此將歐盟Cookie通知的部分移至頁面底部。

2019/07/02 - 實現的display=swap ，這消除了對字體管理器的需求，至少是Google字體（我使用的是字體face Observer）。

2020/01/20 - 驗證了該網站可與無脂肪3.7.1和Bootstrap 4.4.1一起使用，並對內容進行了一些較小的編輯。

2020/07/05 - 驗證了該網站可與無脂肪3.7.2，Bootstrap 4.5.0和JQuery 3.5.1一起使用，消除了未匯總的CSS文件（只是在網站上提供較小的CSS文件），並對內容進行了一些較小的編輯（包括有關我在VS代碼中做SASS的解釋）。

2022/07/15 - 驗證了該網站可用無脂肪3.8.0，Bootstrap 4.6.1和JQuery 3.6.0，從Google字體切換到使用系統字體，增加了對減少運動和暗模式的支持，並更新了內容。

2022/11/17 - 驗證了該網站與JQuery 3.6.1一起使用，並使用圖片和源元素切換到為輕型和深色模式提供正常和高分辨率的WebP圖像。

2023/07/09 - 帶有無脂肪的PHP框架存儲庫中的Bootstrap 5.3鏈接。

2023/10/07 - 驗證了該站點可與Bootstrap 4.6.2和JQuery 3.7.1一起使用。演示網站的主機現在正在運行PHP 8.2，因此該演示現在使用無脂肪3.8.2。