Mercurial

diff .cms/mini/instruction.ru_RU.UTF-8.html @ 0:78edf6b517a0 draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
24.10
author Coffee CMS <info@coffee-cms.ru>
date Fri, 11 Oct 2024 22:40:23 +0000
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/.cms/mini/instruction.ru_RU.UTF-8.html	Fri Oct 11 22:40:23 2024 +0000
@@ -0,0 +1,179 @@
+<!doctype html>
+<html lang="ru">
+
+    <head>
+        <meta charset="utf-8">
+        <title>Заготовки для шаблона</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <link rel="stylesheet" href="styles.css">
+        <style>
+            /*Инструкция использует css стили темы сайта, а прописанные стили ниже дополняют оформление только для инструкции*/
+            body {grid-template-areas: unset; grid-template-rows: unset; align-content: start; padding: 0 0 2rem 0;}
+            main {grid-area: unset; padding: 0;}
+            main:first-child {padding-bottom: 2rem;}
+            main > h2 {margin-bottom: 1rem;}
+            main > p {margin-bottom: 0.5rem;}
+            [data-copy] {justify-self: center; padding: 0.4rem 0.7rem; min-width: 110px;}
+            pre {word-wrap: break-word; word-break: break-all; margin: 0;padding: 0.5rem;}
+            .block-code {display: grid; row-gap: 1rem; padding: 3rem 0; border-bottom: 1px solid #999999;}
+            body > main:first-child {border-bottom: 1px solid #999999; padding-top: 2rem;}
+            main .code {overflow-x: auto; background-color: white;}
+        </style>
+    </head>
+
+    <body>
+
+        <main>
+            <h2>Инструкция по шаблоу mini</h2>
+            <p>Ниже хранятся фрагменты кода для быстрого копирования и вставки. Вы можете дополнить эту инструкцию своими примерами кода через пункт Шаблон, отредактировав файл instruction.ru_RU.UTF-8.html. Но сначала сделайте копию шаблона, иначе из-за измененных файлов не сможете обновлять CMS.</p>
+            <p>Скопированный код вставьте в нужное место страницы, выделите его и выровняйте нажатием сочетания клавиш - [Shit] + [Tab].</p>
+
+            <h2>Как создать свой шаблон</h2>
+            <p>Шаблон mini - это простой стартовый шаблон. Он находится в папке .cms/mini/. Создайте копию этой папки, например, с названием .cms/mini2/, переключитесь на шаблон mini2 и уже в этой папке изменяйте файлы под себя. Если же вы будете править файлы в оригинальном шаблоне, то CMS потом не сможет обновиться, будет сообщать, что файлы изменены и поэтому она не хочет перезатирать ваши наработки.</p>
+            <h2>Блог</h2>
+            <p>С помощью шаблона mini можно создать блог с бесконечной подгружаемой лентой тизеров статей. Тизер переводится как "приманка", это часть статьи, не обязательно ее начало, которая интригует к прочтению всей статьи. Для этого нужно для одной из страниц, которая будет лентой, задать шаблон blog, а остальным страницам, которые будут статьями в блоге, задать шаблоны post. А внутри постов выделить тизеры с помощью открывающего и закрывающего html-комментария.</p>
+            <pre>&lt;!-- preview-start -->
+&lt;p>тут расположен текст тизера&lt;/p>
+&lt;p>можно с html-тегами, а можно и без&lt;/p>
+&lt;!-- preview-end --></pre>
+            <p>Но если не отметить тизер специально, то будут взяты первые 500 символов статьи, при этом очищается html-разметка. Старайтесь задавать тизеры вручную чтобы они выглядели красиво и заинтересовывали читателей.</p>
+            <h2>Главная</h2>
+            <p>Так же имеется шаблон frontpage, который как и blog выводит тизеры страниц с шаблоном post, но только последние 6 штук. Он подойдет для создания главной страницы которая не должна быть лентой. В этом шаблоне php-код сильно упрощен по сравнению с blog.</p>
+            <h2>Заготовки</h2>
+            <p>Ниже представлены заготовки, которые вы можете использовать для оформления страниц сайта. Выберите нужный вам блок и нажмите кнопку Копировать под ним. Затем вставьте скопированный блок в редактируемую страницу.</p>
+        </main>
+
+
+        <div class="block-code">
+            <main data-example=lbox-example>
+                <img class="lbox" alt="Баннер" src="/mini/banner.jpg" width="1920" height="700">
+            </main>
+            <button data-copy=lbox-example>Копировать</button>
+        </div>
+        
+
+
+        <div class="block-code">
+            <main data-example=banner>
+                <img class="banner" alt="Баннер" src="/mini/banner.jpg" width="1920" height="700">
+            </main>
+            <button data-copy=banner>Копировать</button>
+        </div>
+
+        
+        
+        <div class="block-code">
+            <main data-example=cite>
+                <blockquote>
+                    <p>Только работа дает ответы на все вопросы.</p>
+                    <p class="author">Николай Замяткин</p>
+                </blockquote>
+            </main>
+
+            <button data-copy=cite>Копировать</button>
+        </div>
+
+        <div class="block-code">
+            <main data-example=code>
+                <pre class="ignorgap"><code><p>Заголовок</p>&lt;?php
+$cms['modules']['test.mod.php'] = array(
+    'name'        =&gt; 'Test',
+    'description' =&gt; 'Test module',
+    'url_title'   =&gt; 'Module page',
+    'url_link'    =&gt; 'https://coffee-cms.com/modules/test/',
+    'author'      =&gt; 'Coffee CMS team',
+    'version'     =&gt; '20.04',
+    'files'       =&gt; array(
+        '.cms/mod/test.mod.php',
+    ),
+    'sort'        =&gt; 100,
+);</code></pre>
+            </main>
+
+            <button data-copy=code>Копировать</button>
+        </div>
+
+        
+        
+        <div class="block-code">
+            <main data-example=wpic1>
+                <p>Ниже пример картинки выходящей за ширину текста и описанием за счёт добавления класса wide тегу figure.</p>
+
+                <figure class="wide">
+                    <img alt="" src="/mini/banner.jpg" width="1920" height="700">
+                    <figcaption>Описание изображения</figcaption>
+                </figure>
+            </main>
+
+            <button data-copy=wpic1>Копировать</button>
+        </div>
+
+        <div class="block-code">
+            <main data-example=wpic2>
+                <p>Ниже пример картинки картинки выходящей за ширину текста за счёт добавления ей класса wide</p>
+
+                <img class="wide" alt=""src="/mini/banner.jpg" width="1920" height="700">
+            </main>
+
+            <button data-copy=wpic2>Копировать</button>
+        </div>
+
+
+        <script>
+            document.addEventListener( "DOMContentLoaded", function( event ) {
+
+                document.querySelectorAll( "[data-copy]" ).forEach( function( button ) {
+
+                    button.addEventListener( "click", function( e ) {
+
+                        let html  = document.querySelector( '[data-example="' + button.getAttribute( "data-copy" ) + '"]' ).innerHTML.trim();
+
+                        let textarea = document.querySelector( "[data-for-copy]" );
+                        textarea.style = ""; // делаем видимым чтобы работало копирование
+                        textarea.value = html;
+                        textarea.select();
+                        let ok = document.execCommand( "copy" );
+
+                        let old_text = button.textContent;
+                        if ( ok ) {
+                            button.textContent = "OK";
+                            setTimeout( function() {
+                                button.textContent = old_text;
+                            }, 1000 );
+                        } else {
+                            button.textContent = "Ошибка";
+                            setTimeout( function() {
+                                button.textContent = old_text;
+                            }, 1000 );
+                        }
+                        textarea.style.display = "none";
+
+                    } );
+
+                } );
+
+            } );
+
+            document.querySelectorAll( "img.lbox" ).forEach( function( img ) {
+                img.addEventListener( "click", function () {
+                    if ( document.querySelector( "#lbox-window" ) == null ) {
+                        let img = document.createElement( "img" );
+                        img.src = this.getAttribute( "src" );
+                        let div = document.createElement( "div" );
+                        div.id = "lbox-window";
+                        div.appendChild( img );
+                        document.body.appendChild( div );
+                        div.addEventListener( "click", function( e ) {
+                            this.remove();
+                        } );
+                    }
+                } );
+            } );
+        </script>
+
+        <div>
+            <textarea data-for-copy style="display: none;"></textarea>
+        </div>
+
+    </body>
+</html>