我使用 JavaScript、Tailwind 和 Framer Motion 创建了一个 NextJs 14 应用程序。现在我收到三位用户的反馈，称文本显示错误。这仅适用于移动设备上的视图。我已经更改了字体，还卸载了 @next/font，如文章 https://nextjs.org/docs/messages/built-in-next-font 中所述。 然而，这两个用户的视图都没有改变。我附上了一张视图不正确的图像作为证据。 错误表述 正确表述
我已经更改了字体，还卸载了@next/font，如文章中所述（https://nextjs.org/docs/messages/built-in-next-font）。 然而，这两个用户的视图都没有改变。
布局.js
import { Outfit } from "next/font/google";
import "./globals.css";
import MobileNavBar from "@/components/sub/MobileNavBar";
import { ThemeProvider } from "@/components/theme-provider";
import DarkModeToggle from "@/components/sub/DarkModeToggle";
import PageLoader from "@/components/PageLoader";
import { Analytics } from "@vercel/analytics/react";
const outfit = Outfit({
subsets: ["latin"],
});
export const metadata = {
title: "...",
description: "...",
};
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning={true}>
<body className={outfit.className}>
<ThemeProvider
attribute="class"
defaultTheme="dark"
enableSystem
disableTransitionOnChange
>
<PageLoader>
<DarkModeToggle />
<MobileNavBar />
{children}
<Analytics />
</PageLoader>
</ThemeProvider>
</body>
</html>
);
}
卡.jsx
"use client";
import { motion } from "framer-motion";
import Link from "next/link";
import { FiArrowRight } from "react-icons/fi";
const TagebuchKarte = ({ Reisetagebuch }) => {
const { Tagebucheintrag } = Reisetagebuch;
const sortedTagebucheintrag = [...Tagebucheintrag].sort((a, b) => new Date(b.Datum) - new Date(a.Datum));
return (
<div className="p-4 md:p-8 bg-background">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-8 w-full max-w-6xl mx-auto">
{sortedTagebucheintrag.map((eintrag, index) => (
<Card
heading={eintrag.Titel}
description={eintrag.Text}
imgSrc={eintrag.ImageUrl}
uniqueID={eintrag.uniqueID}
country={Reisetagebuch.Land}
key={index}
/>
))}
</div>
</div>
);
};
const Card = ({ heading, description, imgSrc, uniqueID, country }) => {
var trimmedString = description.substr(0, 50);
//re-trim if we are in the middle of a word
trimmedString = trimmedString.substr(
0,
Math.min(trimmedString.length, trimmedString.lastIndexOf(" "))
);
return (
<Link href={`/tagebuch/${uniqueID}`}>
<motion.div
transition={{
// staggerChildren: 0.035,
staggerChildren: 0.015,
}}
whileHover="hover"
className="w-full h-64 bg-slate-200 overflow-hidden cursor-pointer group relative"
>
<div
className="absolute inset-0 saturate-100 md:saturate-0 md:group-hover:saturate-100 group-hover:scale-110 transition-all duration-500"
style={{
backgroundImage: `url(${imgSrc})`,
backgroundSize: "cover",
backgroundPosition: "center",
}}
/>
<div className="p-4 relative z-20 h-full text-primary-foreground group-hover:text-white transition-colors duration-500 flex flex-col justify-between">
<FiArrowRight className="text-3xl group-hover:-rotate-45 transition-transform duration-500 ml-auto" />
<div>
<h4>
{heading.split("").map((l, i) => (
<ShiftLetter letter={l} key={i} />
))}
</h4>
<p>{trimmedString}</p>
</div>
</div>
</motion.div>
</Link>
);
};
const ShiftLetter = ({ letter }) => {
return (
<div className="inline-block overflow-hidden h-[36px] font-semibold text-3xl">
<motion.span
className="flex flex-col min-w-[4px]"
style={{
y: "0%",
}}
variants={{
hover: {
y: "-50%",
},
}}
transition={{
duration: 0.3,
}}
>
<span>{letter}</span>
<span>{letter}</span>
</motion.span>
</div>
);
};
export default TagebuchKarte;
错误隐藏在html标签中。该网站是德语页面。然而，html 标签是通过 lang=‘en’ 属性来维护的。如果“翻译”功能和自动翻译成德语被激活，则尝试将德语翻译成德语，从而导致错误的视图。 html标签改为‘de-DE’，错误消失了。