Как добавить HTML и CSS на моей домашней странице, которая написана в nextjs
Попробуйте этот инструмент Javascript Obfuscator
Я использовал его в своей игре HTML5, и он не только уменьшил его размер с 950 КБ до 150, но и сделал нечитаемые компиляторы и мини-блокировки исходного кода обратимы, я лично не знаю, как отменить это обфускацию.
1 ответ
У вас есть несколько вариантов.
-
Вариант 1
Используйте Head на своей странице следующим образом:
import Link from 'next/link'
import Head from 'next/head'
import Header from '../components/Header'
import Footer from '../components/Footer';
const Home = () => (
<div>
<Head>
<link rel="stylesheet" href="path/to/style.css"/>
</Head>
<Header/>
<p>This is the home page</p>
<Link href="/team">Team</Link>
<Link href="/courses">Courses</Link>
<Footer/>
</div>
уведомление import Head from 'next/head', а также использование head тег. Вы можете поместить все метки заголовка туда, как title, meta, link и т. Д. Стиль будет доступен и повлияет на этот компонент.
-
Вариант 2:
использовать jsx, как это
import Link from 'next/link'
import Header from '../components/Header'
import Footer from '../components/Footer';
const Home = () => (
<div>
<Header/>
<p>This is the home page</p>
<Link href="/team">Team</Link>
<Link href="/courses">Courses</Link>
<Footer/>
<style jsx>{`
p{
color: red
}
`}</style>
</div>
, но в этом случае ваш стиль будет scoped это означает, что он будет доступен только для этого компонента. Так что вам нужно сделать то же самое для вашего компонента Header и Footer. Но вы можете добавить <style jsx global>...</style>, чтобы сделать его глобальным.
-
Опция 3:
Используйте опцию 1 (import Head from 'next/head' и используйте <Head>...</Head>) в pages/_app.js, а затем она будет использоваться всеми стр.
Примечание:
Убедитесь, что если вы используете опцию 1 или 3, вы можете поместить свой файл css в /static/style.css (static - это специальный каталог в корне вашей next.js проект), а затем вы можете получить доступ к файлу, как этот (независимо от того, где вы собираетесь его использовать. адрес будет всегда таким):
<Head>
<link rel="stylesheet" href="/statics/style.css"/>
</Head>