Skip to content

Plone.org.ru

Sections
Personal tools
You are here: Home » Статьи » Парсинг для плоновского CSS
Log in
Реклама
Поддержка
Для общения можно использовать списки рассылки: и
Дружественный сайт
 

Парсинг для плоновского CSS

  • Send this page to somebody
  • Print this page
Как я решил проблему избыточности плоновского CSS.
"Сумма Технологий"

И так, проблема ясна и всем понятна: стандартный CSS от плона очень большой (более 100кб !!!) - это плохо. Задачу поставил так: сделать свой скин используя плоновсие стили и отдельно составляя свои и в финале, составить универсальный CSS в котором ТОЛЬКО те классы, которые используются в шаблонах сайта.


Приступаем к решению задачи (Эксперементы проходили на Plone 2.1.2).
  1. Делаем свой скин (или эксперементируем на базовом).
  2. Делаем два файла: первый - css.txt (название не важно) - в него копируем содержимое всех css-файлов плона. Файлы типа ploneStyles4026.css ploneStyles2825.css ploneStyles5172.css можно не трогать т.к. первые два - это разные размеры шрифта, а второй - это PloneCustom.css - его можно отдельно прицепить. Второй файл - html.txt - копируем сюда конечный (тот что в браузере у юзера) хтмл-код типовых страниц сайта. Например, код страниц документа, новости, события, списка содержимого папки и т.д.
  3. Пишем такой скриптик:
    ## Script (Python) "scripts"
    ##bind container=container
    ##bind context=context
    ##bind namespace=
    ##bind script=script
    ##bind subpath=traverse_subpath
    ##parameters=file1, file2, type=''
    ##title=
    ##
    def css_css():
    html=file2.read()
    css=file1.read().replace('\n','').split('}')
    voc={}
    for s in css:
    if s.count('{'):
    a=s.split('{')
    if a[0] in voc.keys():
    voc[a[0] ].append(a[1])
    else:
    voc[a[0] ]=[a[1] ]
    for s in voc.keys():
    sp=s.split(' ')[0]
    if sp:
    stl=test(sp.count('.'),'cl ',test(sp.count('#'),'id ','tg '))+test(sp.count('.'),sp[sp.find('.')+1:],test(sp.count('#'),sp[sp.find('#')+1:],sp))
    if stl[3:] not in html:
    style=s+' {\n'+';\n'.join(voc[s])+'\n}\n'
    print style.replace('http://www.imfit.khv.ru','&dtml-portal_url;') #замена жесткого урла на динамический
    return printed
    def css_html():
    html=file2.read()
    cs=file1.read().replace('\r\n','').replace('\n','').split('@media ')
    css=''
    for i in cs:
    if i:
    s=i.split(' ')
    s[1]=s[1][1:-1]
    if s[0]=='Screen':
    css=css+s[1]
    css=css.split('}')
    voc={}
    for s in css:
    if s.count('{'):
    a=s.split('{')
    if a[0] in voc.keys():
    voc[a[0] ].append(a[1])
    else:
    voc[a[0] ]=[a[1] ]
    for s in voc.keys():
    sp=s.split(' ')[0]
    if sp:
    stl=test(sp.count('.'),'cl ',test(sp.count('#'),'id ','tg '))+test(sp.count('.'),sp[sp.find('.')+1:],test(sp.count('#'),sp[sp.find('#')+1:],sp))
    if stl[3:] in html:
    style=s+' {\n'+';\n'.join(voc[s])+'\n}\n'
    print style.replace('http://www.imfit.khv.ru','&dtml-portal_url;')

    return printed
    if type=='ch':
    return css_html()
    else:
    return css_css()
    Где входные данные - это file1 и file2. File1 - это css.txt а file2 - html.txt
  4. Как оно работает: сначала из файла со стилями выбираются те, которые заключены в такие "скобки" :
    @media screen { }
      затем, из выбранных стилей делается словарь типа: 'класс':'описание класса'. Затем, берем и проверяем каждый класс на наличае в html.txt, причем здесь есть свои особенности: если класс идет много-вложенный - .style1 .style2 .styler3.style4 #style7 - то для проверки берем только первый - style1 (как проверить всю цепочку я не думал).
  5. Если эту процедуру проводить на стандартном плон-сайте, то результирующий CSS в 5 (!) раз меньше исходного. Еще один момент - стили для анонимуса и для менеджера разные. Для того, чтобы сделать CSS для менеджера надо в  html.txt добавить садержимое еще и от файликов *.js. И ещё: в скрипте есть две функции: одна для проверки типа "css-html" а вторая для "css-css" - вот вторая - для того, чтоб из "админкого" css убрать классы, которые есть в "юзерском".
  6. мой PageTemplate для интерфейса зачистки:
        <form action="scripts" method="post" enctype="multipart/form-data">
    select file1<input type="file" name="file1"><br>
    select file2<input type="file" name="file2"><br>
    css-css<input type="checkbox" name="type" value="cc"><br>
    css-html<input type="checkbox" name="type" value="ch"><br>
    <input type="submit" value=" Upload File ">
    </form>
     
  7. Я реализовал эту схему на этом проекте: .
Created by yarovit
Last modified 2006-11-19 08:22
 

Rambler's TOP 100