Поиск по блогу

четверг, 2 января 2014 г.

Хаки-шаблона-"Простая"-(Simple)-в-Blogge

Почему "простая"... так было написано. Сначала я попытался все сделать "как положено", а именно, вставить CSS при помощи штатного "Дизайнера шаблонов Blogger". Там есть во вкладке "дополнительно" раздел "Добавить CSS". Однако, оказалось, что в этом случае хаки стилей вставляются перед штатными template-scin.

Скрипты javascript тоже рекомендуется вставлять в специалньные блоки на странице. Но они тоже работают непредсказуемо, потому пришлось использовать старый шаблон (вместо нового динамического) и тупо вставить все свои хаки перед закрывающим тегом
Эти сркипты были сгенерированы после конвертации в Notebook.html. Прочитать, что они делают (и, заодно, проверить) можно здесь Loading and Configuring MathJax
In []:
<script src='https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS_HTML' type='text/javascript'/>
<script type='text/javascript'>
init_mathjax = function() {
    if (window.MathJax) {
        // MathJax loaded
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [ [&#39;$&#39;,&#39;$&#39;], [&quot;\\(&quot;,&quot;\\)&quot;] ],
                displayMath: [ [&#39;$$&#39;,&#39;$$&#39;], [&quot;\\[&quot;,&quot;\\]&quot;] ]
            },
            displayAlign: &#39;left&#39;, // Change this to &#39;center&#39; to center equations.
            &quot;HTML-CSS&quot;: {
                styles: {&#39;.MathJax_Display&#39;: {&quot;margin&quot;: 0}}
            }
        });
        MathJax.Hub.Queue([&quot;Typeset&quot;,MathJax.Hub]);
    }
}
init_mathjax();
</script>
Эти стили - мои хаки. Они делают страницу "текучей" (растяжимой)
In []:
<style type="text/css">
body {
min-width: 600px;
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 600px;
max-width: 1000px;
_width: 1000px;
}
</style>
Эти две таблицы стилей сгенерированы при импорте Inotebook по умолчанию. Там их всего три. Первый луше не брать, а вот два последних как раз то, что надо.
In []:
<style type="text/css">
    .highlight .hll { background-color: #ffffcc }
.highlight  { background: #f8f8f8; }
.highlight .c { color: #408080; font-style: italic } /* Comment */
.highlight .err { border: 1px solid #FF0000 } /* Error */
.highlight .k { color: #008000; font-weight: bold } /* Keyword */
.highlight .o { color: #666666 } /* Operator */
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */
.highlight .gd { color: #A00000 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gr { color: #FF0000 } /* Generic.Error */
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #00A000 } /* Generic.Inserted */
.highlight .go { color: #888888 } /* Generic.Output */
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #0044DD } /* Generic.Traceback */
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
.highlight .kp { color: #008000 } /* Keyword.Pseudo */
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
.highlight .kt { color: #B00040 } /* Keyword.Type */
.highlight .m { color: #666666 } /* Literal.Number */
.highlight .s { color: #BA2121 } /* Literal.String */
.highlight .na { color: #7D9029 } /* Name.Attribute */
.highlight .nb { color: #008000 } /* Name.Builtin */
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */
.highlight .no { color: #880000 } /* Name.Constant */
.highlight .nd { color: #AA22FF } /* Name.Decorator */
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
.highlight .nf { color: #0000FF } /* Name.Function */
.highlight .nl { color: #A0A000 } /* Name.Label */
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */
.highlight .nv { color: #19177C } /* Name.Variable */
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
.highlight .w { color: #bbbbbb } /* Text.Whitespace */
.highlight .mf { color: #666666 } /* Literal.Number.Float */
.highlight .mh { color: #666666 } /* Literal.Number.Hex */
.highlight .mi { color: #666666 } /* Literal.Number.Integer */
.highlight .mo { color: #666666 } /* Literal.Number.Oct */
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */
.highlight .sc { color: #BA2121 } /* Literal.String.Char */
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
.highlight .sx { color: #008000 } /* Literal.String.Other */
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */
.highlight .ss { color: #19177C } /* Literal.String.Symbol */
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #19177C } /* Name.Variable.Class */
.highlight .vg { color: #19177C } /* Name.Variable.Global */
.highlight .vi { color: #19177C } /* Name.Variable.Instance */
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */
    </style>


<style type="text/css">
/* Overrides of notebook CSS for static HTML export */
body {
  overflow: visible;
  padding: 8px;
}
.input_area {
  padding: 0.2em;
}

pre {
    padding: 0.2em;
    border: none;
    margin: 0px;
    font-size: 13px;
}
</style>

Недоделки шаблона

Пока толком не разобрался, но уже очевидно, что скрипт MathJax пишет прямо на страницу уйму скриптов и таблиц стилей...
In [2]:
from IPython.display import Image
Image(filename='C:/Users/kiss/Pictures/for_blogs/hack_simple.PNG')
Out[2]:
На снимке этот ужас можно наблюдать. Надо разбираться. Но это потом. Пока будем радоваться и пробовать разные варианты работы.
Этот пост подготовлен при помощи inotebook. Рабочая папка (Windows 8) C:\Users\kiss\Documents\IPython Notebooks\web\Temp_1 Для конвертации вызывалась команда:
In []:
# ... в редакторе командной строки:
C:\Users\kiss\Documents\IPython Notebooks\web\Temp_1>ipython nbconvert --template basic hacks_simple_blogger.ipynb

21 комментарий:

  1. Проблема с появлением стрелки --> в левом верхнем углу была связана с тем, что я на самом деле не стер из "Добавить CSS" таблицы стилей.
    Получилось, что они записывались два раза..., причем, второй раз в body
    ... наверное и стрелка была там...
    Ошибку эту я допустил из-за того, что отредактировал в дизайнере шаблонов таблицы (вернее, стер...), но в это время была открыта страница редактора html
    Её то и надо было перегрузить, а я этого не сделал, но сразу начал ее редактировать - всталять скрипты... Таким образом получилось, что изменения, сделанные в редакторе не сохранились...

    ОтветитьУдалить
  2. Сегодня решил добавить автоматическую загрузку фида RSS под постами. Такая необходимость возникла в процессе работы над проектом. Пока у меня фрагменты кода ( с размышлениями) в четырех постах... А будет этих постов десятка полтора...

    ОтветитьУдалить
    Ответы

    1. <*script src='http://altersego2007.narod.ru/se1/jquery/rss/zrssfeed-112/jquery.zrssfeed_se2.js' type='text/javascript'/>
      <*script type='text/javascript'>
      $(document).ready(function () {
      var strURL = document.URL;
      var arrURL=strURL.split ("/");
      /*For label pages - begin_ +label+ _end example: var feedURL1 = 'http://feeds.delicious.com/v2/rss/altersego2007/'+arrURL[arrURL.length-1]+'?count=15'; */
      if (arrURL.length == 6) {

      /*For items pages - direct link in post*/
      if (parseInt(arrURL[arrURL.length-3]) > parseInt(arrURL[arrURL.length-2])) {
      var plabel=$('#mylabel').attr('se');
      if (plabel!=''){
      $('.post-footer-line-3').rssfeed(plabel, {
      limit: 90,
      header: false,
      snippet: true,
      linktarget:'_blank'
      });
      }
      }
      }

      });<*/script>

      Удалить
    2. Это все просто скопироват и вставить нельзя, сначала надо убрать звездочки в открывающих и закрывающих тегах
      <*script <*/script

      Забыл, это без jQuery скрипт не работает. И вставил я сюда свою старенькую ссылку:

      <*script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

      Удалить
  3. Решил не останавливаться на достигнутом и улучшить форматирование. Вставил в шаблон фрагмент
    /* Add radius */
    .comment-thread .post-footer {
    background-color: #eeeeee;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    }
    А он не работает. Внутри head он есть, ошибок не вижу... Может быть я его "рано вставил"? Да нет, другие соседние хаки стилей работают...
    Займусь как-нибудь позже этим феноменом...

    ОтветитьУдалить
    Ответы
    1. Пока писал пост, подумал, что я просто что-то забыл. И это "что-то" элементарно...
      Действительно, вот правильный окончательный хак
      /* Add radius */
      .comments .comment-thread.inline-thread {
      border: 1px solid #cfcfcf;
      border-radius: 4px;
      }
      .post-footer {
      border: 1px solid #cfcfcf;
      border-radius: 4px;
      }
      .date-header span{
      background-color: #eeeeee;
      border: 1px solid #cfcfcf;
      border-radius: 4px;
      }

      Удалить
  4. Сегодня захотел вставить команду
    help(furl)
    выводится это команда в красивое окно ( с тенями), но проблема в том, что при импорте от окна ничего не остается. Чтобы спрятать эту портянку надо сделать следующее:
    Найти на странице тег div class="output vbox "
    и добавить в него div class="output vbox output_scroll"

    Проверить, есть ли в таблицах стилях шаблона класс output_scroll

    Если нет, то вставить:

    div.output_scroll {
    height: 24em;
    width: 100%;
    overflow: auto;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8);
    }

    ОтветитьУдалить
    Ответы
    1. При вставке\редактировании поста нужно будет каждый раз находить именно тот тег div class="output vbox " , в котором содержится "портянка"

      Удалить
    2. Проверил на этом блоге, все работает, вот первый блин http://pythonr.blogspot.ru/2014/01/csv.html

      Удалить
  5. Вчера, воодушевленный успехом предыдущего исправления, я решил "с разбегу" устранить баги показа блоков In[]
    Добавил в стили
    /*Try to fix In[] and Out[]*/
    div.cell {
    border: 1px solid transparent;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    width: 100%;
    padding: 5px 5px 5px 0px;
    margin: 2px 0px 2px 7px;
    outline: none;
    }
    div.input {
    page-break-inside: avoid;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box;
    box-orient: horizontal;
    box-align: stretch;
    }
    div.input_prompt {
    color: navy;
    border-top: 1px solid transparent;
    }
    div.prompt {
    width: 11ex;
    padding: 0.4em;
    margin: 0px;
    font-family: monospace;
    text-align: right;
    line-height: 1.231em;
    }

    ОтветитьУдалить
    Ответы
    1. Результат почти удался, вот только ширина блоков стала зависеть от длины строк в них... Смотрится паскудно
      div..input_area - это блоки, слева от которых теперь стоит In[]

      Исправил так:
      нашел, что для этих блоков стили опредляют два класса:
      div class="input-area box-flex1"
      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
      Добавил в таблицу стилей:
      .box-flex1 {
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      box-flex: 1;
      }

      Удалить
  6. Теперь осталось настроить блоки Out[]... Добавил вот этот блок в стили:

    /*Out[]*/
    div.output_wrapper {
    margin-top: 5px;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
    display: box;
    box-orient: vertical;
    box-align: stretch;
    width: 100%;
    }
    div.output_area {
    padding: 0px;
    page-break-inside: avoid;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    display: box;
    box-orient: horizontal;
    box-align: stretch;
    }
    div.output_prompt {
    color: darkred;
    }
    div.output_subarea {
    padding: 0.44em 0.4em 0.4em 1px;
    margin-left: 6px;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    }

    ОтветитьУдалить
  7. Почему я занимаюсь здесь подбором стилей, а не возьму сразу всю таблицу, которая получается после конвертации???
    Потому, что в этой третьей таблице 1500 строк стилей со скриптами, она где-то сжата, а где-то нет..., причем, изрядная часть относится к кнопкам iPython Notebook..., и, наконец, есть все возможные варианты форматирования для аудиоплеера, например...
    Словом, это баг... Потому я решил просто вставлять стили по мере необходимости...
    Что и делаю...

    ОтветитьУдалить
  8. Сегодня надоело то, что все маленькие заголовки в блоге без полей, добавил в шаблон

    h4 {
    display: block;
    -webkit-margin-before: 1.33em;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
    }

    ОтветитьУдалить
  9. Вчера пришла в голову гениальная мысль. Суть: если уборать облако тегов со втраниц сообщений, то они будут нормально идексироваться, и поиском можно будет пользоваться.Шаблоны моего мозга не хотят перестраиваться, но сегодня посмотрел, что надо бы поменять:


    ...

    ОтветитьУдалить
    Ответы
    1. <**b:if cond='data:blog.pageType != "item"'**>
      ...
      <**/b:if**>
      Знаки ** вставлены, поскольку блоггер убирает этот контент из комментариев

      Удалить
    2. Вот здесь можно полсмотреть примеры http://www.techinfoknow.com/2014/01/blogger-page-type-conditional-tag.html

      Удалить
    3. Пробуем убрать подвал из постов
      2261
      <**b:if cond='data:blog.pageType != "item"'**>
      перед тегом <**footer>
      после тега <**/footer>
      2305 <**/b:if**>

      Удалить
    4. Все получилось!!!
      Условие выше работает так, как надо.
      Надо будет иметь в виду, что если я добавлю в шаблон чего-нибудь, то нумерация строк может поменятся... Так что ориентироваться лучше не на номера строк, а на footer (хотя браузер его находить не хочет почему-то...)

      Удалить
  10. После обновления Ipython Notebook поменялся формат вывода окон In[ ]
    каждое окно на странице имело разную ширину (в соответствии с шириной текста в окне)

    Обнаружил, что надо изменить стиль тега

    <*div class="input"* >

    А именно, убрать параметр
    display: -webkit-box; *

    ОтветитьУдалить
    Ответы
    1. Строка 762-764 , закоментировал номер 764, а потом просто убрал строчку 764 :

      div.input {
      page-break-inside: avoid;
      /*display: -webkit-box;*/

      Оказалось, что In[ ] теперь показывается в строке чуть выше... надо искать другие варианты...

      Удалить