Что делать если Bootstrap и jQuery не нужен в Joomla 3?
На днях столкнулся с проблемой, при верстке шаблона для Joomla 3. Я не использовал Bootstrap, а jQuery хотел подгружать с CDN Яндекса. При начальной верстке все шло гладко, но потом стал замечать, что в секцию <head начали залезать джумловские jQuery и Bootstrap. По подсказке коллег с JF я начал копать в сторону модулей и выявил этих лазутчиков. Они находятся в модулях и компонентов и прячутся за коротенькой строчкой:
JHtml::_('bootstrap.tooltip');Я нашел эту строчку в модуле mod_breadcrumbs.
Сделал свой шаблон модуля, закомментировав эту строку. И вроде все хорошо, но после установки JoomShopping-а, меня опять встречали эти «незванные гости». Полазив по файлам нашел подобную строчку в файле components/com_jshopping/lib/factory.php на 167 строке и опять закомментировал.
JHtml::_('bootstrap.framework');Правда в ситуации с модулем я переопределил шаблон, но как быть с JS пока не знаю. Возможно при обновлении (а у меня версия 4.1.0) файл перепишется. Так что если к вам лезут гости — ищем в модулях, компонентах строку: JHtml::_('bootstrap.
Bootstrap c CDN Yandex
Недавно зашел на JS хостинг Яндекса (CDN) и увидел там Bootstrap.
Естественно, т.к. мы делаем в основном сайты для русскоязычного населения, то есть в России, то нам удобно использовать эту CDN для наших проектов. Ведь скорость работы серверов яндекса в большинстве случаев быстрее, чем скорость работы, наших с вами хостингов. Я думаю вы все сами знаете про это, и про кэширование, поэтому пропущу этот шаг.
Итак, заходим на CDN Яндекса и видим там… только JS бутстрапа (на момент написания статьи они уже добавили CSS). Но я ж дотошный — и начал вручную в адресную строку вбивать остальные составляющие бутстрапа, в итоге там присутствуют все составляющие, кроме LESS. Тоесть там есть и 2 файла CSS и 2 файла PNG с белыми и черными иконками.
Кстати, на момент написания поста я вставил код бутстрапа 2.2.2… но зайдя на бутстрап, увидел, что там уже 2.3.0 — исправил в коде — все работает.
Косячим: Меню
Добрый день. Кратко расскажу об основной ошибке при создании главного меню на сайте.
На JoomlaForum есть раздел «Мой сайт на Joomla», который я периодически просматриваю. Глядя на работы новичков я, честно говоря, прихожу в ужас. Большинство работ сделаны по советам «10 грубейших ошибок при создании сайта», только советы были интерпритированы с точностью наоборот. Хочу немного обобщить всяческие советы непосредственно для меню.
Основная ошибка: слишком много пунктов меню
Зачем больше 5 пунктов в главном меню? У вас всегда есть футер. И тот человек, который ищет что-то конкретное, всегда докрутит до футера и кликнет, на интересующий его пункт меню. Вот пример отвратительного меню:
Главная | О нас | Почему мы | Цены | Услуги | Скидки | Акции | Предложение посредникам | Вакансии | Наша техника | Задайте нам вопрос |Косячим: Главная страница
Добрый день. В данном топике я хочу рассказать вам об основных «косяках» при создании главной страницы вашего сайта. А именно, хочу предостеречь вас от создания очередного унылого сайта, которых с каждым днем становится все больше и больше.
Почему именно главная страница — да потому, что это главная страница, стартовая, начальная. Вообщем откуда посетитель входит на ваш сайт. Есть исключения, когда посетитель пришел по ссылке с сайта или поисковой системы на конкретную страницу, но все-равно в большинстве случаев он перейдет на главную.
Шапка сайта
В шапке сайта укажите название вашего ресурса. Если название абстрактное, например
«Стуслов и сотоварищи», то постарайтесь написать небольшую аннотацию к названию вашего ресурса, например:
«Стуслов и сотоварищи»
Меховое ательеЭто сразу даст вашему посетителю понятие о том, чем занимается г-н Стуслов
Косячим: Изображения
Я обращаю внимание, что зачастую вебмастера и контент-менеджеры очень наплевательски относятся к изображениям на сайте. Это заключается в том, что они берут фотографию и вставляют ее на сайт в исходном варианте. Потом ставят ширину (или высоту или и то и другое) и всё. Фотография на сайте вроде небольшая по размеру, но «вес» значителен, что неблагоприятно сказывается на скорости загрузки страницы.
Попытаюсь поставить таких людей на путь истинный.
Для примера я взял одну из своих фотографий. Оригинальный размер: 2816 × 2112, размер файла 2.6 MB. Много, не правла-ли? Попробуем вставить ее на сайт вышеупомянутым «рукотазым» методом.
<img src="original_photo.jpg" width="640" height="480">Все нормально, фото небольшое, но весит так-же как и раньше — 2.6 MB. Этого доспускать нельзя. Открываем графический редактор и меняем размер фото, потом сохраняем как JPG.
Размер изображения 640x480, размер файла 603 kb.
Возможно вы обратили внимание, что эта картинка открылась не сразу. Это потому, что размер файла все-равно велик. Уменьшаем дальше
Косячим: Верстка текста.
Основные ошибки при верстке текста (контента) на сайте.
Несемантическая верстка
- Списки
Неверно:
- Пункт один;<br><br /> - Пункт два;<br><br /> - Пункт три.<br><br /> <br><br /> 1. Пункт один;<br><br /> 2. Пункт два;<br><br /> 3. Пункт три.
Верно:
- Пункт один;
- Пункт два;
- Пункт три.
- Пункт один;
- Пункт два;
- Пункт три.
- Параграфы
Неверно:
Параграф один. <br><br>
Параграф два.
Верно:
Параграф один.
<code><br />
Параграф два.
Неверно:
<code><span style="text-size: 24px;">Заголовок</span><br />Подзаголовок
<code><br />Подзаголовок
Верно:
Заголовок<code><br />Подзаголовок
<code><br />Подзаголовок
Встречаются и другие ошибки, но эти зачастили. Советую загуглить запрос «семантическая верстка». Там конечно рассказано про CSS, но все те правила нужно использовать и при верстке текстов. Основной смысл такой — если делаем спискок, то делает его тегом списка, если делаем заголовок, то тегом заголовка и т.д.
Перенос предлогов
на новую строчку
- Используем непереносимый пробел
Ошибочно:
В чащах юга жил бы цитрус? да, но фальшивый экземпляр!
Грамотно:
В&nbsр;чащах юга жил&nbsр;бы цитрус? да, но&nbsр;фальшивый экземпляр!
Для этого есть специальные утилиты, например «Реформатор»
Картинки без отступов
У любой картинки в тексте должен быть отступ, поэтому нам необходимо создать всего-лишь одно правило на CSS. Если блок с вашим контентом имеет id="content", то правило будет выглядеть так:
- Отступы у картинки
#content img {margin: 20px;}
Тег readmore в неположенном месте
Если вы поставите тег readmore в случайном месте, то все открытые до него теги будут закрыты тегами верстки, что в свою очередь на 99% перекосит весь дизайн сайта, особненно если вы используете div в верстке текста.
- Тег readmore
Ошибочно:
В чащах юга жил бы цитрус?
да, но фальшивый экземпляр!
Грамотно:
В чащах юга жил бы цитрус?
да, но фальшивый экземпляр!
Делайте верно, и оно будет красивым.
P.S. Скопировали — вставили текс из WORD — бросьте в себя камень, бейте себя по рукам, наймите здоровенного мужика с волосатыми руками, который будет стучать вам по голове, когда вы делаете это. Так делать нельзя ни в коем случае.
Как обновить сайт без ЧПУ и не потерять индексацию.
Недавно мне довелось переносить один сайт с какой-то там CMS на Joomla. По функциям это был сайт — каталог товаров. И если где-то в просторах интернета осталась ссылка на какой-то товар «старого» сайта, то при нажатии на нее у вас должен открыться «новый сайт» с этим-же товаром. Вроде все довольно просто, т.к. в Joomla 2.5 есть встроенный компонент перенаправления, в котором мы можем прописать старые ссылки и редиректить на новые, но… не тут то было.
На старом сайте все ссылки были неЧПУшные (httр://site.ru/index.php?cid=1&tid=2&fid=345) и поэтому встроенный модуль перенаправления просто не понимал эти ссылки, т.к. по своей сути все эти ссылки были -httр://site.ru/index.php и все остальное после этого были всего-лишь параметрами. Поэтому создавать перенаправление было бессмысленным. Первый скачанный модуль из JED действовал по такому-же принципу и мне пришлось идти другим путем:
Другой путь.
Сначала я разобрал ссылку старого сайта на составные части:
Первые шаги в LESS - примешивания
Доброе время суток.
Продолжаю цикл статей по LESS и мы с вами подошли к самой интересной части данного языка стилевой разметки, как примешивания. С помощью этих примешиваний мы можем сэкономить достаточное количество нервов и времени на этапе верстки. Долой CSS-ные портянки. Итак, сразу в бой.
Для примера я решил использовать CSS свойство border-radius и показать вам, как я (а в скором времени и вы) экономлю время.
Вот такие блоки я хочу увидеть в итоге:
html:
<div class="divOne"></div>
<div class="divTwo"></div>
<div class="divThree"></div>
<div class="divFour"></div> При использовании LESS я создаю одно свойство с 4 переменными, которые при примешивании мы будем использовать. По умолчанию значения переменных равно нулю.
Первые шаги в LESS - переменные
Я в предыдущем топике хотел рассказать про примешивания, но еще рано, т.к. сперва я должен рассказать вам про переменные, а уже следующий топик будет про примешивания.
По своей сути переменные в LESS это ничто иное, как обычные константы. Но да шут (фиг и т.д.) с ними. Решил создатель леса сказать что это переменные — будут переменные, но мы то знаем, что это константы. По опыту работы все эти константы действительно становятся раз в месяц переменными, т.к. редко какой сайт мы сделали и забыли и постоянно вносим правки.
Переменные нам нужны для того, чтобы определить их в одном месте, а затем использовать их в любом другом месте нашего стиля.
Например, создав переменную @green: #0a3; Мы можем потом использовать эту переменную в значениях таких свойств, как цвет текста, цвет фона, рамки, градиента и еще чего-нибудь.
Все, кто слушает мои
Первые шаги в LESS - вложенные правила
Итак. Первое упрощение, с которым я хочу вас познакомить — это вложенные правила. По сути своей они облегчают процесс как написания, так и чтения кода. Сразу приведу пример на верстке шапки сайта:
Код CSS
#header {background: #333;}
#header h1 {font-size: 36px;}
#header p {font-size: 24px;}
#header p a {color: #fff;}
#header p a:hover {color: yellow;}
Код LESS
#header {background: #333;
h1 {font-size: 36px;}
p {font-size: 24px;
a {color: #fff;
&:hover {color: yellow;}
}
}
}Объясню теперь подробнее. Хотя по коду уже должно быть все понятно.
В коде LESS первый селектор #header имеет свойство цвета фона и затем фигурная кавычка не закрывается, это значит что все последующие селекторы имеют вложенность в данный селектор. Эта вложенность может быть многоуровневая. Хороший пример многоуровневой вложенности показывает 5 строка (кстати, строки в коде CSS и LESS соответствуют друг другу).
Где здесь удобство:
