关于做drupal项目遇到的问题-（前端篇）

一、框架问题记录

js的加载问题？

按需加载js 或 libraries.yml里引入js (上篇有介绍如何引入)
很多小伙伴按功能模块去分片js,再通过class去按需加载，这样会导致页面有类似多个组件时, 每个页面都会请求各个分片的js，这样页面请求次数就变多了，最终导致页面加载缓慢，缓存也较多。
因此，针对比较简单的或者通用的功能直接打包成一个js加载就好了，不用去切片搞按需加载。
只有比较大的功能或者这个功能只有个别页面才有，才去考虑切片按需加载。

分片打包js且按需加载写法：

if ($('xxx').length) {
   import(/* webpackChunkName: "xxx */ 'xxx的路径');
}

如何设置标题换行？
$\color{red}{解决：}\$ 标题中插入<br/>
twig中添加如下：

{% autoescape 'html' %}
    Everything will be automatically escaped in this block
    using the HTML strategy
{% endautoescape %}

ckeditor不能插入空标签？
$\color{red}{解决：}\$ 可以空标签中插入(&zwnj;||&zwj;)0宽度的空白字符;
如何在js中添加翻译？
$\color{red}{解决：}\$ Drupal.t('anything');
如何页面变化时就执行某些方法？
$\color{red}{解决：}\$

(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);

如何阻止默认外链popup？
$\color{red}{解决：}\$ 加上class external-link-popup-disabled
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 来粘贴无格式文本。
打补丁
1.去drupal 社区搜索相关问题
2.composer.json 中添加类似如下
3.执行composer install

"patches": {
    "drupal/module name": {
          "问题描述或问题链接": "xxx.patch"
     },
}

如何配置ckeditor template
要配置CKEditor插件在Drupal中的位置，请按照以下步骤：
登录到您的Drupal管理后台。
导航到 Configuration > Content authoring > Text formats and editors (/admin/config/content/formats) 页面。
在这个页面中，您将看到列出了不同的文本格式，例如“Filtered HTML”或“Full HTML”。
找到您想要编辑的文本格式（通常是“Filtered HTML”或“Full HTML”），然后单击其旁边的“编辑”链接。
在文本格式的编辑页面中，您将看到CKEditor的配置选项。
在CKEditor的配置选项中，您应该能够找到用于启用和配置插件的部分。在这里，您可以启用“Templates”插件并定义模板文件的路径。
导航到 Configuration > Ckeditor template (/admin/config/content/ckeditor_templates) 页面, 可自定义添加模板。
完成配置后，不要忘记保存更改。

如果您需要进一步的帮助或有任何其他问题，请随时告诉我。我将竭诚为您提供支持。

二、需求问题记录

最大的问题无非就是设计改来改去？
$\color{red}{建议：}\$ 能封装的尽量都封装起来，最后只需调整已封装的内容，页面无非就是各个class组装起来的，因此通用模块的class命名不要太具体化。
视频自动播放（兼容ios）？
$\color{red}{解决：}\$ JSMpeg github
如何利用js生成pdf？
$\color{red}{解决：}\$ jspdf 解决中文乱码
sessionStorage跨页面共享？
$\color{red}{解决：}\$ shared-session
bootstrap tootip插件如何设置鼠标移出提示框隐藏？
$\color{red}{解决：}\$ tootip 解决方案
页面迁移问题
做页面迁移时有很多不可控的因素，比如这些迁移的页面布局样式是否统一是未知的，页面是否有一些不规范的写法（比如dom结构写了行内样式）也是未知的。
$\color{red}{建议：}\$ 利用puppeteer工具，抓取页面。
之前有介绍一篇puppeteer screenshot; 很多写法与之类似。
click 多个事件
$\color{red}{解决：}\$

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不包含滚动条？
$\color{red}{解决：}\$

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%）时确实可能遇到一些问题。这主要是因为不同浏览器对于视口高度的计算方式存在差异，特别是考虑到移动设备上的地址栏和工具栏的显示与隐藏行为。

核心问题
地址栏和工具栏的动态显示：在许多移动浏览器中，当用户滚动页面时，地址栏可能会收缩或隐藏，而工具栏可能会出现或消失。这种行为会动态改变视口的可用高度，但是使用 100vh 定义的元素高度并不会自动调整以适应这种变化。结果就是，100vh 实际上可能会比视口的可视部分更高，导致内容被地址栏或工具栏遮挡，或者页面出现不必要的滚动。
解决方案
解决这个问题有几种方法，但每种方法都有其适用场景和潜在的限制。

使用 CSS 环境变量（如果可用）：某些浏览器支持 CSS 环境变量，如 env(safe-area-inset-top) 和 env(safe-area-inset-bottom)，可以帮助调整元素尺寸以适应屏幕的安全区域。例如，可以尝试将高度设置为 calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))，以适应不同设备的屏幕。

JavaScript 动态计算：可以使用 JavaScript 动态计算并设置元素的高度，以适应当前视口的实际高度。这可以通过监听窗口的 resize 或 orientationchange 事件并相应地调整元素高度来实现。

function adjustHeight() {
    const vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
}

// 初始化
adjustHeight();

// 监听窗口大小变化
window.addEventListener('resize', adjustHeight);

然后在 CSS 中使用这个自定义属性：

.element {
    height: calc(var(--vh, 1vh) * 100);
}

避免使用 100vh：另一种方法是尽量避免在移动设备上使用 100vh 作为元素的高度设置。相反，可以使用其他单位或布局方法（如 Flexbox 或 Grid）来创建响应式布局，这些布局不会受到移动浏览器地址栏和工具栏行为的影响。

结论
由于移动设备和浏览器之间的差异，没有一种解决方案能够完美适用于所有情况。因此，开发人员可能需要根据具体的应用场景和目标用户群体的设备特性，选择最合适的方法来实现设计意图。此外，进行广泛的设备和浏览器测试是确保最终实现既满足设计要求又具有良好用户体验的关键。

Mktoforms2的监听？
Mktoforms2 Doc
元素之间缝隙问题
水平缝隙问题其实是因为标签之间的换行，产生了空白符，这些空白符某种意义上也算是字符，所以理所当然的占据了一定的空隙(例子如下，主要针对inline-block元素)。
$\color{red}{解决：}\$ 两个标签不换行即可
eg:
寻找周边城市
$\color{red}{解决：}\$
1. google map nearbySearch 有最大限制最大搜索半径50km.
2. 这个免费的接口可搜索到很多城市http://api.geonames.org/findNearbyPlaceNameJSON?lat=-6.21462&lng=106.8451&cities=cities15000&radius=300&maxRows=4&username=xxx
$\color{orange}{注意：}\$ 需要先注册账号https://www.geonames.org/login
图表插件
echarts官网
 地图geojson数据
 地图demo
给特殊字符补上转义符
适用场景前端搜索字符串时搜索特殊字符报错。

  const pattern = /([`~!@#_$%^&*()=|{}':;',\\\[\\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？\s])/g
  const value = this.value.replace(pattern, '\\$1');
  const reg = new RegExp(value.toLowerCase());

替换字符串中的特殊字符

function replaceSpecialChars(text) {
  const map = {
    '&nbsp;': ' ',
    '&amp;': '&',
    '&lt;': '<',
    '&gt;': '>',
    '&nbsp;': ' ',
    '&#039;': "'",
    '&quot;': '"'
  };
  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 设置默认语言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

关于做drupal项目遇到的问题-（前端篇）

一、框架问题记录

二、需求问题记录

推荐阅读更多精彩内容