Блог ни о чём, заметки с тегом: HTML

Напильник для Эгеи, часть 4

Thu, 04 Aug 2022 00:41:30 +0300

Четвёртая часть о «доводке напильником» Эгеи.

Август 2022 года:
Позавчера (02.08.2022) вынужден был переместить сайт (и блог) на домашний сервер. После переезда в тегах блога стали отображаться сообщения об ошибках: Показать

Лёгкий гугляж завёл меня на страницу Александра Токарева Эгея и красные банеры /core.php, line 2, но предлагаемый способ лечения (понизить версию PHP) оказался для меня неприемлемым. Решено было бороться радикальными методами — править код.

В файле system/core.php ищу переменную, вызвавшую сообщение об ошибке (k). Для этого в редакторе mc ищу символ k как слово целиком (whole word). Комментирую второе вхождение работы с этой переменной. После обновления страницы ошибка исчезла.

P. S. Эмпирический список пакетов, необходимых к установке для работы блога, RSS-ридера и облака:
php-mbstring php-mysql php-gd php-curl php-cli libapache2-mod-php php-xml php-zip php-intl

P. P. S. Версия Эгеи — релиз 2.7, версия 3249.

Напильник для Эгеи, часть 3

Sun, 06 Jan 2019 11:53:07 +0300

Небольшой отчёт о проделаной работе с Эгеей.

Март 2018 года:
Пришла пора книжного раздела. Добавил ко всем заметкам о прочтённых книгах тэг «Моё чтиво», так как тэг «Книги» использую, в том числе, для статей об известных авторах или их произведениях. Все обложки прочтённых книг перенёс к себе на сервер (раньше тэги IMG смотрели на картинки на разных сайтах) и причесал их к стандартному размеру 105×150 точек. К каждому такому изображению применил класс «bookimg», так описав его в файле user/extras/header-pre.tmpl.php:

Показать

.bookimg {
    width:106px;
    height:150px;
    vertical-align:middle;
    border:1px solid grey;
}

Для заголовочных картинок там же описал классы «main_left_img» и «main_right_img»:

.main_left_img {
    float:left;
    margin-right:10px;
}
.main_right_img {
    float:right;
    margin-left:10px;
}

Май 2018 года:
Приделал к блогу реКАПЧУ для отсекания сообшений от ботов.

Октябрь 2018 года:
В конце октября настроил в системе своп-файл для борьбы с частыми вылетами демона агрегатора новостей. Эксперимент можно считать успешным, так как с тех пор не было ни одного аварийного завершения демона.
Статистика и динамика в графиках: Показать

(данные графиков зафиксированы на 06.01.2019 г.)

Размер свопа		Используемая память

Выполняемые процессы		Load average

Размер базы агрегатора

Январь 2019 года:
Привинтил к Эгее lightbox2 для показа скринов разных ОСей. Для этого в файле user/extras/header-pre.tmpl.php добавил записи:

<link href="/lightbox2/css/lightbox.css" rel="stylesheet" type="text/css">
<script src='/lightbox2/js/lightbox-plus-jquery.min.js'></script>

а в постах пишу такой код:

<font size="2"><a class="lightbox2" data-lightbox="<уникальный ID>" href="/img/osdetect/ОСь.png"><img src="/img/install/os/ось.png" style="vertical-align:middle;" />&nbsp;ОСь<br /><img src="/img/osdetect/preview/ОСь.png" style="vertical-align:middle;" /></a></font>

Уникальный ID нужен для исключения создания галереи из нескольких картнок.

Напильник для Tiny Tiny RSS

Sat, 28 Jul 2018 00:24:19 +0300

Как я недавно писал тут, после переезда на VDS’ку на сервере из-за недостатка памяти стала отваливаться сессия screen’а, в которой крутится демон опроса и наполнения БД новостей Tiny Tiny RSS. Для контроля того, что screen-сессия и процесс демона опроса и агрегирования новостей запущены, я написал скриптик на похапе, который опрашивает состояние этих процессов и отображает на WEB-странице. Показать

Возможны 2² вариантов:

Скрин запущен, демон запущен: Показать

Скрин запущен, демон выпал: Показать

Скрин отвалился, демон вместе с ним: Показать

Четвёртый вариант я не привожу, так как демона не в скрине я никогда не запускаю.

Однако мне достаточно быстро надоело открывать новую вкладку со страницей статистики каждый раз, когда у меня возникало подозрение о том, что скрин/демон отвалился. Поэтому я интегрировал индикаторы работы прямо на страницу Tiny Tiny RSS.

Ищу две картинки индикаторов ON и OFF, создаю файл скрипта опроса (допустим, readerstates.php) в том каталоге, где развёрнут TT RSS, с таким содержимым:

<?php $screen=exec("ps aux | grep -e 'SCREEN -dmS reade[r]'");
$daemon=exec("ps aux | grep -e 'php <путь к скрипту демона>/update_daemon2.ph[p]'");
$scrn_t=$dmn_t='не запущен';
$scrn=$dmn='off';if($screen){$scrn='on';$scrn_t='запущен';}
if($daemon){$dmn='on';$dmn_t='запущен';}?>
<img src='/... путь к картинке .../<?php echo$dmn;?>.png' title='Демон <?php echo$dmn_t;?>' />
<img src='/... путь к картинке .../<?php echo$scrn;?>.png' title='SCREEN <?php echo$scrn_t;?>' />

Затем прописываю require в файле index.php:

<?php
    foreach (PluginHost::getInstance()->get_hooks(PluginHost::HOOK_TOOLBAR_BUTTON) as $p) {
        echo $p->hook_toolbar_button();
    }
    require_once "readerstates.php";
?>

После этого все вышеописанные ситуации выглядят у меня на странице так:

Скрин запущен, демон работает: Показать

Скрин запущен, демон нет: Показать

Скрин отвалился, демон тоже: Показать

Упругость

Wed, 28 Feb 2018 15:57:23 +0300

Слизал с сайта блога Ильи Бирмана прикольный эффект и выложил у себя на мини-сайте. Вот код HTML-страницы:

Показать

<!DOCTYPE html>
<html>
  <head>
    <title>Soul</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="utf-8"/>
    <style type="text/css">
        html,body{height:100%;padding:0;margin:0}
        #lh{display:table;height:100%;overflow:hidden;width:100%}
        #lh2{display:table-cell;vertical-align:middle;width:100%}
        #lh3{height:150px;width:150px;margin:auto;position:relative}
        #lg{display:block;margin:auto;top:0;left:0}
        #lg2{position:absolute}
        .animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-timing-function: ease-in;animation-timing-function: ease-in;}
        @-webkit-keyframes bounceIn {
            0% {opacity: 0;-webkit-transform: scale(.3);}
            50% {opacity: 1;-webkit-transform: scale(1.05);}
            70% {-webkit-transform: scale(.9);}
            100% {-webkit-transform: scale(1);}}
        @keyframes bounceIn {
            0% {opacity: 0;transform: scale(.3);}
            50% {opacity: 1;transform: scale(1.05);}
            70% {transform: scale(.9);}
            100% {transform: scale(1);}}
        .bounceIn {-webkit-animation-name: bounceIn;animation-name: bounceIn;}
    </style>
  </head>
  <body>
  <table><tbody><tr><td>
    <div id="lh" class="animated bounceIn"><div id="lh2"><div id="lh3">
      <img src="/img/special/soul.png" id="lg2" width="150" height="150" style="box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15); -moz-border-radius: 75px; -webkit-border-radius: 75px; -o-border-radius: 75px; border-radius: 75px; vertical-align: bottom;" />
    </div></div></div>
  </td></tr></tbody></table>
  </body>
</html>

Напильник для Эгеи, часть 2

Fri, 16 Feb 2018 09:19:19 +0300

Устроил для блога ревизию — все длинные статьи спрятал под спойлер, ведь ката в Эгее нет в принципе, разработчик объяснил причину этого в своей статье.

Реализацию спойлера подсмотрел у других, у себя реализовал следующим образом:

Показать

В файле /user/extras/header-pre.tmpl.php прописал следующие строки:

<script type="text/javascript" src="/blog/user/extras/spoiler-hider.js"></script>
<link rel="stylesheet" href="/blog/user/extras/spoiler-hider.css">

spoiler-hider.js:

// Спойлеры для Эгеи
$(function(){
    $('.spoiler-controller').click(function(){
        var aClasses = this.className.split(/\s+/);
        for (var i in aClasses) {
            if (aClasses[i] == 'spoiler-controller' || aClasses[i] == 'spoiler-shown') {
                aClasses.splice(i, 1);
            }
        }
        if ($(this).hasClass('spoiler-shown')) {
            this.innerHTML = this.innerHTML.replace('Скрыть', 'Показать');
            $(this).removeClass('spoiler-shown');
        } else {
            this.innerHTML = this.innerHTML.replace('Показать', 'Скрыть');
            $(this).addClass('spoiler-shown');
        }
        for (i in aClasses) {
            if (!aClasses[i]) continue;
            var jContainer = $('.'+aClasses[i]).not('.spoiler-controller');
            jContainer.slideToggle();
        }
    });
});

spoiler-hider.css

.spoiler-controller { border-bottom: 1px dashed black; cursor: pointer; }
.spoiler-controller:hover { color: #b30; border-color: #b30; }
.spoiler { display: none; }

Теперь в нужном месте страницы пишу код

<p><b class="spoiler-controller pop-up_camper_<уникальный идентификатор>">Показать</b></p>
<section class="spoiler pop-up_camper_<уникальный идентификатор>"><p></p>

а в конце текста (и спойлера)

</section>

Также изменил размер заголовка блога, указав в /themes/plain/styles/main.css

.title h1 {...; font-size: 24px ;...}

Изменил подсвечивание кода (по этой статье) с помощью highlight.js:

<link rel="stylesheet" href="//yandex.st/highlightjs/7.3/styles/github.min.css">
<script src="//yandex.st/highlightjs/7.3/styles/github.min.css"></script>
<script>
	hljs.tabReplace = '    ';
	hljs.initHighlightingOnLoad();
</script>

hljs.tabReplace нужен для того, чтобы табуляции в коде заменялись на пробелы. highlight.js сам определяет на каком языке написан код, но можно явно указывать язык, добавляя class к тегу pre.

SVG-код вместо картинки

Wed, 07 Feb 2018 21:59:12 +0300

Вместо того, чтобы франить на ФС мелкий файл с простой картинкой (типа индикатор онлайн/офлайн) можно просто в тег img передавать svg-код этой картинки. Например HTML-код

<img src="data:image/svg+xml,<?xml version="1.0"?><svg height="8px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" fill="red"></svg>" />
&nbsp;
<img src="data:image/svg+xml,<?xml version="1.0"?><svg height="8px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" fill="gold"></svg>" />
&nbsp;
<img src="data:image/svg+xml,<?xml version="1.0"?><svg height="8px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="8" fill="green"></svg>" />

выведет такие три точки: (сделал форматирование по строкам для удобства и «читаемости», хе-хе). При размере кластера 4К это может быть существенно...

P. S. Наверное, этим все уже давно пользуются, но до меня только дошла выгода этого метода.

Напильник для Эгеи

Wed, 10 Jan 2018 20:53:53 +0300

Как можно заметить, мой блог ведётся на бесплатном (для личных блогов) движке Эгея. Это отличный блого-движок, отличающийся своей простотой, элегантностью и дружелюбием к пользователю. Поэтому, после восстановления сбоя на сервере с моим сайтом, я опять решил настроить блог на Эгее. Правда, незадолго до сбоя я обновил систему до Debian 9, вычистив все упоминания о PHP5, остался только PHP7 (с FPM), но движок блога может работать как на пятом, так и на седьмом PHP.

Показать

Возможно, что из-за кривоватых настроек моего сервера Эгея из старого бэкапа сразу работать отказалась (нет баз, не известен пароль к базам и т. д.). Это было, вероятно, тяжкое наследие старой системы, я обновлял её через aptitude dist-upgrade.

Пришлось бэкапить MySQL-базы с наполнением блога, затем переустанавливать заново движок (скачал релиз 2.7, версию 3249), инсталлятор создал новые базы, поверх которых я вытащил из бэкапа мои блоговые статьи, комменты и прочее. Причём начальные таблицы в базе создаются с префиксом ’e2Blog’, нужно не забыть поменять на используемый мной префикс в файле system/defaut/config.php, строка

$_config['db_table_prefix'] = 'e2Blog';

Да, и user/settings.json желательно привести к такому виду

{  "db": {"server": "<узел>","user_name": "<имя>","passw": "<пароль>","name": "<база>"},
    "timezone": {"offset": 10800,"is_dst": false},
    "template": "plain",
    "language": "ru",
    "appearance": {"notes_per_page": 10},
    "comments": {"default_on": true},
    "site_title": "Блог ни о чём",
    "description": "Мысли, факты, цитаты, заметки.",
    "author": "Павел Гладилов",
    "user": {"email": "pavel@gladilov.org.ru"},
    "notifications": {"new_comments": true}  }

Затем выяснилось, что вместо статей открывается страница с ошибкой

Fatal error: Uncaught Error: Call to undefined function dl() in <файл> line <строка>

Пришлось погружать свои ручки в код движка... В результате просмотра кода было найдено решение — замена части кода в ядре движка system/core.php с

if (!extension_loaded('gd')) { if (!dl('gd.so')) { header('Content-type: image/gif'); return false; } }

на

if (!extension_loaded('gd')) { header('Content-type: image/gif'); return false; }

После этого блог заработал, но теперь пропала возможность быстрого сохранения в редакторе по комбинации клавиш Ctrl + Enter (в старых версиях — Ctrl + S) и при попытке движка сформировать или вызвать на редактирование страницу, на которой есть ссылки на несуществующие файлы картинок — открывалась страница с серым фоном и маленьким пустым квадратом посередине. Причём, если такая «кривая» страница открылась — то даже при устранении всех причин всё равно отображается ошибочная страница. Я думаю (но не проверял), что это связано с хранением сгенереных страниц (или их частей) в user/caches/*.psa. Возможно, мне повезло, что со временем истёк срок хранения кешированных «кривых» страниц, и они стали отображаться нормально. Или возникновение такой проблемы как-то связано с разными форматами таблиц старой и новой версии движка. А вообще эту проблему я обошёл с помощью прямой правки заметок в записях таблицы <префикс>Notes, затем там-же стал выставлять атрибут ’Null’ в поле «Uploads» и использовать полный путь к файлам картинок от корня.

В файле user/extras/header-pre.tmpl.php прописываю заголовок для блога — кнопки и .

В файле themes/<имя используемой темы>/templates/layout.tmpl.php рисую верхнее меню:

<?php if ($content['class'] == 'frontpage') { ?>
          <div id="e2-blog-description"><?= $content['blog']['description'] ?></div>
        <?php } ?>
<br />
<table width="650">
<tbody>
<tr>
<td><a href="<ссылка1>"><img src="<картинка1>" style="vertical-align:middle!important" />&amp;&nbsp;<пункт1></a></td>
<td width="15"></td>
<td><a href="<ссылка2>"><img src="<картинка2>" style="vertical-align:middle!important" />&amp;&nbsp;<пункт2></a></td>
<td width="15"></td>
...
<td><a href="<ссылкаN>"><img src="<картинкаN>" style="vertical-align:middle!important" />&amp;&nbsp;<пунктN></a></td>
</tr>
</tbody>
</table>
      </div>
    </div>

Ну и тоже выплывшую при правке system/core.php проблему с невозможностью определить новую картинку для юзера решаю изменением в этом же файле определений DEFAULT_USERPIC_FILENAME и DEFAULT_USERPIC_PLACEHOLDER_FILENAME на путь к моей картинке.

define('DEFAULT_USERPIC_FILENAME','<soul.png>'); define('DEFAULT_USERPIC_PLACEHOLDER_FILENAME','<soul.png>');

Теперь мой блог выглядит приблизительно так:

Поменял немного дизайн своего сайта

Mon, 12 Aug 2013 17:44:33 +0300

Сменил расположение элементов своего сайта. Теперь сверху — ссылки на ресурсы без паролей, внизу — соответственно, запаролированные. И шапку тоже зеркально отобразил. Чуть позже расположу ссылки в порядке их интересности )))
И мобильную версию поправлю.

Новый мини-сайт (про Юэ Фея)

Tue, 28 May 2013 11:56:57 +0300

Набросал новый мини-сайтик о Юэ Фее, китайском полководце династии Южная Сун. Создавал его под впечатлением от книги 1963 г. «Сказание о Юэ Фэе», написанной Цянь Цаем и переведённой с китайского В. Панасюком. Очень советую всем, хоть читал я её в последний раз году этак в 1985...

Итак — Сказание о Юэ Фее.