建设网站企业排行,门户网站的基本特征a信息与服务,临淄信息港发布信息,伊通县建设局网站文章目录 前言网站默认语言问题网站访问统计问题Error: Empty components are self-closingError: A space is required before closing bracket 总结 前言
看标题大概能猜到这是一篇杂合体的总结#xff0c;是这两天处理网站遇到的小问题#xff0c;怕过段时间再忘了所以总… 文章目录 前言网站默认语言问题网站访问统计问题Error: Empty components are self-closingError: A space is required before closing bracket 总结 前言
看标题大概能猜到这是一篇杂合体的总结是这两天处理网站遇到的小问题怕过段时间再忘了所以总结到一起便于反过来查找问题解决方案这个问题都是之前未曾接触过的但遇到他们不用惧怕只要假装自己能解决就行这样稳扎稳打的找方案就能解决了。 网站默认语言问题
一个使用Nextjs框架编写的网站支持中日英三种语言如果访问主页面时未选择语言则按照浏览器的语言来选择这是合理的一个人如果总用中文的浏览器那么他在访问一个新网站时较大可能是想看中文的页面所以我们优先选择当前浏览器的语言即可默认跳转到指定语言的页面选择语言的代码如下是一个中间件 middleware.ts问题在于默认语言为日文的浏览器打开网页是英文的这就得查查是因为什么了
import { NextRequest, NextResponse } from next/server;
import acceptLanguage from accept-language;
import { fallbackLng, languages } from ./app/i18n/settings;acceptLanguage.languages(languages);export const config {// matcher: /:lng*matcher: [/((?!api|_next/static|_next/image|images|svg|assets|favicon.ico|sw.js).*)]
};const cookieName i18next;export function middleware(req: NextRequest) {let lng;// if (req.cookies.has(cookieName)) lng acceptLanguage.get(req.cookies.get(cookieName)?.value);if (!lng) lng acceptLanguage.get(req.headers.get(Accept-Language));if (!lng) lng fallbackLng;// Redirect if lng in path is not supportedif (!languages.some((loc) req.nextUrl.pathname.startsWith(/${loc})) !req.nextUrl.pathname.startsWith(/_next)) {return NextResponse.redirect(new URL(/${lng}${req.nextUrl.pathname}, req.url));}if (req.headers.has(referer)) {const refererUrl new URL(req.headers.get(referer) || zh);const lngInReferer languages.find((l) refererUrl.pathname.startsWith(/${l}));const response NextResponse.next();if (lngInReferer) response.cookies.set(cookieName, lngInReferer);return response;}return NextResponse.next();
}其中 matcher 是用来匹配路径的这个配置表示中间件会在请求的路径不包含特定字符串时触发。也就是说路径不能包含指定的 api、_next/static 等词缀。
网站语言看这一句 if (!lng) lng acceptLanguage.get(req.headers.get(Accept-Language)); 就行了它的含义是网站可以根据 Accept-Language 请求头来检测浏览器的首选语言并返回相应语言的内容。
而我将浏览器默认语言设置为日语时打开网站传递的 Accept-Language 内容为 ja,en;q0.9,zh-CN;q0.8,zh;q0.7
根据你提供的 Accept-Language 内容 ja,en;q0.9,zh-CN;q0.8,zh;q0.7以下是中间件的处理过程
acceptLanguage.get(req.headers.get(Accept-Language)) 函数会根据 Accept-Language 头部的内容来选择最适合的语言。根据我浏览器传递的内容
ja日语有最高的优先级。en英语优先级为 0.9。zh-CN简体中文优先级为 0.8。zh中文优先级为 0.7。
由于 ja 的优先级是 1默认并且是最优的匹配所以 acceptLanguage.get() 会选择 ja 作为首选语言。
但是可以还取决于 languages 的值因为 acceptLanguage 是通过 languages 完成初始化的而我查询了项目中它的值为 export const languages [jp, en, zh];发现问题了没有日语浏览器将 ja 作为最优先展示语言但是备选项里没有 ja所以最终选出的结果是 en这也就解释了为什么日语浏览器默认打开网页时显示英文页面的现象了。
日文的缩写通常是 “ja”而不是 “jp”。
“ja” 是 ISO 639-1 标准中日语的语言代码。“jp” 通常用来表示 日本Japan的国家代码在 ISO 3166-1 标准中使用。
因此在国际化i18n和多语言网站的语言代码中日文通常使用 “ja”。
只要原因后就好修改了改成ja也好保持jp也罢修正逻辑按照一致的顺序处理问题也就能解决了。
网站访问统计问题
如果是一个网站开发者遇到这种问题应该会有一个完整的解决方案而我这种半吊子的网页开发人员只想尽快的解决问题所以我的搜索方向就是怎么尽快解决这个问题。起初搜到的方案是使用 Vercel Analytics 来查看初始有个免费额度超过25,000 events要进行收费因为我的网站就部署在 Vercel 上所以这种方案应该是最融洽的查看每月的 events 使用量估算了费用每月要 $100 以上纠结中。
然后就搜到了 Google Analytics介绍里说它完全免费应用广泛但是最近评价却不好一方面是指责它收集隐私信息另一方面是说它被很多浏览器插件屏蔽导致无法准确统计在抵制它的同时很多人都推荐使用了 Umami。
Umami 是一个开源的简单、隐私友好的网站分析工具。它提供了类似于 Google Analytics 的功能但更加专注于数据隐私且无需依赖第三方 cookies。这使得 Umami 成为那些希望追踪用户活动但又需要遵守严格隐私法律如 GDPR 或 CCPA的个人和企业的理想选择。
Umami 是完全开源的使用 MIT 许可证代码可以在 GitHub 上找到并自行部署。客户端脚本文件仅约 2 KB加载速度快不会影响网页性能。时查看访问者活动例如当前在线人数、浏览器、设备、地域等信息。
后端Node.js 和 PostgreSQL。前端基于 React 构建。部署支持 Docker配置简单。技术栈提起来挺简单但是像我这么懒的人现在还不打算配置一遍自己配置还要买服务器和数据库因为我查到它有一个 Umami Cloud。
Umami Cloud 是 Umami 的云托管服务提供了一个简单、隐私友好的网站分析工具的在线版本。它允许用户通过 Umami 提供的 Web 界面无需自行托管和管理服务器即可使用该分析工具。相比自己搭建 Umami使用 Umami Cloud 可以节省大量的部署和维护成本适合不想处理服务器配置的用户。
用户无需担心部署和维护服务器Umami Cloud 提供了一个即开即用的服务只需要注册并配置网站即可开始使用。与自托管的 Umami 一样Umami Cloud 注重用户隐私不收集个人可识别信息。它也不依赖 cookies 或第三方追踪因此完全符合 GDPR 和其他隐私法规。
用户只需要将提供的 JavaScript 跟踪代码插入到网站页面不需要任何后端代码适合非技术用户。Umami Cloud 提供了不同的定价套餐包括免费和付费版本。免费版本适合小型网站或个人使用付费版本提供更多的功能和数据存储选项。
看起来数据大了还是得付钱免费版本限制 100K events per monthUp to 3 websites6 month data retention对于我的网站来说还是不够用但付费的价格相比Vercel算是降了不少所以我把它的 跟踪代码 胡乱的集成到了我项目的 head.../head中进而引发了后面的问题
script defer srchttps://cloud.umami.is/script.js data-website-idYOUR_WEBSITE_ID/scriptError: Empty components are self-closing
这个错误的完整显示如下:
Failed to compile.
30:13 Error: Empty components are self-closing react/self-closing-comp
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rulesELIFECYCLE Command failed with exit code 1.
Error: Command pnpm run build exited with 1我的代码开始写成了这样
export default function RootLayout({children,params: { lng },
}: {children: React.ReactNode;params: { lng: LanguageType };
}) {return (html lang{lng} className{myFont.variable}headscript defer srchttps://cloud.umami.is/script.js data-website-idYOUR_WEBSITE_ID/script/headbody classNamerelative font-my{children}/body/html);
}看着ChatGPT的解释我陷入了沉思不过后来我明白了它的意思这个错误是由于 ESLint 中的 react/self-closing-comp 规则引起的该规则要求空的组件标签必须是自闭合的。
解决方法是检查报错所在的代码通常是在第 30 行第 13 列很可能是你有一个空的元素例如
div/div它应该改成自闭合的写法
div /所以我把代码改成了这样 headscript defer srchttps://cloud.umami.is/script.js data-website-idYOUR_WEBSITE_ID//head去掉了 /script 然后就报了下面这个错。
Error: A space is required before closing bracket
完整错误如下
Failed to compile.
30:120 Error: A space is required before closing bracket react/jsx-tag-spacing
info - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rulesELIFECYCLE Command failed with exit code 1.
Error: Command pnpm run build exited with 1这次我还是没反应过来经过ChatGPT解释发现之前就已经给出准备的例子了这个新的错误是由 ESLint 的 react/jsx-tag-spacing 规则引起的它要求在自闭合标签的闭合括号前留一个空格。所以最终改成下面这样就没问题了
headscript defer srchttps://cloud.umami.is/script.js data-website-idYOUR_WEBSITE_ID //head真是一个空格也不能错啊~
总结
网站的默认语言可以根据浏览器的设置语言来初始化获取代码简化为 acceptLanguage.get(req.headers.get(Accept-Language));网页统计可以使用 Vercel Analytics、Google Analytics 或者 UmamiVercel Analytics 与 Vercel 兼容性好毕竟出自同一家班底配合会比较顺畅应该还会有自家产品的关联优化Google Analytics 依赖 cookies可能涉及隐私问题数据存储在 Google 的服务器由 Google 管理功能全面适合复杂需求Umami 完全隐私友好无 cookies核心功能足够但比 Google Analytics 少可以用户自行托管完全掌控 反爬链接请勿点击原地爆炸概不负责 他日若是同淋雪也算此生共白头。在两个人维系的关系中一方的忍耐退让并不会让另一方生出善意反而会导致对方以为之前的所有都是理所应当进而变本加厉。总会有两个人不在一个频道上你给她讲理她跟你讲情你跟她讲情她跟你讲法你跟她讲法他跟你讲理反正你永远对不了~
