Як ховати довгі тексти

Попри те, що Blogger — оптимальний вибір для ведення блоґа, ця платформа має недоліки.

По-перше, це неможливість створення окремих сторінок, які не відображувалися б на головній сторінку. Але це не проблема — радше незручність: такі сторінки можна зберігати на иншому сервері. Також не можна відредаґувати правило формування адрес для сторінок дописів. В результаті, якщо ви не ввели жодного допису латинкою, адреса буде ...blog-post-xx.html, хоча це, на мою думку, краще за транслітні назви, які ґенерує WordPress.

По-друге, нема деревоподібного коментування, що робить відображення коментарів не дуже зручним. Проте більшість форумів мають такий самий вигляд — так що це — питання смаку.

Але головна проблема: приховування частини допису на головній сторінці. Особисто мені така штука не дуже потрібна, але, про всяк випадок, я вирішив розібратися, як таке зробити.
Власне, приховати допис у Blogger можна без особливих зусиль. Проблема полягає в тому, що посилання “Читати далі...” з'являється незалежно від того, чи є що читати, чи ні. Проте, якщо ви не приховали ніякого тексту, це посилання не має сенсу. Цю проблему розв'язують за допомогою Javascript, але, на жаль, текст Javascript не вводиться в редакторі шаблонів. Можна, звичайно поекспериментувати з прибиранням HTML коментарів і експортом-імпортом тіла шаблона, але я вважаю, що це поганий стиль.

Звичайно, код можна помістити в зовнішній файл, але він не знає адресу сторінки з повною версією. Вихід: замість виводу всього посилання, обмежитися виводом чарівної комбінації <span></span>. Ця комбінація “перетворює” невидимий span на видимий.

Отже, як додати відрізання дописів:

1. Відкриваємо “Редаґувати HTML шаблона”.
2. Ставимо позначку біля “Розширити шаблони елементів керування”.
3. Перед рядком </head> вводимо:

   <b:if cond='data:blog.pageType == "item"'>
<style><!--
.fullpost {display:inline;}
.shortpost {display:none;}
--></style>
<b:else/>
<style><!--
.fullpost {display:none;}
.shortpost {display:inline;}
--></style>
</b:if>

   
   
4. Після <p>data:post.body/></p> додаємо:

   <a class='shortpost' expr:href='data:post.url'><span style='display:none;'><script src='http://hosting.gmodules.com/ig/gadgets/file/117303972852731864037/bloggernext.js' type='text/javascript'/>Читати далі...</span></a>

   
   
5. Зберігаємо шаблон.

Тепер, щоб приховати текст на першій сторінці, його треба заключити між <span class="fullpost"> і </span>.

Якщо Javascript відключено, цей трюк працювати не буде. І тут у нас є вибір: або ставити посилання на повний доступ завжди, або не ставити ніколи. Якщо ви хочете, щоб посилання на повний допис відображувалося для всіх дописів при відключеному Javascript, останній код слід трохи змінити:

<a class='shortpost' expr:href='data:post.url'><span style='display:none;'><script src='http://hosting.gmodules.com/ig/gadgets/file/117303972852731864037/bloggernext.js' type='text/javascript'/>Читати далі...</span><noscript>Текст повністю...</noscript></a>

Таким чином, маємо два зарезервованих класи: fullpost і shortpost, які відображуються відповідно тільки в повній версії або тільки в короткій. Слід пам'ятати, що script враховує тільки наявність span. Це означає, що якщо ви приховаєте текст за допомогою чогось иншого, наприклад, div, посилання на повну версію не з'явиться. Також script псує глобальну змінну next_memory, де він зберігає кількість елементів, які були доступні під час останнього виклику.

Можна було б обійтися без класу shortpost і заборонити приховувати инші елементи класу fullpost, окрім span. Але я вважаю, що це зайве. Наявність повноцінних класів дає більше можливостей для маніпуляцій з текстом. Наприклад, дозволяє приховати його коротку версію, як це зроблено в цьому дописі.

Далі...