Почему "простая"... так было написано. Сначала я попытался все сделать "как положено", а именно, вставить CSS при помощи штатного "Дизайнера шаблонов Blogger". Там есть во вкладке "дополнительно" раздел "Добавить CSS". Однако, оказалось, что в этом случае хаки стилей вставляются перед штатными template-scin.
Скрипты javascript тоже рекомендуется вставлять в специалньные блоки на странице. Но они тоже работают непредсказуемо, потому пришлось использовать старый шаблон (вместо нового динамического) и тупо вставить все свои хаки перед закрывающим тегом
Скрипты 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: [ ['$','$'], ["\\(","\\)"] ],
displayMath: [ ['$$','$$'], ["\\[","\\]"] ]
},
displayAlign: 'left', // Change this to 'center' to center equations.
"HTML-CSS": {
styles: {'.MathJax_Display': {"margin": 0}}
}
});
MathJax.Hub.Queue(["Typeset",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
Проблема с появлением стрелки --> в левом верхнем углу была связана с тем, что я на самом деле не стер из "Добавить CSS" таблицы стилей.
ОтветитьУдалитьПолучилось, что они записывались два раза..., причем, второй раз в body
... наверное и стрелка была там...
Ошибку эту я допустил из-за того, что отредактировал в дизайнере шаблонов таблицы (вернее, стер...), но в это время была открыта страница редактора html
Её то и надо было перегрузить, а я этого не сделал, но сразу начал ее редактировать - всталять скрипты... Таким образом получилось, что изменения, сделанные в редакторе не сохранились...
Сегодня решил добавить автоматическую загрузку фида RSS под постами. Такая необходимость возникла в процессе работы над проектом. Пока у меня фрагменты кода ( с размышлениями) в четырех постах... А будет этих постов десятка полтора...
ОтветитьУдалить
Удалить<*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>
Это все просто скопироват и вставить нельзя, сначала надо убрать звездочки в открывающих и закрывающих тегах
Удалить<*script <*/script
Забыл, это без jQuery скрипт не работает. И вставил я сюда свою старенькую ссылку:
<*script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
Решил не останавливаться на достигнутом и улучшить форматирование. Вставил в шаблон фрагмент
ОтветитьУдалить/* Add radius */
.comment-thread .post-footer {
background-color: #eeeeee;
border: 1px solid #cfcfcf;
border-radius: 4px;
}
А он не работает. Внутри head он есть, ошибок не вижу... Может быть я его "рано вставил"? Да нет, другие соседние хаки стилей работают...
Займусь как-нибудь позже этим феноменом...
Пока писал пост, подумал, что я просто что-то забыл. И это "что-то" элементарно...
УдалитьДействительно, вот правильный окончательный хак
/* 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;
}
Сегодня захотел вставить команду
ОтветитьУдалить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);
}
При вставке\редактировании поста нужно будет каждый раз находить именно тот тег div class="output vbox " , в котором содержится "портянка"
УдалитьПроверил на этом блоге, все работает, вот первый блин http://pythonr.blogspot.ru/2014/01/csv.html
УдалитьВчера, воодушевленный успехом предыдущего исправления, я решил "с разбегу" устранить баги показа блоков 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;
}
Результат почти удался, вот только ширина блоков стала зависеть от длины строк в них... Смотрится паскудно
Удалитьdiv..input_area - это блоки, слева от которых теперь стоит In[]
Исправил так:
нашел, что для этих блоков стили опредляют два класса:
div class="input-area box-flex1"
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Добавил в таблицу стилей:
.box-flex1 {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
Теперь осталось настроить блоки 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;
}
Почему я занимаюсь здесь подбором стилей, а не возьму сразу всю таблицу, которая получается после конвертации???
ОтветитьУдалитьПотому, что в этой третьей таблице 1500 строк стилей со скриптами, она где-то сжата, а где-то нет..., причем, изрядная часть относится к кнопкам iPython Notebook..., и, наконец, есть все возможные варианты форматирования для аудиоплеера, например...
Словом, это баг... Потому я решил просто вставлять стили по мере необходимости...
Что и делаю...
Сегодня надоело то, что все маленькие заголовки в блоге без полей, добавил в шаблон
ОтветитьУдалитьh4 {
display: block;
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}
Вчера пришла в голову гениальная мысль. Суть: если уборать облако тегов со втраниц сообщений, то они будут нормально идексироваться, и поиском можно будет пользоваться.Шаблоны моего мозга не хотят перестраиваться, но сегодня посмотрел, что надо бы поменять:
ОтветитьУдалить...
<**b:if cond='data:blog.pageType != "item"'**>
Удалить...
<**/b:if**>
Знаки ** вставлены, поскольку блоггер убирает этот контент из комментариев
Вот здесь можно полсмотреть примеры http://www.techinfoknow.com/2014/01/blogger-page-type-conditional-tag.html
УдалитьПробуем убрать подвал из постов
Удалить2261
<**b:if cond='data:blog.pageType != "item"'**>
перед тегом <**footer>
после тега <**/footer>
2305 <**/b:if**>
Все получилось!!!
УдалитьУсловие выше работает так, как надо.
Надо будет иметь в виду, что если я добавлю в шаблон чего-нибудь, то нумерация строк может поменятся... Так что ориентироваться лучше не на номера строк, а на footer (хотя браузер его находить не хочет почему-то...)
После обновления Ipython Notebook поменялся формат вывода окон In[ ]
ОтветитьУдалитькаждое окно на странице имело разную ширину (в соответствии с шириной текста в окне)
Обнаружил, что надо изменить стиль тега
<*div class="input"* >
А именно, убрать параметр
display: -webkit-box; *
Строка 762-764 , закоментировал номер 764, а потом просто убрал строчку 764 :
Удалитьdiv.input {
page-break-inside: avoid;
/*display: -webkit-box;*/
Оказалось, что In[ ] теперь показывается в строке чуть выше... надо искать другие варианты...