Здрастуйте, шановні читачі блогу . Вирішив написати зовсім маленький пост на тему створення змісту статті, якщо вона вийшла великий або ви очікуєте заходи користувачів з дещо різними інтересами. У цьому випадку короткий зміст та можливість відразу перейти до потрібного фрагменти статті на вашому сайті може виявитися корисним, як мені здається.
Я опишу той варіант, який використовується у мене на блозі, ну, а ви вільні будете його адаптувати під свої запити. Все базується на звичайних Html теги і CSS властивості, але якщо ви не знаєте цих мов розмітки, то просто можете скопіювати мій варіант, а потім потихеньку освоюватися з основами мови за підручником Html і погортати мій довідник по CSS.
У будь-якому випадку постараюся пояснювати, орієнтуючись на початківців і ще мало знають користувачів (сам таким був і в багатьох питаннях залишаюся досі).
Для чого і як можна створити зміст статті в Html
Виводити зміст (зміст) у статті, особисто мені, приходить в голову не завжди, а тільки в тих випадках, коли це здається виправданим. Наприклад, у недавній публікації про вічні посилання в Гогетлинксе таке зміст присутній, бо в цій біржі можна заробляти, а можна і займатися просуванням, тобто витрачати гроші.
Різним читачам можуть бути цікаві різні фрагменти цієї публікації не цікаві інші. Щоб не втратити когось по дорозі, я і вирішив додати туди зміст.
У деяких моїх публікаціях є просто дуже багато інформації, і не зробити спочатку зміст буде злочином перед користувачем, який, сподіваючись на невеликий за розмірами, але змістовний пост, загрузне в жахливих розмірах «онучі» з купою розлогих міркувань і не потрібних йому пояснень.
Прикладом може служити матеріал про пошукову систему Яндекса і все з нею пов’язане.
Реалізовано це все за допомогою нумерованих списків Html OL, для яких прописано ще й кілька рядків CSS коду в окремому файлику. Так само використовуються так звані якорі для гіперпосилань, які створюють у статті тим місця, куди будуть вести пункти змісту.
Давайте з якорів і почнемо. Я розставляю їх у проміжних заголовків у статті. Раніше це можна було робити за допомогою ось такої конструкції:
В атрибуті name прописується унікальна для цієї статті мітка. Проте зараз такий метод вставки якорів вважається невалидным (небажаних) і в якості якорів пропонується використовувати значення атрибута ID, який можна буде прописати, наприклад, в тегах H1-H6 тих самих проміжних заголовків у статті.
Про це я писав у статті про Створення якорів і хеш-посилань (до речі, перейшовши по ній ви як раз і переміститеся в потрібне місце статті, а не в її початок, як було б при звичайній не хеш-ссылке).
Давайте для прикладу розглянемо статтю про Гогетлинкс, де перший підзаголовок виглядає в коді приблизно так:
Просування сайтів в Gogetlinks і заробіток на посиланнях
У мене це теги H3, хоча за логікою повинні бути H2 (ступив на початковому етапі створення блогу, а зараз переробляти вже не бачу особливого сенсу, та й боюся, бо пошуковики і їх дії не завжди йдуть в ногу з звичайною людською логікою). Ось.
Як бачите, там у мене стоїть унікальний ідентифікатор ID унікальним для цієї статті значенням ggl. Для наочності наведу код і другого підзаголовка:
Налаштування кампанії в ГогетЛинкс для просування сайту
Думаю, що логіка зрозуміла. Тепер на ці місця в Html-коді сторінки можна посилатися, щоб стаття відкривалася або ж прокручувалася (у разі, якщо ви знаходитесь на її початку, де й розташоване зміст) до цього підзаголовка.
Мітки, які ви вказуєте в ID, повинні бути написані латиницею і без пробілів, крім цього їх краще не починати з цифри, хоча останнє, можливо, критично тільки при прописуванні для них властивостей CSS через селектори. Але на всякий випадок.
У мене, до речі, був випадок, що проставлена мною мітка для якоря в ID збіглася з уже існуючою і описаної в CSS файлі, що викликало у мене по початку щире здивування, бо підзаголовок став виглядати вкрай химерно і незвично. Причому в тій статті він був поки що тільки один, що і змусило мене якийсь час ламати голову над тим, що трапилося.
Ну ось, саме складно зробили, тепер можна і, власне, зміст додавати. У нашому прикладі воно буде виглядати так:
Гіперпосилання всі ведуть на одну і ту ж сторінку, де і розташована ця стаття, а в кінці у них через ґрати (# — її іноді називають хеш) стоїть унікальна мітка, кожна з яких веде на свій якір.
В принципі, можна було б замість цього написати більш коротко:
І на сторінці зі статтею все чудово працювало б, бо перед хешем браузер автоматично підставить Урл тієї сторінки, з якої такого виду посилання проставлена.
Але проблема полягає в тому, що цей зміст буде виводитися і на головній (а у кого-то і в рубриках, тегах або інших архівах), а там вже такі посилання нікуди не приведуть. Тому залишаємо перший варіант з повними Урлами.
Оформляємо зміст статті за допомогою CSS властивостей
Все, тепер тільки залишається прописати CSS властивості для селектора класу ogl і справа в капелюсі. Зазвичай, всі стилі виносяться в окремий файл або декілька файлів. У разі Вордпресс він живе в папці з вашою темою:
/wp-content/themes/назва теми/style.css
В Joomla його варто пошукати в папці з шаблоном, який у вас в даний момент використовується.
Щоб отримати такий же вигляд змісту (змісту) для статті як у мене, досить буде додати в нього цю рядок коду:
.ogl {float:right;border:1px dotted black;padding:5px 5px 0 5px;margin:5px;}
Розберемо по порядку CSS властивості:
Крім цього ви будете вільні додати сюди і окреме налаштування шрифтів за допомогою властивості Font (Weight, Family, Size, Style) або ще щось, але особисто мені здалося й цього досить.
Для того, щоб експериментувати з оформленням, можна буде, не залазячи в файл style.css, погратися зі стилями, прописавши їх прямо в Html коді за допомогою атрибута style, а вже потім перенести остаточний варіант в окремий стильовий файлик. Виглядати це буде приблизно так:
Взагалі, стилі CSS можна підключати до Html через style трьома способами, описаними в публікації за наведеним посиланням. Краще всього зовнішній файл, але на етапі налагодження і інші цілком підійдуть.
P. S. Нещодавно додав ще й слово «Зміст», щоб було зрозуміліше, що це таке. Ясна річ, що для шести сотень статей робити це вручну було б дуже важко, тому використав багатий інструментарій CSS, а саме псевдоэлемент before. У файлі СЅЅ була додана відповідна рядок:
.ogl:before {content: «Зміст:»;color:#ccc;line-height:2em;}
Удачі вам! До зустрічей на сторінках блогу
