IPB

Здравствуйте, Гость ( Вход | Регистрация )

 
Ответить в этой темеОткрыть новую тему
> Шаблоны и Скины Nucleus CMS, перевод с оф сайта
fazer
сообщение May 11 2008, 11:28 AM
Сообщение #1


Newbie
*

Группа: User
Сообщений: 6
Регистрация:
9-May 08
Пользователь №: 1,688



Возможно где-то перевод кривой.
Ногами плз не бить. В системе ещё не разобрался полностью, поэтому найти соответствующий перевод в руссом языке временами было достаточно проблематично.
В любом случае, тем, кто только начинает изучать систему - статья будет полезна.


HTML and CSS

Для редактирования скинов и шаблонов Вы должны иметь понятие что такие HTML и CSS.

The default skin (стандартный скин)

В этом разделе кратко обьясняется какие файлы используются для стандартного скина (default skin), и как этот скин редактируется.

В стандартном скине используется три файла:
1. default.css: файл стилей, определяет все стили страницы. Цвета, слои и тд. Определяются в этом файле.
2. atom.gif: логотип, находится в верхнем левом углу страницы.
3. nucleus2.gif: логотип Nucleus CMS.

CSS файл default.css содержит информацию о том, как страница будет построена в стандартном скине и шаблоне. Основное - это три div-контейнера: .contents, .logo и .menu

Для редактирования файла default.css нужен простой текстовый редактор типа Notepad, TextPad. Не используйте WordPad, Word, OpenOffice Writer, эти редакторы добавляют лишние символы в код.

Templates vs. Skins
Шаблоны vs Скины

В Nucleus и шаблоны и скины определяют, как будет выглядеть ваш блог. Так в чём же между ними разница?
Скины определяют, как будет выглядеть ваш сайт. Каждый скин состоит из нескольких типов: один для main index, один для элементов страницы(item pages), один для архива (archive), Скин также содержит инструкцию о том, где содержится вебблог, и с каким шаблоном он используется.
Шаблон используется для определения того, как на вашей странице будут выглядеть блоки. Шаблоны не включены в скины, т.к. несколько скинов могут использоваться в одном шаблоне.

Для примера рассмотрим страничку ниже. Вся страничка определена в скине, в то время как части в красном прямоугольнике (список категорий (category list) и контент странички (blog contents) формируются в шаблоне. Т.е. то, как будет отображаться контент – прописывается в шаблоне контента. Отображение категорий – в шаблоне категорий.


How skins are chosen
В этой разделе мы попытаемся объяснить, как Nucleus выбирает скин, когда вы вызываете страничку.

Skin Types
Для начала, вот несколько типов скинов, между которыми Nucleus делает выбор в соответствии с URL-запросом. Смотрите список ниже. Всё должно быть очевидно wink.gif

Query String Format Which skin type? Which weblog is shown?
?itemid=.. item Deducted from itemid
?archive=.. archive Default weblog, or blogid attribute
?archivelist=... archivelist archivelist-attribute
?archivelist archivelist Default weblog
?query=... search Default weblog, or blogid attribute
?memberid=.. member None
?imagepopup=.. imagepopup None (popup window with image)
(other or empty) index Default weblog, or blogid attribute




The Skin Cascade
Таблица сверху – показывает что будет отображаться на странице при запросе. Скин, который будет использоваться является стандартным скином, который выбирается в настройках для вашей странички.
Не каждый скин нуждается в описании всех составных частей. Когда часть скина «потеряется» - вместо него вызовется значение по умолчанию 'default'. Это позволяет создать для примера страничку ошибки (error page).


The 'default' Skin
Nucleus постоянно вызывает скин по 'default'. Это скин который вызывается если часть вызываемого скина потеряна. Если часть потеряна и из дефолтового скина – появится сообщение 'no appropriate skin found' (мол не найден соответствующий скин)
Другая причина, почему дефолтовый скин обязателен – возможность отображения сообщения об ошибке когда блог не выбран. ('no such blog' error)


Howto: An 'add item' form on your website (как добавить элемент на страничку)

Nucleus обеспечивает гибкость в добавлении элементов на ваш сайт. Добавление осуществляется в админке вашего сайта. Результат добавления вы можете сразу посмотреть там же и настроить как вам нравится. Все изменения применяются к скину главной страницы (index page) и действительны для всех остальных страниц. Вам не нужно будет изменять более никаких шаблонов.

1. JavaScript code

Прежде всего вы должны подключить edit.js Код Яваскрипт поставить в строку где-то между тегами <head> и</head>. Этот файл содержит функцию которая нужна для превью (предпросмотра) работы и для скрытия/отображения формы 'add item'
<script type="text/javascript" .
src="nucleus/javascript/edit.js"></script>


2. Indicate where the form will show up (укажите место появления формы)

Вы добавляете контейнер куда-то на своей странице. "display:none;" – содержимое скрыто.
<div id="edit" style="display:none;">
...
</div>


3. Code that inserts the form and preview (код для вставки и превью)

Теперь вы можете добавить изменённый HTML-код в этот контейнер, и используете <%additemform%> и <%preview(templatename)%> для вставки 'add item' form и превью соответственно. Пример ниже.
<h2>Add Item</h2>
<%additemform%>

<h2>Preview</h2>
<%preview(mytemplate)%>



4. The 'add item'-link (ссылка на добавленный элемент)

И последних штрих: ссылка или кнопка запускает отображение формы. Даны два примера. Первый – простейшая ссылка:
<a href="java script:showedit();">add item</a>

Второй пример – скрытая кнопка в левом верхнем углу.
<div style="position: absolute; left: 0px;
top: 0px; width: 10px; height: 10px"
onclick="java script:showedit();">
</div>



Howto: CSS to define the look of forms (CSS определяет как выглядит форма)
Through variables such as <%searchform%> and <%commentform%>, forms can easily be included into your skin. To allow styles to be applied on those forms, CSS classes have been assigned to the input fields and buttons, and to a surrounding DIV-container.

Below is a list of which CSS class corresponds to which form. These are the classes assigned to the surrounding DIV-container.

Через переменную вида <%searchform%> и <%commentform%>, форма подключается к вашему скину.
Ниже приведёг список какой CSS класссоответствует какой форме

Form Type Skin Variable CSS Class Name
Add Item to Blog <%additemform%> .blogform
Add Comment <%commentform%> .commentform
Login Form <%loginform%> .loginform
Search Form <%searchform%> .searchform
Member to Member Mail <%membermailform%> .mailform

Ниже несколько CSS классов предназначенных для кнопок и полей ввода.

Type CSS Class Name
Input fields (text and textarea) .formfield
Buttons .formbutton



Ниже пример как исользуются эти классы в вашем файле стилей (css)

[codebox]/* applies to all input fields */
.formfield {
background-color: gray;
}

/* only applies to buttons for comment forms */
.commentform .formbutton {
border: 1px solid #000;
background-color: #ddd;
color: #000;
font-size: xx-large;
}

[/codebox]


В примере, все поля сгенерированные nucleus будут с серым бэкграундом, Кнопка submit (подтвердить) в форме коммента будет иметь large text, граница 1px чёрного цвета, и светло серый бэкграунд.


Creating a new skin (создание нового скина)

Сначала мы создаём новый скин в своей админке. Nucleus Management > Edit Skins. Назовём скин «vista».
Мы видим скин 'vista' в списке скинов и переходим на страничку редактирования (Edit).
Тип содержимого у нас text/html, это то что нам надо, ничего не меняем.
Для экспорта скина у нас должны быть все файлы (images, stylesheets, и пр) в одной папке.
Папка для скинов:
/home/user/example/htdocs/skins/
http://example.org/skins/


Затем мы заливаем файлы скина в нужную директорию. (в данном случаем в папку 'vista')
/home/user/example/htdocs/skins/vista/
http://example.org/skins/vista/


Include Prefix также имеет значение. Это части скина vista/
Вот правильные настройки:
Name: vista
Content Type: text/html
Include Mode: Use skin dir
Include Prefix: vista/


Edit the skin
Строка вида
<%skinfile(myFile.jpg)%>
означает:
http://example.org/skins/vista/myFile.jpg

Давайте для себя и определим общие стили в 2 файлах называемых pagefoot.inc и pagehead.inc, которые мы закинули в нашу папку со скином vista/

pagehead.inc
[codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Site</title>
<link rel="stylesheet" type="text/css" href="<%skinfile(layout.css)%>" />
</head>
<body>

<div id="contents">
[/codebox]

pagefoot.inc
[codebox]</div><!-- contents div end -->
<div id="stuffbar">
<h2>Navigation</h2>

<ul>
<li><a href="<%todaylink%>">Today</a></li>
<li><a href="<%archivelink%>">Archives</a></li>
</ul>
<h2>About</h2>
<ul>
<li><a href="http://www.nucleuscms.org/">Nucleus</a> Power!</li>
</ul>
</div><!-- stuffbar end -->
</body>
</html>
[/codebox]


Main Index
[codebox]<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%blog(vista/main,10)%>
<%parsedinclude(pagefoot.inc)%>
[/codebox]

Item Pages
[codebox]<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<h2>Item</h2>
<%item(vista/detailed)%>
<h2>Comments</h2>
<%comments(vista/detailed)%>
<h2>Add Comment</h2>
<%commentform%>
<%parsedinclude(pagefoot.inc)%>
[/codebox]

шаблоны называются vista/main и vista/detailed.

Archive List
[codebox]<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archivelist(vista/main)%>
<%parsedinclude(pagefoot.inc)%>
[/codebox]

Archive
[codebox]<%parsedinclude(pagehead.inc)%>
<h1>My Blog</h1>
<%archive(vista/main)%>
<%parsedinclude(pagefoot.inc)%>
[/codebox]

Export the skin
Когда всё это сделано, можно экспортировать скин из Skin Import/Export page в вашу админку.
Проделайте следующие движения:
1. Выделите vista, vista/detailed и vista/main из списка скинов и шаблонно.
2. Добавьте какое-нибудь текстовое описание и жмите «Export». Сгенерируется файл skinbackup.xml
3. Сохраните файл skinbackup.xml вместе с остальными файлами в директории vista/
4. Упакуйте все файлы директории vista в zip файл.
5. Всё, Ваш скин можно показывать людям wink.gif

Importing a skin
Импорта скина – это обратный экспорту процесс.
1. Раззипуйте zip файл из вашей директории скинов.
2. В админке на странице Skin Import/Export выберите vista из списка и нажмите Import.
3. Следуйте инструкции.
Всё, скин проинсталлирован. Вы можете выбрать его в настройках вашего блога.

(оригинал статьи тут)
К началу страницы
 
+Цитировать Сообщение
site2017
сообщение Nov 25 2017, 10:28 PM
Сообщение #2


Newbie
*

Группа: User
Сообщений: 1
Регистрация:
13-July 17
Пользователь №: 2,096



Today, all programmers and designers are trying to upgrade the rank of the site and their website pages in search engines such as Google, Bing, etc.

The search engines in the world have no intention of revealing their search algorithm and preventing the hacking of this algorithm.

But many web designers who call them a white hat, by testing the error of optimizing methods, are doing the best for the website they are looking for, the next when the algorithm changes and updates every day. Everyone else is looking for what these giants are looking for.

In HTML5, most of the tasks that website designers are doing is simplified.
Audio and video in tandem with HTML5 language

For many years, web designers used plug-ins such as Adobe Flash or Silverlight to add video and sound to web pages. These plugins give the designers a beautiful, stylish web page to attract more users to their website.

Of course, these types of web sites do not have a good ranking in search engines, because search engines can not easily save web pages that have Adobe Flash and Silverlight. One of the good steps that was taken in this was the collapse of the flash. Although many designers have invested in their future.

HTML5 allows audio and images to be well recorded or indexed in the search engine. Using these tags will make your website pages rank well in search engines.

Generally, sites that use HTML5 rank far better than sites that use plugins. Of course, this question may well point out that HTML5 is suitable for all things.

Google puts a lot of emphasis on building a website for its users, with these interpretations, we may see the rise of HTML6 in a while.
ساخت سايت
К началу страницы
 
+Цитировать Сообщение
dariushbabri
сообщение Dec 3 2017, 07:36 AM
Сообщение #3


Newbie
*

Группа: User
Сообщений: 4
Регистрация:
3-December 17
Пользователь №: 2,102



Of course, these types of web sites do not have a good ranking in search engines, because search engines can not easily save web pages that have Adobe Flash and Silverlight. One of the good steps that was taken in this was the collapse of the flash. Although many designers have invested in their future.





طراحی سایت
К началу страницы
 
+Цитировать Сообщение
ali rafami
сообщение Jan 27 2018, 10:55 AM
Сообщение #4


Newbie
*

Группа: User
Сообщений: 5
Регистрация:
27-January 18
Пользователь №: 2,107



HTML5 is the best thing to happen to websites, since sliced bread happened to the world. This new code allows you to structure your site in a language search engines understand — so you’ll always know how search engines are viewing and interpreting it.

К началу страницы
 
+Цитировать Сообщение
Vitalbrands.pk
сообщение Mar 14 2018, 07:57 PM
Сообщение #5


Newbie
*

Группа: User
Сообщений: 1
Регистрация:
14-March 18
Пользователь №: 2,115



Nice Post G.....................






eid collection 2018 with price
best eid collection 2018
new eid fashion 2018 latest pakistani designer collection 2018
К началу страницы
 
+Цитировать Сообщение
samdesign
сообщение Sep 23 2018, 02:57 PM
Сообщение #6


Newbie
*

Группа: User
Сообщений: 1
Регистрация:
23-September 18
Пользователь №: 2,122



Hi dear friend
You have a great site
Hope to be successful and proud
samdhprint
К началу страницы
 
+Цитировать Сообщение

Ответить в этой темеОткрыть новую тему
2 чел. читают эту тему (гостей: 2, скрытых пользователей: 0)
Пользователей: 0

 



Текстовая версия Сейчас: 13th November 2018 - 07:04 PM
Рецепты - Скачать программы - Scripts