一、框架問題記錄
- js的加載問題越除？
按需加載js 或 libraries.yml里引入js (上篇有介紹如何引入)
很多小伙伴按功能模塊去分片js,再通過class去按需加載焊切，這樣會導(dǎo)致頁面有類似多個組件時, 每個頁面都會請求各個分片的js，這樣頁面請求次數(shù)就變多了迷守，最終導(dǎo)致頁面加載緩慢镰吵，緩存也較多檩禾。
因此，針對比較簡單的或者通用的功能直接打包成一個js加載就好了疤祭，不用去切片搞按需加載盼产。
只有比較大的功能或者這個功能只有個別頁面才有，才去考慮切片按需加載勺馆。
分片打包js且按需加載寫法：
if ($('xxx').length) {
import(/* webpackChunkName: "xxx */ 'xxx的路徑');
}
- 如何設(shè)置標(biāo)題換行戏售？
標(biāo)題中插入<br/>
twig中添加如下：
{% autoescape 'html' %}
Everything will be automatically escaped in this block
using the HTML strategy
{% endautoescape %}
- ckeditor不能插入空標(biāo)簽？
0寬度的空白字符; - 如何在js中添加翻譯草穆？
- 如何頁面變化時就執(zhí)行某些方法灌灾？
(function ($, Drupal) {
Drupal.your_namespace = Drupal.your_namespace || {};
Drupal.behaviors.yourFnCommon = {
attach: function (context) {
Drupal.your_namespace.fn();
Drupal.your_namespace.fn2(context);
},
};
Drupal.your_namespace.fn = () => {
// do anything;
};
Drupal.your_namespace.fn2 = (context) => {
$('body', context)
.once('yourFnCommon')
.each(function () {
$(window).on('load resize', function () {
// Execute as content changes;
});
});
};
})(jQuery, Drupal);
- 如何阻止默認(rèn)外鏈popup？
- twig中特殊字符處理
|render|striptags|trim|lower|preg_replace('/[^a-z0-9]/', '-')
- drupal模塊js覆蓋重寫
theme.info.yml 中加入如下
libraries-override:
module_name/library_name:
js:
js/module.js: js/module.js
- Ckeditor 中 粘貼無格式文本
在 Mac 上悲柱，你可以按 Option + Cmd + Shift + V 來粘貼無格式文本锋喜。
在 Windows 、linux上诗祸，你可以按 Ctrl + Shift + V 來粘貼無格式文本跑芳。 - 打補(bǔ)丁
1.去drupal 社區(qū)搜索相關(guān)問題
2.composer.json 中添加類似如下
3.執(zhí)行composer install
"patches": {
"drupal/module name": {
"問題描述或問題鏈接": "xxx.patch"
},
}
如何配置ckeditor template
要配置CKEditor插件在Drupal中的位置，請按照以下步驟：登錄到您的Drupal管理后臺直颅。
導(dǎo)航到
Configuration > Content authoring > Text formats and editors(/admin/config/content/formats) 頁面博个。在這個頁面中，您將看到列出了不同的文本格式功偿，例如“Filtered HTML”或“Full HTML”盆佣。
找到您想要編輯的文本格式（通常是“Filtered HTML”或“Full HTML”），然后單擊其旁邊的“編輯”鏈接械荷。
在文本格式的編輯頁面中共耍，您將看到CKEditor的配置選項。
在CKEditor的配置選項中吨瞎，您應(yīng)該能夠找到用于啟用和配置插件的部分痹兜。在這里，您可以啟用“Templates”插件并定義模板文件的路徑颤诀。
導(dǎo)航到
Configuration > Ckeditor template(/admin/config/content/ckeditor_templates) 頁面, 可自定義添加模板字旭。完成配置后，不要忘記保存更改崖叫。
如果您需要進(jìn)一步的幫助或有任何其他問題遗淳，請隨時告訴我。我將竭誠為您提供支持心傀。
二屈暗、需求問題記錄
- 最大的問題無非就是設(shè)計改來改去？
能封裝的盡量都封裝起來，最后只需調(diào)整已封裝的內(nèi)容养叛，頁面無非就是各個class組裝起來的种呐，因此通用模塊的class命名不要太具體化。
- 視頻自動播放（兼容ios）一铅？
- 如何利用js生成pdf陕贮？
- sessionStorage跨頁面共享？
- bootstrap tootip插件如何設(shè)置鼠標(biāo)移出提示框隱藏潘飘？
- 頁面遷移問題
做頁面遷移時有很多不可控的因素肮之，比如這些遷移的頁面布局樣式是否統(tǒng)一是未知的，頁面是否有一些不規(guī)范的寫法（比如dom結(jié)構(gòu)寫了行內(nèi)樣式）也是未知的卜录。
之前有介紹一篇puppeteer screenshot; 很多寫法與之類似艰毒。 - click 多個事件
elem.onclick = function (fn) {
var bak = elem.onclick;
return function (e) {
bak && bak.call(this, e);
fn.call(this, e);
};
}(new_callback)
- 100vw以及100問題
如何使100vw不包含滾動條筐高？
function setVw() {
let vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', ${vw}px);
}
setVw();
window.addEventListener('resize', setVw);
width: calc((var(--vw, 1vw) * 100);
在移動瀏覽器上使用 100vh（視口高度的100%）時確實可能遇到一些問題。這主要是因為不同瀏覽器對于視口高度的計算方式存在差異丑瞧，特別是考慮到移動設(shè)備上的地址欄和工具欄的顯示與隱藏行為柑土。
核心問題
地址欄和工具欄的動態(tài)顯示：在許多移動瀏覽器中，當(dāng)用戶滾動頁面時绊汹，地址欄可能會收縮或隱藏稽屏，而工具欄可能會出現(xiàn)或消失。這種行為會動態(tài)改變視口的可用高度西乖，但是使用 100vh 定義的元素高度并不會自動調(diào)整以適應(yīng)這種變化狐榔。結(jié)果就是，100vh 實際上可能會比視口的可視部分更高获雕，導(dǎo)致內(nèi)容被地址欄或工具欄遮擋薄腻，或者頁面出現(xiàn)不必要的滾動。
解決方案
解決這個問題有幾種方法届案，但每種方法都有其適用場景和潛在的限制庵楷。
使用 CSS 環(huán)境變量（如果可用）：某些瀏覽器支持 CSS 環(huán)境變量，如 env(safe-area-inset-top) 和 env(safe-area-inset-bottom)楣颠，可以幫助調(diào)整元素尺寸以適應(yīng)屏幕的安全區(qū)域嫁乘。例如，可以嘗試將高度設(shè)置為 calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))球碉，以適應(yīng)不同設(shè)備的屏幕。
JavaScript 動態(tài)計算：可以使用 JavaScript 動態(tài)計算并設(shè)置元素的高度仓蛆，以適應(yīng)當(dāng)前視口的實際高度睁冬。這可以通過監(jiān)聽窗口的 resize 或 orientationchange 事件并相應(yīng)地調(diào)整元素高度來實現(xiàn)。
function adjustHeight() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
}
// 初始化
adjustHeight();
// 監(jiān)聽窗口大小變化
window.addEventListener('resize', adjustHeight);
然后在 CSS 中使用這個自定義屬性：
.element {
height: calc(var(--vh, 1vh) * 100);
}
避免使用 100vh：另一種方法是盡量避免在移動設(shè)備上使用 100vh 作為元素的高度設(shè)置。相反豆拨，可以使用其他單位或布局方法（如 Flexbox 或 Grid）來創(chuàng)建響應(yīng)式布局直奋，這些布局不會受到移動瀏覽器地址欄和工具欄行為的影響。
結(jié)論
由于移動設(shè)備和瀏覽器之間的差異施禾，沒有一種解決方案能夠完美適用于所有情況脚线。因此，開發(fā)人員可能需要根據(jù)具體的應(yīng)用場景和目標(biāo)用戶群體的設(shè)備特性弥搞，選擇最合適的方法來實現(xiàn)設(shè)計意圖邮绿。此外，進(jìn)行廣泛的設(shè)備和瀏覽器測試是確保最終實現(xiàn)既滿足設(shè)計要求又具有良好用戶體驗的關(guān)鍵攀例。
Mktoforms2的監(jiān)聽船逮？
Mktoforms2 Doc-
元素之間縫隙問題
水平縫隙問題其實是因為標(biāo)簽之間的換行，產(chǎn)生了空白符粤铭，這些空白符某種意義上也算是字符挖胃，所以理所當(dāng)然的占據(jù)了一定的空隙(例子如下，主要針對inline-block元素)梆惯。
eg:
尋找周邊城市
1. google map nearbySearch 有最大限制 最大搜索半徑50km.
2. 這個免費(fèi)的接口可搜索到很多城市http://api.geonames.org/findNearbyPlaceNameJSON?lat=-6.21462&lng=106.8451&cities=cities15000&radius=300&maxRows=4&username=xxx
需要先注冊賬號https://www.geonames.org/login
給特殊字符補(bǔ)上轉(zhuǎn)義符
適用場景 前端搜索字符串時搜索特殊字符報錯酱鸭。
const pattern = /([`~!@#_$%^&*()=|{}':;',\\\[\\\].<>/?~！@#￥……&*（）——|{}【】‘垛吗；：”“'凹髓。，职烧、扁誓？\s])/g
const value = this.value.replace(pattern, '\\$1');
const reg = new RegExp(value.toLowerCase());
- 替換字符串中的特殊字符
function replaceSpecialChars(text) {
const map = {
' ': ' ',
'&': '&',
'<': '<',
'>': '>',
' ': ' ',
''': "'",
'"': '"'
};
const keys = Object.keys(map);
const pattern = new RegExp(keys.join('|'), 'g');
return text.replace(pattern, function(m) { return map[m]; });
}
- pdf 自定義分頁
添加樣式style="page-break-before: always;" - youtube 設(shè)置默認(rèn)語言cc字幕
https://stackoverflow.com/questions/41239654/embed-youtube-with-captions-on-by-default-not-working
https://www.youtube.com/embed/id?si=pKhwWpgjYBIsJUUZ&cc_load_policy=1&autoplay=1&cc_lang_pref=ko
