Задать вопрос
ws17

Антон Вебсайтовский

Комментарии

  • Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

    ws17
    @ws17 Автор вопроса
    Данный метод выводит, но если смотреть код страницы, то в head, не видно.
    Написано

  • Как изменить размер svg-иконки в файле img.svg?

    ws17
    @ws17
    такой метод не работает
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, ну разницы нет где собирать, главное формат данного пакета, чтобы подходил, и тогда будет выводить иконки.
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, Понял, то есть, если на сайте иконок много, и на странице 20, то запрос будет один.
    Да хочу в рамках vue3 сделать, чтобы все по феншуй было )
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, Все же пришли к тому, что спрайтами лучший вариант )))
    И как я понял, для этого, нужно использовать icons.svg, где будет куча иконок и мы вытягивать их можем.

    Таким образом:
    <svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>


    Но и то как у меня щас, тож я так понимаю можно подключить один файл и вытягивать нужные иконки.
    Я если верно понял, то подгружаем так:

    import MyIcon from './assets/icons/iconsall.svg'

    И выводим так: (где #home-icon), имя иконки.
    <svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>


    А или даже так можно выводить: (а он так каждый раз будет лесть и искать, это нагрузку не увеличит ?)
    <svg class="icon">
  <use xlink:href="icons.svg#home-icon"></use>
</svg>


    Сайт где я собираю иконки в пак, там есть для сохранения разные решения.
    Вот думаю что поставить, чтобы сохранил в ...
    67b70c0d972ff234007396.jpeg

    Хотя смотрю он сохраняет, формат вроде, то что надо для спрайтов.
    <symbol id="icon-ogo1l" viewBox="0 0 32 32">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</symbol>


    Работает, и стили:
    .icon {
width: 30px;
fill: #007bff;
}
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, А как выводить спрайтами, подключив один файл, где много иконок.

    <svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>


    1. Вставка SVG как кода ()
    Преимущества:
    Гибкость: Вы можете изменять цвет, размер и другие атрибуты SVG с помощью CSS или JavaScript.
    Производительность: SVG, встроенные как код, не требуют дополнительных HTTP-запросов, что ускоряет загрузку страницы.
    Анимация: Вы можете анимировать элементы SVG с помощью CSS или JavaScript.
    Доступность: Можно добавить ARIA-атрибуты для улучшения доступности.

    Недостатки:
    Усложнение кода: Вставка SVG как кода увеличивает объём HTML-кода, что может сделать его менее читаемым.
    Кэширование: SVG не кэшируются отдельно, так как они являются частью HTML.
    SEO: Если SVG используется для декоративных целей, это не влияет на SEO. Однако, если SVG содержит текстовую информацию, её можно индексировать.
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
  <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
</svg>


    2. Вставка SVG как изображения ()
    Преимущества:
    Простота: Вставка SVG через делает код чище и проще для чтения.
    Кэширование: SVG, загруженные как изображения, кэшируются браузером, что улучшает производительность при повторных посещениях.
    SEO: Вы можете использовать атрибуты alt и title для описания изображения, что полезно для SEO и доступности.
    Удобство: Легко заменять иконки, не изменяя HTML-код.

    Недостатки:
    Ограниченная гибкость: Вы не можете изменять цвет или анимировать SVG с помощью CSS, если они вставлены через .
    Дополнительные HTTP-запросы: Каждое изображение требует отдельного запроса, что может замедлить загрузку страницы.

    <img src="/src/assets/icons/02-home-page.svg" alt="Домой" title="Перейти на главную страницу">


    3. Альтернативный подход: использование с SVG-спрайтами

    Этот подход сочетает в себе преимущества обоих методов. Вы создаёте SVG-спрайт (один файл с несколькими иконками) и используете его через .

    Преимущества:
    Кэширование: SVG-спрайт кэшируется как один файл.
    Гибкость: Вы можете изменять цвет и размер иконок с помощью CSS.
    Чистый код: HTML остаётся чистым, так как SVG-код находится в отдельном файле.

    Создайте SVG-спрайт:
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="home-icon" viewBox="0 0 32 32">
    <path d="M4.351 29.461s-.028.715.67.715l8.066-.009.012-6.61s-.114-1.09.944-1.09h3.347c1.251 0 1.174 1.09 1.174 1.09l-.014 6.588h7.896c.887 0 .847-.891.847-.891V17.069L16.165 7.171 4.352 17.069V29.46zM0 16.148s1.003 1.849 3.191 0L16.263 5.089l12.256 10.99c2.532 1.826 3.481 0 3.481 0L16.263 1.824zM28.222 5.063h-3.153l.013 3.823 3.14 2.663z"></path>
  </symbol>
</svg>


    Используйте иконку в HTML:
    <svg class="icon">
  <use xlink:href="#home-icon"></use>
</svg>

    ------------------------
    4. Что выбрать?

    Используйте встроенный SVG ():
    Если вам нужно изменять цвет или анимировать иконку.
    Если иконка небольшая и используется один раз на странице.

    Используйте :
    Если иконка используется многократно и должна кэшироваться.
    Если вам важны атрибуты alt и title для SEO.

    Используйте SVG-спрайты:
    Если у вас много иконок, и вы хотите сохранить гибкость и производительность.
    ------------------------
    5. SEO и доступность
    Для SEO всегда добавляйте атрибуты alt и title, если SVG используется как изображение ().
    Для встроенного SVG используйте ARIA-атрибуты, такие как aria-label или role="img", чтобы улучшить доступность.
    ------------------------
    Итог
    Для простоты и SEO: Используйте .
    Для гибкости и анимации: Используйте встроенный SVG ().
    Для баланса: Используйте SVG-спрайты с .
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, так как лучше иконку выводить, в img, теге можно писать титле и алт, что плюс для сайта.

    Там и класс прописать можно.
    02-home-page.svg

    А тут как класс прописать?
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, как просто выводить с этим плагином.
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, да там плагин можно поставить, в нем видно ! но вс коде грузиться дольше, чем обычный просмотр фото в винде.

    Насчет вывода в картинку, так? (кстати, работает).
    <img src="assets/logo-letters.svg?component" alt="" title="">
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, А мне удобно так, я собрал пак и все, есть сайт, где я загружаю пак свой, и там удаляю, меняю, добавляю.

    Вообще я подумал, ты прав, куда проще сразу в папке удалять или добавлять, минус, что не видно какая иконка в win10, надо открывать ее, чтоб видно было. Ну либо сразу на сайте выводить, чтоб видно было.

    Минус данного модуля, что как картинку нельзя вывести или можно?, img, лучше для seo.

    Насчет: (почему-то не заработало у меня)
    https://www.npmjs.com/package/vite-svg-loader
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    MaxRyazan, а все понял, я пробовал метод vue-svg-sprite, но так и не вышло.
    Значит, указываем папку и там каждая иконка должна отдельно лежать, а не в одном файле.
    Хотя в этом есть смысл, скачал иконку и не надо запихивать в пакет иконок и потом все это сохранять, а сразу можно будет закинуть в папку.

    Попробую данный метод, который советуешь.
    Спасибо.

    А в каком формате в файле должны быть иконки? да id есть.

    <?xml version="1.0" encoding="utf-8"?>
<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="752" height="128" viewBox="0 0 752 128">
<svg id="icon-ogo1l" width="32" height="32" viewBox="0 0 32 32" x="0" y="0">
<path d="M5.286 2.675c-1.254 0.422-2.125 1.267-2.534 2.458-0.269 0.742-0.243 1.984 0.051 2.611 0.448 0.986 11.942 20.992 12.237 21.299 0.192 0.192 0.486 0.32 0.858 0.358 0.512 0.064 0.627 0.026 0.96-0.294 0.218-0.205 1.126-1.638 2.035-3.187 0.896-1.549 2.33-4.019 3.187-5.504s2.778-4.787 4.275-7.334c1.485-2.56 2.79-4.915 2.893-5.222 0.307-0.909 0.243-2.163-0.141-2.995-0.358-0.781-1.062-1.574-1.651-1.882-1.011-0.538-1.254-0.55-11.584-0.55-9.19 0.013-9.971 0.026-10.586 0.243zM14.592 13.978c0 5.171-0.051 8.55-0.115 8.486-0.064-0.077-1.139-1.907-2.394-4.096-1.242-2.189-3.264-5.722-4.48-7.846-1.229-2.138-2.227-4.019-2.227-4.186 0-0.154 0.115-0.435 0.269-0.627l0.256-0.333h8.691v8.602zM26.355 5.709c0.371 0.461 0.346 1.114-0.064 1.83-0.192 0.32-0.64 1.101-1.011 1.741-2.496 4.275-5.248 8.998-5.363 9.216-0.525 0.96-2.419 4.16-2.458 4.16-0.026 0-0.051-3.891-0.051-8.64v-8.64h8.691l0.256 0.333z"></path>
</svg>
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    Антон Антон, так у меня и так собраны, я собираю обычно через сайт один, делаю себе сборку иконок одним файлом.
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    MaxRyazan, я одно понять не могу, почему такие сложности с внедрением таких простых элементов.

    А данный модуль,как работает, там можно файл с иконками подключить, ну не где 1 иконка, а пакет целый и потом вытягивать нужные иконки и выводить.
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    а запросы как идти будет, у данного модуля, через http(s)?
    Написано

  • Vue3, плагин для вывода svg, vue-svg-sprite, как правильно включить?

    ws17
    @ws17 Автор вопроса
    это все в рамках vue3? или же нет.
    Написано

  • Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

    ws17
    @ws17 Автор вопроса
    А что в vue3, проблемы, чтобы организовать такое, я сегодня еще пол дня пытался подключить стек svg, и выводить с него нужные иконки ), пока не сделал.
    Написано

  • Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

    ws17
    @ws17 Автор вопроса
    Работает кстати, спасибо
    Разбираюсь, как добавить кеювордс и дискрипшион и в глобальный вывод хеад стили и т.д, ну и вывести какие-то подключаемые js и стили css.

    const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse

// Функция для загрузки шаблонов
function loadTemplate(url) {
	return fetch(url)
		.then(response => response.text())
		.catch(() => '<div>Ошибка загрузки контента</div>')
}

// Компонент для главной страницы
const Home = {
	setup() {
		const title = useTitle('Главная страница') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/main.php')
	},
	template: `<div v-html="content"></div>`,
}

// Компонент для страницы контактов
const Contacts = {
	setup() {
		const title = useTitle('Контакты') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/contacts.php')
	},
	template: `<div v-html="content"></div>`,
}

// Настройка маршрутов
const routes = [
	{ path: '/', component: Home },
	{ path: '/contacts', component: Contacts },
]

// Создание роутера
const router = createRouter({
	history: createWebHistory(),
	routes,
})

// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
	const title = to.meta.title || 'Мой сайт' // Используйте meta-поля в маршрутах
	useTitle(title) // Обновляем заголовок
})

// Создание Vue приложения
createApp({}).use(router).mount('#app')


    Пробовал такой вариант, не работает.
    const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter
const { useTitle } = window.VueUse

// Функция для загрузки шаблонов
function loadTemplate(url) {
	return fetch(url)
		.then(response => response.text())
		.catch(() => '<div>Ошибка загрузки контента</div>')
}

// Компонент для главной страницы
const Home = {
	setup() {
		const title = useTitle('Главная страница') // Устанавливаем заголовок
		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/main.php')
	},
	template: `<div v-html="content"></div>`,
}

// Компонент для страницы контактов
const Contacts = {
	setup() {
		const title = useTitle('Контакты') // Устанавливаем заголовок

		// Устанавливаем description и keywords
		const metaDescription = document.querySelector('meta[name="description"]')
		const metaKeywords = document.querySelector('meta[name="keywords"]')

		if (metaDescription) {
			metaDescription.setAttribute('content', 'Описание главной страницы')
		}
		if (metaKeywords) {
			metaKeywords.setAttribute('content', 'нумерология, калькуляторы, главная')
		}

		return { title }
	},
	async mounted() {
		this.content = await loadTemplate('/contacts.php')
	},
	template: `<div v-html="content"></div>`,
}

// Настройка маршрутов
const routes = [
	{
		path: '/',
		component: Home,
		meta: {
			title: 'Главная страница',
			description: 'Описание главной страницы',
			keywords: 'нумерология, калькуляторы, главная',
		},
	},
	{
		path: '/contacts',
		component: Contacts,
		meta: {
			title: 'Контакты',
			description: 'Описание страницы контактов',
			keywords: 'нумерология, контакты',
		},
	},
]

// Создание роутера
const router = createRouter({
	history: createWebHistory(),
	routes,
})

// Глобальное отслеживание изменения маршрута
router.afterEach(to => {
	// Устанавливаем заголовок страницы
	const title = to.meta.title || 'Нумерология - калькуляторы'
	useTitle(title)

	// Устанавливаем description и keywords
	const metaDescription = document.querySelector('meta[name="description"]')
	const metaKeywords = document.querySelector('meta[name="keywords"]')

	if (metaDescription) {
		metaDescription.setAttribute(
			'content',
			to.meta.description || 'Описание по умолчанию'
		)
	}
	if (metaKeywords) {
		metaKeywords.setAttribute(
			'content',
			to.meta.keywords || 'ключевые слова по умолчанию'
		)
	}
})

// Создание Vue приложения
createApp({}).use(router).mount('#app')
    Написано

  • Пытаюсь вывести title и т.д. для каждой страницы через vue3, vueuse/head, как правильно сделать?

    ws17
    @ws17 Автор вопроса
    спасибо, щас попробую, а то искал информацию, по разному пробовал и не выходило, гпт, тож толкают методы, которые не пашут.
    Написано

  • YoutubeDL (yt_dlp) и массовые прокси, кто как подключает список с проксями?

    ws17
    @ws17 Автор вопроса
    Phoenix32, На YouTube Personal Access Token (PO токен) не используется в прямом смысле, как это делается на других платформах (например, GitHub, GitLab или Bitbucket). Однако вы можете использовать OAuth 2.0 токены для авторизации приложений и взаимодействия с API YouTube.
    Написано

  • YoutubeDL (yt_dlp) и массовые прокси, кто как подключает список с проксями?

    ws17
    @ws17 Автор вопроса
    Phoenix32, Ну, можно с каждым прокси обновлять куки, дорогие резедентские прокси, сколько отдаешь ?
    Как в тг написать тебе.

    PO токен - смотрел информацию, но я чет запутался, это же когда мы берем куки, там и есть токен, сид фраза.
    Мне тут на гитхабе в ветке yt_dlp, ответили, что еще не поддерживает yt_dlp это PO токен.
    Написано