检查是否应该使用html-head或unix-head。
Next.js - 如何使用文字 onload 属性字符串值在 <link> 内添加 <head> 标签?
在 Next.js 项目中,我想获得一些初始 HTML,其中的内容与 完全相同: 在 Next.js 项目中,我想获得一些初始 HTML,其中的内容完全相同 <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> 我的代码中 Next.js 的 <Head> 组件内的内容是: { /* @ts-ignore */ } <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> 如果没有 @ts-ignore,它会说: 类型“DetailedHTMLProps”上不存在属性“onload”。您指的是“onLoad”吗? ts(2322) 如果我使用 onLoad 而不是 onload 我得到: 类型“string”不可分配给类型“(event: SyntheticEvent) => void”。 ts(2322) 问题是我得到的服务器端生成的 HTML 有: <link href="..." rel="stylesheet" media="print" /> 并且只有当页面重新水合后,它才会更新为: <link href="..." rel="stylesheet" media="all" onload="this.media='all'"> 我在 GitHub 上发现了这个问题,但它没有帮助,因为我没有使用 Google Fonts,而是使用 Typography.com,所以我无法使用 next-google-fonts:https://github.com/vercel/next .js/issues/12984 我正在考虑向该 ref 标签添加 link 并使用 setAttribute 设置属性,这希望也能在服务器端工作,但想知道是否有更简单的方法来做到这一点。 更新答案(下13-14): Next.js 现在提供开箱即用的 Google 和本地字体优化。以下是加载 Google 字体的方法: // This will add the Inter font to your own deployment, serving // them from your domain without sending any data to Google: import { Inter } from 'next/font/google'; // If loading a variable font, you don't need to specify the font weight const inter = Inter({ subsets: ['latin'], display: 'swap', }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" className={inter.className}> <body>{children}</body> </html> ) } 原答案(下12): 所以我最终在自定义<style>中使用带有dangerouslySetInnerHTML的_document.js标签修复了这个问题。总而言之,它应该看起来像这样: <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" /> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" as="style" /> <style dangerouslySetInnerHTML={ { __html: `</style> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" media="print" onload="this.media='all';" /> <style>` } }></style> <noscript> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" /> </noscript> 生成以下输出: <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous"/> <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" as="style"/> <style></style> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap" media="print" onload="this.media='all';" /> <style></style> <noscript><link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;600&family=Karla:wght@700&display=swap"/></noscript> 不太漂亮,但比在 <div> 中包含 <head> 更好(并非所有浏览器都能正确解释)。 有一个 open RFC 可以创建 RawHTML 组件或扩展 Fragment 来接受 dangerouslySetInnerHTML,这样就可以在没有黑客的情况下实现类似的功能,但距离创建已经一年多了。 此外,还有对此进行了相当长的讨论,以及一些似乎有效的不同解决方案(黑客)。 您可以在此处查看解决方案:https://andorratechvalley.com/
我有一个网站,可以直接从会话添加某个图标,当我将其添加为快捷方式时,该图标不显示。 我尝试注释掉静态添加它的代码,它确实有效,笑...
在我的 Rails 应用程序中,我包含了 OneSignal,它需要将以下链接放置在文档的头部: 不幸的是,对于 Rails,我无法...
Next.js 中的元数据更改问题:.next 文件夹重建后元数据被覆盖
我在 Next.js 应用程序中遇到元数据自定义问题。虽然我能够成功修改我的layout.tsx文件中的元数据,但这些更改没有反映在c中...
我已经成为 Windows 中的 Git 用户很多年了。我以前使用CLI+Tortoise Git,很少遇到问题。我切换到 Linux (kubuntu 23.10),安装 VS Code(漂亮,顺便说一句),然后安装...
为什么blazor HeadOutlet是在App之后渲染的
我在服务器端预渲染的net6.0应用程序上使用HeadOutlet来设置一些标题标签,例如元描述,但服务器首先渲染应用程序,然后渲染搜索引擎的标题
我想将超文本传输协议的 HEAD 命令发送到 PHP 中的服务器以检索标头,但不检索内容或 URL。我如何以有效的方式做到这一点? 可能...
如何舍入仅在 pandas 中显示的值,同时保留数据框中的原始值?
当我使用 head() 或 tail() 时,我希望仅对 DataFrame 中的值进行舍入以用于显示目的,但我希望 DataFrame 保留原始值。 我尝试使用圆形方法,但它改变了......
Magic Link 被 Outlook SafeLink 策略阻止
我使用 NextAuth 创建了一个登录系统,我在其中发送一个魔术链接,以便用户可以通过它登录。 当我尝试使用 Gmail 登录时,一切正常。当我尝试使用 Outlook 时,问题出现了。
Blazor PageTitle 标记在迁移到 .NET Core 6 后不起作用
我尝试在 Blazor 服务器应用程序中配置页面标题,但不幸的是,标签 不起作用。该项目是在 Microsoft 发布 .NET Core 6 之前启动的,并且...
我真的很想了解 git 的行为方式以及在干净的本地存储库上运行 git fetch upper head 后计划下发生的情况。 基本上步骤如下: 创造...
HEAD 和 HEAD 有什么区别:git 命令中的 HEAD 表示法例如: git 获取原点 HEAD:HEAD 我什至可以理解 git fetch origin HEAD 的作用,但是,不使用其他 nota...
我是前端开发的新手,但有后端经验。 我正在尝试使用 vue3 中的 unhead 模块。也许我只是不知道一些众所周知的信息,或者我一般......
JavaScript 代码在 HEAD 标签中不起作用这是测试页
我的网页有以下代码: 这是测试页 <question vote="6"> <p>我的网页有以下代码:</p> <pre><code><html> <head> <title>This is test Page</title> <script language="javascript" type="text/javascript"> document.getElementById("msg1").innerHTML = document.URL.toString(); </script> </head> <body> <div class="sss"> <p id="msg1"></p> </div> </body> </html> </code></pre> <p>您可能知道,脚本执行时 div 不存在。我只想将 JavaScript 代码放在 <pre><code><head></code></pre> 标签中,而不会将其放在 HTML 代码中间。</p> <p>但是只有当我将 <pre><code><script></code></pre> 标签放在 <pre><code><div></code></pre> 标签后面时,此代码才有效。 我使用VS2010和firefox 19.0.1</p> <p>有没有办法将代码放入 <pre><code><head></code></pre> 标签中?</p> </question> <answer tick="true" vote="17"> <p>您的脚本依赖于 DOM 准备就绪,因此您需要仅在 DOM 准备就绪后执行该函数调用。</p> <pre><code><script language="javascript" type="text/javascript"> window.onload = function() { document.getElementById("msg1").innerHTML = document.URL.toString(); } </script> </code></pre> </answer> <answer tick="false" vote="2"> <p>HTML 页面中的各种标签按照它们在页面上出现的顺序加载和处理。当您的 <pre><code><script></code></pre> 标签在 <pre><code><head></code></pre> 中被解析时,它会立即执行。这是在解析 <pre><code><body></code></pre> 和 <pre><code><body></code></pre> 内的元素之前。因此,脚本尝试引用执行时未定义的元素。</p> </answer> <answer tick="false" vote="1"> <p>Michael Geary 是对的,为了执行你的代码,我会使用 jQuery 库(JS 开发中的事实上的标准)并利用 DOM 就绪事件。这将确保处理程序中的代码将在 DOM 完全加载后执行。</p> <pre><code><script> $(function(){ $('#msg1').html(document.URL.toString()); }); </script> </code></pre> </answer> <answer tick="false" vote="1"> <p>我建议像这样使用<pre><code>addEventListener</code></pre>:</p> <pre><code><script language="javascript" type="text/javascript"> document.addEventListener("DOMContentLoaded",() => { document.getElementById("msg1").innerHTML = document.URL.toString(); }); </script> </code></pre> </answer> <answer tick="false" vote="0"> <p>您的脚本使用 dom 元素,并且必须在 dom 加载后运行。</p> <p>将代码包装在函数中并在 dom 加载后调用它</p> <pre><code>function myfunc(){ //code here } window.onload = myfunc(); </code></pre> </answer> <answer tick="false" vote="0"> 这是测试页 <pre><code> <script defer language="javascript" type="text/javascript"> document.getElementById("msg1").innerHTML = document.URL.toString(); </script> </code></pre> </answer> </body></html>
我正在尝试向 WordPress 托管的博客的每篇文章添加一些开放图谱标签。 当我运行“npm run dev”时,此代码有效,但是当我运行“npm rungenerate && firebase d...
路由 admin/bill 不支持 POST 方法。支持的方法:GET、HEAD
在Laravel中,我使用ajax通过刀片模板从MySQL数据库添加和获取数据,我在onsubmit事件上添加了表单求和。请帮我。 我的代码是。 路线.php 路线::get('管理员...
为什么'head'命令正确读取以''开头的字符串,而fgets却错误?
这里是我想读出的文件,里面有一些意想不到的“ ” 1 2 Mon Aug 28 14:29:29 2023 admin[::ffff:192.168.7.116]:59927: 简短显示插槽 1 ont-info 3 2023 年 8 月 28 日星期一 14:29:33...
我经常发现自己想要在 IEnumerables 上使用 Head 和 Tail 方法,而这些方法并不作为 Linq 的一部分存在。虽然我可以轻松地编写自己的内容,但我想知道它们是否被故意排除在外......
对于一段文字: USB2.1集线器: 产品编号:0x0610 戴尔通用坞站 D6000: 产品编号:0x6006 供应商 ID:0x17e9(DisplayLink(英国)L ...
和 in html 有什么区别,我最近一直在学习它,有人问我这个问题,我无法得出完美的答案 h1 和 header 都可以执行