Блог

Я создаю продукт, который мы в конечном итоге будем выпускать с белой этикеткой. Прямо сейчас я пытаюсь найти лучший способ облегчить эти требования программно, чтобы пользователь мог обновить базовый дизайн сайта (т. Е. Цвет заголовка и т. Д.) Через форму профиля/настроек.

Требования:

1. Пользователь может обновить логотип (это завершено)
2. Пользователь может обновлять основные элементы дизайна (на основе CSS), т. е. Цвет верхнего колонтитула, цвет нижнего колонтитула, цвет боковой панели — все основные переопределения CSS

Мы не хотим использовать ASP.Net Темы/Скины, потому что для этого требуется хранение статических тем в локальной файловой системе. Мы хотели бы использовать CSS для переопределения базового стиля и сохранения его в базе данных.

Наш первоначальный план состоит в том, чтобы сохранить CSS в простом поле varchar в базе данных и записать этот CSS на Главную страницу в событии перед инициализацией, используя «!» для переопределения базовых стилей. Является ли это лучшим решением? Если нет, что вы сделали для реализации этой функции/

Я был там несколько месяцев назад. Хотя использование динамического CSS, сгенерированного специальным обработчиком / сервлетом, было первым решением, для повышения производительности теперь в файле создается настраиваемый CSS, заменяющий основные элементы стандартного CSS:

 <link rel="stylesheet" href="standard.css" />
<link rel="stylesheet" href="<%= customer_code %>/custom_style.css" />
...
<img scr="<%= customer_code %>/logo.png" />
 

Каждый пользовательский CSS будет иметь свой собственный URL-адрес, поэтому вы можете заставить браузер кэшировать их.

Это позволит вам экономить на каждом запросе, который сделают пользователи:

1. трафик из базы данных на уровень приложений
2. трафик с уровня приложения в браузер
3. некоторые вычисления на прикладном уровне

Я поддержу идею, что пользователь должен заполнить веб-форму с подробным описанием того, какие настройки он хочет сделать.

Во-первых, определите, какие ресурсы можно заменить и можно ли добавлять ресурсы. Вам нужно будет где-то их хранить; для небольших ресурсов, таких как логотипы, база данных, вероятно, подойдет, в противном случае вам нужно беспокоиться о размере базы данных.

Затем вы можете определить, какую функциональность вы хотите настроить для пользователя: только цвета или целые стили? Если это просто цвета, вы можете определить некоторые переменные в файле CSS и динамически обслуживать файл, загружая данные из базы данных. Файл CSS может называться styles.asp и содержать код, подобный этому:

 .header_area {
  border: 1px solid <%=headerBorderColor%>;
  background-color:  <%=headerBGColor%>;
  foreground-color:  <%=headerFGColor%>;
}
 

(Синтаксис, который я использовал, — синтаксис JSP, я не знаю ASP, но идея та же.)

В качестве альтернативы, позвольте пользователю указать всю таблицу стилей, либо заменив ее по умолчанию, либо дополнив ее. Затем сохраните весь лист в базе данных и отправьте его по собственному URL-адресу (не вставляйте его на страницу).

 <link rel="stylesheet" href="default_styles.css">
<link rel="stylesheet" href="white_label_css.asp">
 

Убедитесь, что вы правильно установили заголовки кэша и тип содержимого в файле css, если вы обслуживаете его с помощью страницы asp.

Если вас беспокоит, какой контент пользователь может поместить в файл white_label_css, вы можете ограничить его, создав пользовательский инструмент, который генерирует css и сохраняет его в бд. Например, вместо того, чтобы разрешить пользователю загружать любой файл и хранить его в базе данных, пользователь должен будет заполнить веб-форму с подробным описанием того, какие настройки он хочет выполнить. Таким образом, вы можете гарантировать, что разрешены только определенные правила/изменения css (но это может быть недостаточно гибким).

Мне нравится идея использования динамического CSS с использованием ASP.Net Обработчик…

 <link rel="stylesheet" href="style.ashx" />
 

стиль.ashx

 <!--WebHandler Language="C#" Class="StyleSheetHandler"-->
 

Таблица стилей.cs

 public class StyleSheetHandler : IHttpHandler {
        public void ProcessRequest (HttpContext context)
        {   
            context.Response.ContentType = "text/css";
            context.Response.ContentEncoding = System.Text.Encoding.UTF8;

            string css = BuildCSSString(); //not showing this function

            context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));
            context.Response.Cache.SetCacheability(HttpCacheability.Public);
            context.Response.Write( css );
        }

        public bool IsReusable
        {
            get { return true; }
        }

}
 

Функция BuildCSSString() создаст css на основе значений, хранящихся в базе данных, и вернет его, чтобы переопределить базовый стиль на главной странице.

Предложенный вами метод заключается в том, как я бы решил эту проблему: загрузите управляемые пользователем значения (возможно, только цвета и размеры шрифтов) в таблицу, связанную с пользователем.

Логотип/аватар, который вы хотите, чтобы у пользователя был, может быть сохранен в базе данных или в виде файла на fs.

Я думаю, это зависит от того, насколько подкованы ваши пользователи в CSS. Если они веб-разработчики или имеют такую склонность, то, вероятно, хорошо, если они пишут CSS. Если нет, вам придется либо сгенерировать его статически на основе их входных данных и сохранить в базе данных, либо вы можете просто сохранить введенные значения и динамически сгенерировать CSS с помощью пользовательского обработчика.

Подход пользовательского обработчика означал бы, что вы могли бы подставлять значения прямо в середине CSS, не беспокоясь о !важно или порядке, в котором объявлены элементы, чтобы обеспечить правильное переопределение.

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

Попробуйте здесь или здесь в качестве введения.

Если я правильно понял, вы хотите облегчить изменения, связанные с цветом и типографикой. А как насчет планировки? Если мы с уверенностью предположим, что изменятся только цвет и типография, мы можем повторно использовать одни и те же классы стилей в конце существующего базового CSS-файла и, таким образом, переопределить стили (использование !важно, хотя это хорошая идея, предотвращает переопределение пользователями их пользовательских стилей).

Эти вновь созданные классы могут быть сжаты до однострочной строки и сохранены в виде varchar, который затем будет связан/скопирован встроенно при создании страницы. Я могу придумать следующие варианты

1. Встроенный CSS
2. Создайте раздел файла, в который вы можете сбросить сгенерированные файлы CSS, и пусть браузеры ссылаются на это местоположение (создав программную ссылку?)
3. Используйте Ajax, извлеките CSS и измените DOM

Если макет изменится, мы окажемся в более густом супе, я бы этого избежал, поскольку сложностей, связанных со сценариями/обработкой событий, слишком много.

Я бы не стал использовать !важное предложение и вместо этого просто обеспечил, чтобы их значения отображались в <style> теге после импорта обычных таблиц стилей.

В противном случае я бы сделал это точно так же.