{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":25,"style":"BOLD"}],"text":"Привет. Сегодня настроим значки favicon для разных браузеров и устройств. Также проведем небольшой рефакторинг предыдущего кода.","type":"unstyled","key":"ditm1"},{"data":{"image":{"id":"684c394df0cba24df0130371"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"6cg2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":0,"style":"BOLD"}],"text":"Полезные ссылки:","type":"unstyled","key":"i39j"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":7,"offset":0}],"inlineStyleRanges":[],"text":"Часть 1. Подготовка и настройка проекта","type":"unstyled","key":"2d348"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":7,"offset":0}],"inlineStyleRanges":[],"text":"Часть 2. Настройка конфигурации и установка необходимых библиотек","type":"unstyled","key":"cest"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 3. Создание CSS-переменных и верстка блока Header","type":"unstyled","key":"89sqa"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 4. Верстка секции Hero, создание компонента Button","type":"unstyled","key":"59com"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 5. Верстка секции About","type":"unstyled","key":"1p84j"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 6. Верстка секции Gallery","type":"unstyled","key":"arop9"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 7. Верстка секции WhyUs","type":"unstyled","key":"dmbu7"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 8. Верстка секции Catalogue","type":"unstyled","key":"fml10"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 9. Верстка секции Map","type":"unstyled","key":"1bfqj"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 10. Верстка секции Footer","type":"unstyled","key":"cg4om"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 11. Создание якорных ссылок, рефакторинг","type":"unstyled","key":"69qvm"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 12. Создание мобильного меню","type":"unstyled","key":"e5h46"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 13. Анимация секций при скролле","type":"unstyled","key":"e9jtj"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 14. Установка метаданных","type":"unstyled","key":"9ibm"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 15. Настройка Favicon.ico","type":"unstyled","key":"4djd9"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 16. Настройка счетчика Яндекс Метрики","type":"unstyled","key":"9chm0"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":8,"offset":0}],"inlineStyleRanges":[],"text":"Часть 17. Публикуем проект на хостинге","type":"unstyled","key":"5a95b"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":9,"offset":38}],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Демо–проект лендинга можно посмотреть по ссылке.","type":"unordered-list-item","key":"8ns0"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":9,"offset":59}],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.","type":"unordered-list-item","key":"5oif4"},{"data":{},"depth":0,"entityRanges":[{"key":19,"length":9,"offset":48}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Код данного урока доступен в репозитории GitHub по ссылке.","type":"unordered-list-item","key":"draet"},{"data":{},"depth":0,"entityRanges":[{"key":20,"length":9,"offset":49}],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"В моём блоге этот урок в удобном для чтения виде по ссылке.","type":"unordered-list-item","key":"19f0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рефакторинг","type":"header-two","key":"2vrqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":313,"style":"BOLD"}],"text":"Прежде чем приступить к настройке favicon, отредактируем уже существующий код. В прошлых уроках мы добавляли анимацию к нашим секциям, для того чтобы всё работало корректно, необходимо ограничить область видимости наших секций до размера самого родительского блока, для этого в классы наших секций надо прописать «overflow-hidden».","type":"unstyled","key":"20nkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пример секции части кода секции:","type":"unstyled","key":"8rav3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"blockquote","key":"a56tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"61tft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавляем favicon","type":"header-two","key":"demth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для начала нам необходимо сгенерировать несколько различных иконок в разных форматах и размерах.","type":"unstyled","key":"1ovi5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В интернете полно онлайн-сервисов, где вы сможете это сделать, взяв за основу svg-иконку.","type":"unstyled","key":"54b2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На выходе вы должны получить вот такие файлы:","type":"unstyled","key":"9spbr"},{"data":{"image":{"id":"684c3e9d88161103517bef79"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"5j9f1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":28,"style":"BOLD"}],"text":"Поместите их в папку проекта /public","type":"unstyled","key":"8n0nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":8,"style":"BOLD"},{"length":5,"offset":47,"style":"BOLD"}],"text":"В файле layout.jsx пропишем наши иконки внутри head.","type":"unstyled","key":"e3pcl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":18,"style":"BOLD"}],"text":"Итоговый код файла layout.jsx","type":"unstyled","key":"1qsq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import { Inter } from 'next/font/google';","type":"blockquote","key":"dpl3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import './globals.css';","type":"blockquote","key":"ettup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const inter = Inter({","type":"blockquote","key":"ceqpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"subsets: ['cyrillic'],","type":"blockquote","key":"6i97t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],","type":"blockquote","key":"4bpfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: 'swap',","type":"blockquote","key":"c5hc9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"variable: '--font-inter',","type":"blockquote","key":"9c8po"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"});","type":"blockquote","key":"4v7sg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export const metadata = {","type":"blockquote","key":"daa6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"title: 'Строительство уютных загородных домов: комфорт гарантирован',","type":"blockquote","key":"dmoqd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"description:","type":"blockquote","key":"bmlg8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"'Строим уютные загородные дома с комфортом для жизни. От проекта до сдачи. Используем качественные материалы. Создаем пространство вашей мечты',","type":"blockquote","key":"6rnqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"keywords: 'строительство, дома, загородное, коттеджи, комфорт, проекты, под ключ, современные',","type":"blockquote","key":"bk32i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"};","type":"blockquote","key":"96avq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export default function RootLayout({ children }) {","type":"blockquote","key":"2je18"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"return (","type":"blockquote","key":"1irpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bpoqs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"15ks3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"12ei8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"31tt0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"5hu3h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"6e1k4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bqmsv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"65juh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"bvqor"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"{children}","type":"blockquote","key":"4n3h3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7qeom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":");","type":"blockquote","key":"4vblb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"blockquote","key":"46p3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"68p13"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В следующих статьях настроим добавим счетчик яндекс метрики на сайт.","type":"unstyled","key":"94tpb"},{"data":{},"depth":0,"entityRanges":[{"key":21,"length":9,"offset":48}],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Код данного урока доступен в репозитории GitHub по ссылке.","type":"unstyled","key":"4aa0t"},{"data":{},"depth":0,"entityRanges":[{"key":22,"length":14,"offset":59},{"key":23,"length":9,"offset":119}],"inlineStyleRanges":[{"length":30,"offset":0,"style":"BOLD"}],"text":"Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.","type":"unstyled","key":"8j5ca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"cQdMqEoXZOS94JxjHQ4l"}],"entityMap":{"11":{"data":{"url":"https://dzen.ru/a/aEAy_zM5IBQKBy0K"},"mutability":"MUTABLE","type":"LINK"},"22":{"data":{"url":"https://blog.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"url":"https://dzen.ru/a/aEQcUkkmw0a6dtsO"},"mutability":"MUTABLE","type":"LINK"},"23":{"data":{"url":"https://in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"url":"https://dzen.ru/a/aEgVVsPlMV4bMNLI"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/aEwzslhLgCKXIOhd"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"url":"https://dzen.ru/a/aFBYNBEcICKfQ3Bs"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://dzen.ru/a/aFQNIVD-C0ti3ZgQ","url":"https://dzen.ru/a/aFQNIVD-C0ti3ZgQ"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"url":"https://landing.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"18":{"data":{"url":"https://www.figma.com/community/file/1502413868477504587/landing-page-dzen-in9var"},"mutability":"MUTABLE","type":"LINK"},"19":{"data":{"url":"https://github.com/in9vr/Landing-page/tree/76f5dad3b1631a2be7254993583cc327bb6bf9cc"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"url":"https://dzen.ru/a/aBX2h46gP1Z1la-R"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://dzen.ru/a/aBixZUiqeF9Vfcpw"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://dzen.ru/a/aB0jLgh1EUXp3f7T"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"url":"https://dzen.ru/a/aB_K396Uyxz1KQar"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/aCO40iymiTAHMgcU"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"url":"https://dzen.ru/a/aCdVqjAYggyImU6f"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"url":"https://dzen.ru/a/aCxsEkQ20VMOQ2JK"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"url":"https://dzen.ru/a/aDBekv_uinPwqWSA"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"url":"https://dzen.ru/a/aDQ_yMu9Hlixt6Za"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"url":"https://dzen.ru/a/aDg1E6PIsXMnckTT"},"mutability":"MUTABLE","type":"LINK"},"20":{"data":{"url":"https://blog.in9var.ru"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"url":"https://dzen.ru/a/aDxQOtGUhFdfuKx_"},"mutability":"MUTABLE","type":"LINK"},"21":{"data":{"url":"https://github.com/in9vr/Landing-page/tree/76f5dad3b1631a2be7254993583cc327bb6bf9cc"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}