Пустая тема Magento 2 SASS для родителей и детей, установка и установка

создано 3 июля 2017 г., последнее обновление 3 июля 2017 г.

С CE 1.9 Magento представил SASS язык таблиц стилей, чтобы помочь развитию внешнего интерфейса. С Magento 2.x для причины, наиболее известные разработчикам они переключились с SASS на LESS. В конце дня и LESS, и SASS скомпилированы в старый добрый CSS, но если ваш предпочтительный язык таблиц стилей - SASS или вы новичок в Magento и ищете хороший стартовый блок для создания новой темы, тогда это того стоит. взглянуть на SnowDogApps пустой бланк проекта sass ,

Меньше озвучивать проект сообщества официально поддерживается Magento, и Theme Blank SASS является результатом этого проекта - пустая тема Magento 2 (готовая к производству), преобразованная в SASS.

Вместе с сопровождающим Пакет Fronttools Вы получаете инструменты разработки и расширяемую пустую тему на основе SASS, необходимую для того, чтобы начать создавать свою собственную тему.

  • Если вы выходите из Magento 1.9, то вы уже знакомы с SASS
  • Magento 2.x может в будущем перейти на SASS
  • LUMA не предназначена для расширения в качестве пустой темы
  • Основные инструменты разработки, такие как браузерная синхронизация включены

Вы можете начать работу с темой SASS и fronttools через несколько минут. Вот пошаговое руководство по установке пустых тем sass и frontools на моем компьютере. Контейнеры-докеры Magento 2.x.

Я устанавливаю родительскую тему и fronttools прямо в мой док-контейнер Magento 2 php-apache с помощью bash-скрипта:

curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/install-theme-blank-sass.sh | удар

скрипт для установки theme-blank-sass и fronttools

#! / bin / bash # GAITERJONES # blog.gaiterjones.com # скрипт для установки theme-blank-sass и fronttools # для службы докеров https://github.com/gaiterjones/docker-magento2 # set -e # variable RED = '\ 033 [0; 31m' NC = '\ 033 [0m' # ИЗМЕНИТЬ ЭТО MAGENTO_DIR = '/ var / www / dev / magento2' NVM_HOME = '/ var / www' # start printf "$ {RED} Установка темы- blank sass в Magento Root: $ {MAGENTO_DIR} ... \ n \ n $ {NC} "cd $ {MAGENTO_DIR} композитору требуется snowdog / theme-blank-sass, композитору требуется snowdog / frontools $ {MAGENTO_DIR} / bin / magento setup: обновить $ {MAGENTO_DIR} / bin / magento кеш: очистить printf "$ {RED} Установка nvm ... \ n $ {NC}" cd / tmp curl -o- https://raw.githubusercontent.com/creationix /nvm/v0.33.1/install.sh | bash export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" nvm install --lts nvm use --lts printf "$ {RED} Установка gulp ... \ n $ {NC}" npm install -g gulp-cli printf "$ {RED} Установка frontools ... \ n $ {NC} "cd $ {MAGENTO_DIR} / vendor / snowdog / frontools npm установить настройку gulp curl -o" $ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json "http: / /gaiterjones.com/dropbox/magento2/theme-blank-sass/browser-sync.json curl -o "$ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json" http://gaiterjones.com/dropbox /magento2/theme-blank-sass/themes-blank-sass-parent.json curl -o "$ {MAGENTO_DIR} /vendor/snowdog/theme-blank-sass/web/images/logo.svg" http: // gaiterjones .com / dropbox / magento2 / theme-blank-sass / logo-theme-blank-sass.svg printf "$ {RED} Создание стилей theme-blank-sass ... \ n $ {NC}" gulp styles printf "$ {RED} Настройка Snowdog / пустой темы. \ N $ {NC} "THEME_ID =" $ (n98-magerun2.phar dev: theme: list --format = csv \ | grep 'Snowdog / blank' | cut -d, - f1) "\; test -n "$ {THEME_ID}" \ && n98-magerun2.phar config: установить design / theme / theme_id "$ {THEME_ID}" $ {MAGENTO_DIR} / bin / magento кеш: clean # done printf "$ {RED} Установка полный. \ п \ п $ {NC}»

Вот команды сценария, разбитые на несколько более подробных:

Установите переменные среды установки

cd $ {MAGENTO_DIR} MAGENTO_DIR = '/ var / www / dev / magento2' NVM_HOME = '/ var / www'

MAGENTO_DIR - это путь к корневому каталогу magento, а NVM_HOME - путь к домашней папке установки NVM - это домашняя папка для пользователя, устанавливающего NVM

Установите тему и инструменты с композитором, обновите Magento и обновите кеш.

для композитора требуется snowdog / theme-blank-sassinstall theme blank sass composer требуется snowdog / frontoolsinstall fronttools $ {MAGENTO_DIR} / bin / magento setup: upgradeupdate Magento $ {MAGENTO_DIR} / bin / magento кеш: cleanrefresh caches

Установите NVM и gulp-cli

cd / tmp curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" nvm install --lts nvm use --lts npm install -g gulp-cli

Установите frontools.

cd $ {MAGENTO_DIR} / vendor / snowdog / frontools npm install

Вы запускаете установку fronttools с установкой gulp, это скопирует примеры файлов конфигурации проекта в $ {MAGENTO_DIR} / dev / tools / frontools / config /. Вы должны отредактировать themes.json для родительской темы.

{"blank": {"src": "vendor / snowdog / theme-blank-sass", "dest": "pub / static / frontend / Snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}}

Скрипт копирует мои темы и файлы конфигурации json для синхронизации с браузером через curl.

gulp setup curl -o "$ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json" http://gaiterjones.com/dropbox/magento2/theme-blank-sass/browser-sync.json curl -o " $ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json "http://gaiterjones.com/dropbox/magento2/theme-blank-sass/themes-blank-sass-parent.json gulp styles

Затем я компилирую SASS в CSS и устанавливаю его, используя

стили глотка

Наконец то пользуюсь n98-magerun2 включить новую тему и обновить кэши Magento.

THEME_ID = "$ (n98-magerun2.phar dev: theme: list --format = csv \ | grep 'Snowdog / blank' | cut -d, -f1)" \; test -n "$ {THEME_ID}" \ && n98-magerun2.phar config: установить design / theme / theme_id "$ {THEME_ID}" $ {MAGENTO_DIR} / bin / magento кэш: очистить


Тема пустая SASS родительская тема теперь установлена. Вы можете посмотреть процесс установки ниже.

Мы использовали настройку gulp и задачи стилей gulp выше - другие полезные задачи включают

  • глоток
    • Удаляет содержимое каталога / pub / static.
  • глоток
    • Запускается browserSync и наследование, бабель, стили, задачи часов.

См. Страницу проекта fronttools для получения полного списка задач gulp или используйте задачу по умолчанию gulp.

Обычная лучшая практика Magento гласит, что вместо того, чтобы редактировать родительский объект, мы расширяем его дочерней темой. Вы расширяете Snowdog / blank так же, как любая другая тема ,

<theme xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" xsi: noNamespaceSchemaLocation = "urn: magento: framework: Config / etc / theme.xsd"> <title> Gaiterjones / blank < / title> <parent> Snowdog / blank </ parent> <media> <preview_image> media / preview.jpg </ preview_image> </ media> </ theme>

Я протестировал это в своей среде Docker и использовал следующий скрипт для расширения пустой темы SASS с моей дочерней темой Gaiterjones / blank.

curl -o- http://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/install-child-theme-blank-sass.sh | удар

скрипт для установки дочерней темы theme-blank-sass #! / bin / bash # GAITERJONES # blog.gaiterjones.com # скрипт для установки примера дочерней темы theme-blank-sass # set -e # variable RED = '\ 033 [0; 31m 'NC =' \ 033 [0m '# ИЗМЕНИТЬ ЭТО MAGENTO_DIR =' / var / www / dev / magento2 'NVM_HOME =' / var / www '# start printf "$ {RED} Установка дочерней темы theme-blank-sass в Корень Magento: $ {MAGENTO_DIR} ... \ n \ n $ {NC} "n98-magerun2.phar обслуживание: включить CD $ {MAGENTO_DIR} / app / design / frontend curl https://pe.terjon.es/dropbox /magento2/theme-blank-sass/child/gaiterjones-blank-child-theme-blank-sass.tar | tar x $ {MAGENTO_DIR} / bin / magento setup: обновить cd $ {MAGENTO_DIR} / vendor / snowdog / frontools printf "$ {RED} Настройка Gaiterjones / пустая тема. \ n $ {NC}" THEME_ID = "$ (n98- magerun2.phar dev: theme: list --format = csv \ | grep 'Gaiterjones / blank' | cut -d, -f1) "\; test -n "$ {THEME_ID}" \ && n98-magerun2.phar config: установить design / theme / theme_id "$ {THEME_ID}" printf "$ {RED} Установка новой конфигурации themes.json ... \ n $ {NC } "curl -o" $ {MAGENTO_DIR} /dev/tools/frontools/config/themes.json "https://gaiterjones.com/dropbox/magento2/theme-blank-sass/child/themes-blank-sass-parent -child.json printf "$ {RED} Генерация стилей бланка темы ... \ n $ {NC}" export NVM_DIR = $ {NVM_HOME} /. nvm [-s "$ NVM_DIR / nvm.sh"] && \. "$ NVM_DIR / nvm.sh" стили gulp $ {MAGENTO_DIR} / bin / magento кеш: очистить n98-magerun2.phar обслуживание: отключить # done printf "$ {RED} Установка завершена. \ N \ n $ {NC}"

Сценарий извлекает исходные файлы дочерней темы Gaiterjones / blank в app / design / frontend / Gaiterjones / blank и обновляет Magento. Нам также необходимо обновить конфигурационный файл fronttools themes.json, чтобы он знал, где находится наша дочерняя тема.

{"blank": {"src": "vendor / snowdog / theme-blank-sass", "dest": "pub / static / frontend / Snowdog / blank", "locale": ["en_GB"], "postcss ": [" plugins.autoprefixer () "]," ignore ": [" .test "]}," gaiterjones-blank ": {" src ":" app / design / frontend / Gaiterjones / blank "," dest " : "pub / static / frontend / Gaiterjones / blank", "locale": ["en_GB"], "localeOverwrites": true, "parent": "blank", "postcss": ["plugins.autoprefixer ()"] }}

Затем я активирую тему с помощью n98-magerun2, а затем мне просто нужно обновить кэши и снова запустить стили gulp, чтобы создать CSS для нашей дочерней темы.

стили gulp $ {MAGENTO_DIR} / bin / magento кеш: чистый

Fronttools компилирует и устанавливает CSS для нашей дочерней темы, которая теперь установлена ​​и готова к просмотру.

Вы можете увидеть пустую тему SASS в действии на моем разработка сайта ,

Похожие

Magento SEO Архивы
... ие для развития вашего бизнеса, который развивался в последние годы"> Существует одно главное препятствие для развития вашего бизнеса, который развивался в последние годы. Ваши потенциальные покупатели перенасыщены информацией из-за увеличения доступности этой информации. Фактически, Sirius Decisions сообщила, что средний цикл продаж увеличился на 22% за последние пять лет из-за того, что все больше лиц, принимающих решения, были вовлечены в процесс покупки. Таким образом,
Как создать переписывание URL в Magento 2
... для получения дополнительной информации. Разрешить владельцам магазинов вставлять ценные ключевые слова, которые лучше поддерживают индекс продукта поисковыми системами , Кроме того, инструмент перезаписи URL также позволяет создавать дополнительные URL-адреса для временного сезонного изменения или постоянного изменения, в то время как любой допустимый путь, включая
Много возможностей! 5 из лучших и бесплатных интернет-магазинов WordPress Themes
WordPress, как одна из лучших платформ для создания веб-сайтов, обладает невероятными возможностями. Эту платформу можно использовать не только для блогов или сайтов компаний, но также для электронной коммерции или интернет-магазинов. Если вы не знаете, что такое электронная коммерция, это будет немного объяснено. Эта электронная коммерция
Magento 2 Canonical Meta Tag: решение проблем с дублированным содержимым
Узнайте, как включить метатег Canonical в Magento 2 , следуя этой теме. Канонический метатег является очень важным метатегом в SEO а использование канонического метатега может улучшить рейтинг вашего сайта и сконцентрировать просмотры страниц. Это очень помогает в решение проблем с дублированным
Тема поддержки SEO для Firefox
Наша CMS показывает только 300 комментариев на странице. Я уверен, что есть способ улучшить это, но для простоты публикации и после разговоров я решил закрыть последний SEO для Firefox нить и начать новый. Если у вас есть какие-либо вопросы о SEO для Firefox, это место, чтобы
Бесплатный отзывчивый шаблон электронной почты: тема благодарения
... ия мы хотели бы поделиться с вами чистым, простым и профессиональным отзывчивым шаблоном электронной почты"> В этот День благодарения мы хотели бы поделиться с вами чистым, простым и профессиональным отзывчивым шаблоном электронной почты. Этот шаблон совместим с несколькими почтовыми клиентами, такими как Outlook 2007, Gmail, Yahoo! Почта и многое другое. Эта халява предоставляется службой кодирования рассылки HTML, EmailCraft.com
Magento SEO советы: распространенные ошибки, которых следует избегать
... для Magento SEO, которые могут быть неочевидны для тех, кто имеет более скромный опыт SEO. Если вы ищете универсальное решение для последней версии, попробуйте это Magento 2 SEO расширение. Мой бывший коллега по колледжу подошел ко мне и попросил помощи. В течение 6 месяцев она изо всех сил старалась довести свой магазин кружек и чашек, сделанный своими руками, по крайней мере, до 20 или 30,
SEO Quick Wins: 12 советов по оптимизации Magento Seo
Мы понимаем, что пользователь magento в целом и наш клиент в частности хотят получить более высокий рейтинг в Google. Поэтому я решил написать этот пост, чтобы показать вам 12 советов по оптимизации magento seo. Давайте проверим и следуем этим советам, я уверен, что это очень полезно для вас. 1. Фокус на качество сайта Самое важное, что всегда заботит Google, - это качество вашего сайта. Ваш сайт создает лучший опыт и помогает поисковикам найти то, что они ищут?
Magento SEO Советы
Если вы работаете или планируете открыть интернет-магазин, Magento является одной из наиболее удобных платформ электронной коммерции для поисковых систем, чтобы создать хороший рынок для ваших продуктов. После настройки магазина ваши главные приоритеты должны заключаться в том, чтобы потенциальные клиенты нашли вас. Поисковая оптимизация это первое, на что должен обратить внимание веб-мастер при создании сайта.
Ранжирование с оптимизацией текста по wdf * idf
... установка Следующие критерии применяются к выбранным доменам: Домены с точным соответствием (EMD) Онлайн в течение нескольких лет Небольшие проекты с домашней страницей и несколькими подстраницами Низкое количество доменов, только слабые обратные ссылки В течение многих месяцев без изменений в тексте домашней страницы Нет других активных мер ( ссылка
5 лучших шаблонов для SEO и AdSense для быстрой загрузки
... им лучшие SEO Adsense дружественные и быстро загружаемые шаблоны для блоггеров . Если вы отчаянно хотите начать вести блог, то в контрольный список нужно добавить много вещей, таких как Content, CMS (Platform) и Design. Кроме того, есть много других вещей, о которых нужно позаботиться, но для начала, эти три вещи действительно важны. Я уже упоминал вещи, о которых нужно позаботиться, пока подать заявку

Комментарии

Какова тема пресс-релиза?
Какова тема пресс-релиза? Почему читатели должны заботиться? Зачем. Почему вы рассылаете пресс-релиз? Как это влияет на ваших клиентов или читателей? Когда. Когда происходит тема пресс-релиза (например, релиз продукта или новый прокат)? Где Где находится ваша компания? Если есть событие, о котором нужно знать, где оно происходит? Как. Какое значение имеет тема вашего пресс-релиза? Как это помогает вашим читателям?
Оптимизация Magento SEO не слишком сложна, верно?
Оптимизация Magento SEO не слишком сложна, верно? 9. Мета-описание Хотя мета-описание в основном приводится для того, чтобы побудить поисковиков выбирать ваш пост, оно также приносит пользу вашему SEO. Вместе с заголовком сообщения Google также использует мета-описание для понимания вашего контента. 10. Заголовок H1 теги Одним из
Какова тема вашего текста?
Какова тема вашего текста? Только когда вы знаете это, вы можете определить ключевые слова и проверить объем поиска. Тем самым вы получаете помощь от таких инструментов, как KWFinder , который также покажет вам, что делают конкуренты. Может быть полезно использовать альтернативные термины. Чем больше людей используют одни и те же ключевые слова, тем сложнее найти это ключевое слово. Поэтому во многих случаях стоит выбирать ключевые слова с меньшей
О чем эта тема?
О чем эта тема? Какие веб-страницы Google показывает в топ-10? Какие предложения он дает нам в нижней части страницы? Нажав несколько раз на связанные поиски, мы уже можем добавить наш первый список ключевых слов (который гарантированно будет найден!) В наш список. Совет: чтобы получить еще больше
Чему детей следует учить?
Чему детей следует учить? В то время как люди спорят по поводу ответов на эти вопросы, все, похоже, согласны с тем, что независимо от ответов они будут иметь далеко идущие последствия. Неизбежно я задал себе жизненно важный вопрос, который никто из комментаторов даже не задумывался : почему бы вообще не отказаться от английской литературы в пользу SEO-классов? SEO и человеческий дух Либеральные искусства, такие как литература, ценятся потому,
Ага, вот как Анжра обсуждала пример с Amazon, есть ли тема, похожая на дисплей Amazon?
Ага, вот как Анжра обсуждала пример с Amazon, есть ли тема, похожая на дисплей Amazon? НЕ ЕЩЕ. Только на самом деле существует ряд Премиум-тем, которые уже содержат некоторые принципы, принятые Amazon. Некоторые из них рекомендуется купить, а затем установить в качестве дисплея магазина, а именно: ТЕМА WORDPRESS SMART SHOP ОНЛАЙН МАГАЗИН (скачать Themenya НАЖМИТЕ ЗДЕСЬ )
Почему эта тема не должна быть общедоступной и связана со многими другими новостными лентами?
Почему эта тема не должна быть общедоступной и связана со многими другими новостными лентами? Содержание король Email маркетинг Еще один очень хороший способ получить ссылки - это перейти на электронный маркетинг. Это можно сделать, создав список рассылки
Для 13-летних детей также нормально начинать эксперименты с разными людьми после того, как они начинают отвечать на вопрос «Кто я?
Для 13-летних детей также нормально начинать эксперименты с разными людьми после того, как они начинают отвечать на вопрос «Кто я?» Избегайте силовых сражений. Когда ваш подросток говорит: «Это несправедливо» или «Я сделаю это позже», не спорьте. Установите сильный предел и покажите

Ваш сайт создает лучший опыт и помогает поисковикам найти то, что они ищут?
Какова тема пресс-релиза?
Почему читатели должны заботиться?
Почему вы рассылаете пресс-релиз?
Как это влияет на ваших клиентов или читателей?
Когда происходит тема пресс-релиза (например, релиз продукта или новый прокат)?
Где Где находится ваша компания?
Если есть событие, о котором нужно знать, где оно происходит?
Какое значение имеет тема вашего пресс-релиза?
Как это помогает вашим читателям?