- Django: не может обновлять css изменения
- Почему CSS и JS не обновляется? Как обновить принудительно?
- Почему происходит кэширование файлов?
- Как обновить версию style.css?
- Как сделать автоматическое обновление версии файла style.css?
- Почему браузер во время разработки не обновляет измененные стили?
- Почему при изменении css и HTML файла не обновляется сайт?
Django: не может обновлять css изменения
После запуска моего сервера на моей странице не отображаются обновления, которые я сделал в файле CSS. Моя панель навигации не распознает правило css: .navbar-bg
python manage.py collectstatic --noinput --clear body < font-family: 'Roboto', sans-serif; >/* === NavBar === */ .nav-item < letter-spacing: .2em; font-size: 14px; text-transform: uppercase; >.dropdown-item < >/* == Footer ==== */ .my_footer < background-color: #5a6268; >.my_footer p < padding-top: 20px; font-size: 14px; >/* == Category Page == */ .my_row_class < padding-top: 15px; >.my_row_class .mx-auto p < color: #000; font-size: 12px; >.my_row_class .mx-auto p a < color: #000; font-size: 12px; text-decoration: none; >.my_image < width: 100%; height: auto; >.my_title < font-size: 16px; text-transform: uppercase; letter-spacing: .2em; >.my_image_padding < padding-top: 16px; >.my_bottom_margin < margin-bottom: 10px; >.card-body h4 < font-size: 14px; text-transform: uppercase; letter-spacing: .2em; >/*=== Product Page ==*/ .my_prod_row_class < padding-top: 15px; padding-bottom: 20px; >.my_prod_row_class .mx-auto p < color: #000; font-size: 12px; >.my_prod_row_class .mx-auto p a < color: #000; font-size: 12px; text-decoration: none; >.my_prod_title < font-size: 16px; text-transform: uppercase; letter-spacing: .2em; padding-top: 15px; padding-bottom: 10px; >.my_prod_text < padding-right: 20px; >.my_search_text < padding-top: 20px; >/*== Cart ==*/ .my_custom_table < min-width: 400px; font-size: 14px; >.my_custom_thead < font-weight: normal; text-transform: uppercase; letter-spacing: .2em; background-color: #f8f9fa !important; >.custom_image < width: 100px; height: 100px; >.custom_a < text-decoration: none; >.custom_icon < text-decoration: none; color: gray; >.my_custom_button < margin-top: 5px; >.navbar-bg
ОБНОВЛЕНИЕ 1: Я вижу, что мой новый класс CSS: .navbar-bg не загружается. Это почему? и как я могу это решить? (CTRL + F5 не решает эту проблему). Кроме того, это происходит в Chrome и Firefox (я использую Ubuntu). ОБНОВЛЕНИЕ 2: (settings.py)
""" Django settings for perfectcushion project. Generated by 'django-admin startproject' using Django 2.1.3. For more information on this file, see https://docs.djangoproject.com/en/2.1/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/2.1/ref/settings/ """ import os # Build paths inside the project like this: os.path.join(BASE_DIR, . ) BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # Quick-start development settings - unsuitable for production # See https://docs.djangoproject.com/en/2.1/howto/deployment/checklist/ # SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = '^_67&#r+(c+%pu&n+a%&dmxql^i^_$0f69)mnhf@)zq-rbxe9z' # SECURITY WARNING: don't run with debug turned on in production! DEBUG = True ALLOWED_HOSTS = [] # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'shop', 'search_app', 'cart', 'stripe', 'order', 'crispy_forms', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] ROOT_URLCONF = 'perfectcushion.urls' TEMPLATES = [ < 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates'), os.path.join(BASE_DIR, 'shop', 'templates/'), os.path.join(BASE_DIR, 'search_app', 'templates/'), os.path.join(BASE_DIR, 'cart', 'templates/'), os.path.join(BASE_DIR, 'order', 'templates/'),] , 'APP_DIRS': True, 'OPTIONS': < 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', 'shop.context_processor.menu_links', 'cart.context_processor.counter' ], >, >, ] WSGI_APPLICATION = 'perfectcushion.wsgi.application' # Database # https://docs.djangoproject.com/en/2.1/ref/settings/#databases DATABASES = < 'default': < 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), >> # Password validation # https://docs.djangoproject.com/en/2.1/ref/settings/#auth-password-validators AUTH_PASSWORD_VALIDATORS = [ < 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', >, < 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', >, < 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', >, < 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', >, ] # Internationalization # https://docs.djangoproject.com/en/2.1/topics/i18n/ LANGUAGE_CODE = 'en-us' TIME_ZONE = 'UTC' USE_I18N = True USE_L10N = True USE_TZ = True # Static files (CSS, JavaScript, Images) # https://docs.djangoproject.com/en/2.1/howto/static-files/ STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), ) MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'media') ### Stripe Settings ### STRIPE_PUBLISHABLE_KEY = 'pk_test_N0ksyIuO5d1ulLDuoMlLiU26' STRIPE_SECRET_KEY = 'sk_test_fFHncrzOzBPS3XxDQM0TWMfy' CRISPY_TEMPLATE_PACK = 'bootstrap4' # STATICFILES_DIRS = ( # os.path.join(BASE_DIR, 'static'), # ) STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static', 'static_dirs'), ) [email protected] > collectstatic bash -cl "/home/ogonzales/Escritorio/projects_envs/perfectcushion_env/bin/python /home/ogonzales/Escritorio/pycharm/helpers/pycharm/django_manage.py collectstatic /home/ogonzales/Escritorio/web_proyects/perfectcushion" Tracking file by folder pattern: migrations You have requested to collect static files at the destination location as specified in your settings: /home/ogonzales/Escritorio/web_proyects/perfectcushion/staticfiles This will overwrite existing files! Are you sure you want to do this? Type 'yes' to continue, or 'no' to cancel: yes 0 static files copied to '/home/ogonzales/Escritorio/web_proyects/perfectcushion/staticfiles', 119 unmodified. Process finished with exit code 0 
ОБНОВЛЕНИЕ 4: Структура проекта:
Почему CSS и JS не обновляется? Как обновить принудительно?
Знакома ли вам ситуация, когда вы стилизовали какой-нибудь блок в файле style.css, зашли проверить изменения на сайте, а они не применяются? И в чем может быть проблема? Возможно, происходит кэширование версии файла style.css на вашем сайте. Мы расскажем вам, как бороться с этой проблемой!
Навигация по статье
Почему происходит кэширование файлов?
Происходит это из-за того, что браузеры сохраняют данные сайтов, которые посещают юзеры. Делается это для оптимизации загрузки этих же сайтов при повторном посещении.
Ниже мы рассмотрим способы, которые позволят принудительно обновить версию файла style.css, и при повторном посещении сайта пользователем она будет загружаться повторно.
Попробуем объяснить: вы или ваш посетитель заходите на сайт. Некоторое время спустя вы вносите изменения в файл стилей. Например, меняете цвет текста с черного на продающий красный. Затем вы или тот самый посетитель, который был на вашем сайте до обновления файла стилей, не увидите изменений, пока не сбросите кеш командой CTRL+F5…
Как обновить версию style.css?
Тут все зависит от того, на какой системе сделан ваш сайт и как происходит подключение файла стилей. Например, в некоторых CMS, а также на самописных сайтах подключение файла стилей осуществляется в таком виде:
Обратите внимание на «?ver=0.67». Это и есть версия файла стилей. Попробуйте добавить к подключению файла стилей версию. Она может быть абсолютно любой, это не так важно. Важно то, чтобы вы ее обновляли вручную каждый раз, когда вносите изменения на своем сайте.
Пример: я хочу поменять цвет кнопок. Я задаю новый фоновый цвет, после чего открываю код сайта, нахожу строчку с подключением файла стилей и меняю версию с 0.67 на 0.68. Теперь мои посетители, которые были на моем сайте до обновления стилей, увидят изменения без сброса кеша в браузере.
Как сделать автоматическое обновление версии файла style.css?
Способ актуален для CMS WordPress. Он позволяет не менять версию файлов вручную. Они будут обновляться автоматически после любого малейшего внесения изменений в файл.
Этот метод можно использовать не только по отношению к файлам стилей, но и скриптам. Просто вставьте в functions.php следующий код:
function custom_scripts() < wp_enqueue_style( 'my-custom-css', get_stylesheet_uri(), false, filemtime( get_template_directory() . '/style.css' ) ); wp_enqueue_script( 'my-custom-js', get_template_directory_uri() . '/custom.js', false, filemtime( get_template_directory() . '/custom.js' ) ); >add_action( 'wp_enqueue_scripts', 'custom_scripts' );После подключения этого скрипта, в инспекторе кода браузера мы увидим примерно следующую картину:
Теперь после каждого обновления файла пользователи будут видеть все изменения на сайте.
У вас остались вопросы по этому материалу или разработке сайта в целом? Обязательно задавайте их в комментарии. А если вы хотите узнать еще больше о мире разработки и продвижении сайтов — подписывайтесь на нашу группу в вконтакте. Так вы точно не пропустите новых статей!
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.
Почему браузер во время разработки не обновляет измененные стили?
Для ясности приведу пример.
Верстаю страницу, изменяю что-то в стилях, обновляю страницу в браузере, но ничего не меняется. Открываю в другом браузере – всё отображается в соответсвии с внесёнными изменениями, меняю URL с localhost:7777 на 127.0.0.1:7777, например,– снова всё ок. Однако это ровно до следующего изменения стилей. То есть браузер запоминает своё состояние и игнорирует всякое их изменение.
К слову, началось всё это когда я писал некое приложение на JS. И вот я взялся за Angular.js и с какого-то момента снова возникла эта проблема. Хотя почти уверен, что дело не в этом.
Браузеры: Safari, Chrome и Firefox.
Если работаете в Хроме (или Опере, или в Яндексе) — откройте девтулс -> настройки:
И просто держите девтулс открытым пока работаете.
Не слушайте тех, кто говорит про настройку браузера. Если такая проблема достает вас во время разработки — она же проявится и у посетителей при первом же обновлении сайта.
Наиболее перспективным подходом у управлению кешированием ресурсов является добавление номера версии в URL. В качестве номера версии можно взять хеш-сумму от файла или дату его последней модификации. После того, как вы добавити номера версий во все URL — можно настраивать неограниченное кеширование ресурсов заголовками сервера и радовать посетителей быстрой загрузкой.
Ну а если нет желания настраивать версии — то просто запретите серверу отдавать заголовок Expires. Грузиться будет медленнее — зато никаких больше «почистите кеш браузера, чтобы увидеть изменения на сайте».
Странное дело. Впервые это проявило себя во время того, как я писал довольно простой JS скрипт, время от времени меняющий стили элементов. За результатом я следил просто открыв файл index.html в браузере.
Сейчас я пишу приложение на Angular.js. В качестве локального сервера – node. Проблема стала более явной. Стало быть дело в локальном сервере (как Вы сказали, отдаёт заголовок Expires) и если ничего в нём не менять, то в продакшене можно ожидать такого же поведения?
Загрязнять URL непонятными для пользователя значениями не хотелось бы, честно говоря.
inscamp: Пользователь не будет видеть этих значений — я же говорю про ресурсы (скрипты, картинки, таблицы стилей), а не про страницы.
Теперь понял, спасибо.
Всё же никак не пойму в чём причина такого агрессивного хэширования ресурсов. В установках моего локального сревера по-умолчанию?
inscamp: Да, дело в настройках сервера. Сейчас даже Опера и IE следуют правилам кеширования ресурса, указанным в заголовках.
Почему при изменении css и HTML файла не обновляется сайт?
при этом очистила кеш браузера и перезагрузила компьютер и все равно страница не обновляется. с кодом все хорошо. Помогите пожалуйста!
Средний 11 комментариев
1) открыть консоль разработчика
2) перевести её в режим без кеша
elizaveta_elizaveta21, ответил в сообщении ниже, чтобы ответ был виден всем. Если помогло, отметьте решением
перезагрузить при открытой панели и в дальнейшем при разработке держать панель открытой
Спасибо огромное! скажите пожалуйста что означает этот пункт? после этого страницы будут обновляться?
Как проверить что это действительно он?
1. Открываем папку с вашим сайтом
2. Находим нужный нам файл (index).html
3. Кликаем на него 2 раза, либо нажимаем ПКМ и открываем через браузер который вам удобен
4. Сайт открывается, хорошо.
Как редактировать этот сайт, который мы открыли?
1. Открываем папку с вашим сайтом
2. Находим нужный нам файл (index).html
3. Легким движением мыши перетаскиваем его в ваш редактор кода и смотрим тот ли это файл?
файл тот. html при этом меняется, css нет, но css подключен к html файлу.и не знаю что делать в этом случае
elizaveta_elizaveta21, так стоп. Что значит css не меняется? Он у вас подключается, сайт отображается как надо, но уже после правок в css файл в браузере ничего не меняется (даде после очистки кэша)?
Шохрух Шаймардонов, я создала вчера два проекта и они с какого-то момента перестали обновляться, даже после очистки кеша. но при этом старые файлы или созданные заново работают хорошо. а те два не меняются, до этого всё работоло.