راهنمای قالب های اصلی و سفارشی برنامه

راهنمای مجموعه نرم افزارهای یکتاوب

راهنمای قالب های اصلی و سفارشی برنامه

سایر راهنماهای قالب های برنامه و کدهای قابل استفاده:

راهنمای فایل‌ها و کدهای قالب های اصلی و سفارشی برنامه (چگونه قالب گرافیکی پایگاه را تغییر دهیم؟)

بسته‌ی نرم‌افزاری یکتاوب هم‌اکنون 3 نوع قالب گرافیکی پایه دارد که ویژگی‌های آن‌ها را میتوانید در بخش مدیریت پایگاه از بخش ویژه‌ی طراح برنامه و زیرمنوی تنظیمات قالب‌های‌ وبگاه ببیند و ویرایش کنید.

1. قالب عمومی نوع AWT1

عرض صفحات این نوع قالب بیشتر روی 800 پیکسل تنظیم شده است.
این نوع قالب‌ها تنها یک تصویر برایheader و footer (بنرهای بالا و پایین صفحات) دارند. بنابراین، می‌توان به آسانی آن‌ها را ویرایش کرد.
فایلهایheader و footer صفحات در شاخه site قرار میگیرند. با کلیک راست روی تصویر و گرفتن Properties میتوان ابعاد، نام و مسیر دقیق آن را مشخص کرد.

نمونه این قالب را ببینید: www.jazirehdanesh.com

2. قالب عمومی نوع AWT2

عرض صفحات این نوع قالب بیشتر روی 100 درصد تنظیم شده است.
این نوع قالب‌ها 4 تصویر برایheader و footer (بنرهای بالا و پایین صفحات) دارند. بنابراین، برای ویرایش آنها باید تناسب بین ابعاد این تصویرها را در نظر گرفت.
فایلهایheader و footer صفحات در شاخه site قرار میگیرند. با کلیک راست روی تصویر و گرفتن Properties میتوان ابعاد، نام و مسیر دقیق آن را مشخص کرد.

نمونه این قالب را ببینید: www.iust.ac.ir/index.php

3. قالب‌های سفارشی

قالبهای ویژه به سفارش کارفرما و به صورت اختصاصی برای هر یک از پایگاهها تهیه میشوند. این نوع قالبها از ترکیب یک صفحه HTML یا TPL با کدهای قالب یکتاوب فراهم می‌آیند. فایلهای HTML یا TPL این نوع قالب در شاخه yekta_program/tpl_files قرار میگیرند.
اگر خواهان داشتن یک قالب اختصاصی هستید، می‌توانید با متغیرهای عمومی یکتا، قالب صفحات مورد نیاز خود را تعریف کنید. پس از طراحی قالب، فایل‌های html و css آن را به شاخه yekta_program/tpl_files فراگذاری کنید و نام فایل‌ها را در بخش تنظیمات قالب پایگاه تنظیم کنید.

هر نوع فایل css یا js اضافی را هم می توانید با اضافه کردن کدهای مورد نظر در کادرهای موجود در این بخش (بخصوص کادری که محتوای آن در بخش head بارگذاری می شود) در قالب سفارشی خود فراخوانی کنید. مثلا یک پوشه در site1 بسازید و کلیه css ها و js ها را در آن قرار دهید و سپس در این کادر این نشانی ها را به صورت زیر وارد کنید:

گاهی لازم است در نشانی های بکار رفته در html، js و CSS های خود تغییراتی ایجاد کنید تا با مسیرهای استفاده شده در برنامه هماهنگ شوند.

جدید: نمونه فایل های قالب سفارشی را در این بخش دریافت نمایید.

نمونه زیر را برای آشنایی با نحوه تنظیم بخش تنظیمات قالب سفارشی بینید:

در این قالب ها می توانید برای نمایش خودکار مطالب و تصاویر و ... از روش نمایش خودکار کدها استفاده کنید:

راهنمای استفاده از کدهای نمایش محتوا (درج خودکار محتوا در میان مطالب و قالب های پایگاه)

4- قالب های مدرن - سازگار با نمایشگر های کوچک مثل موبایل و تبلت

توضیح کلی

قالب های نوع awt1 و awt2 در ابتدای توسعه برنامه و به صورت عمومی برای همه پایگاه ها طراحی شده بودند. با گذشت زمان و توسعه فناوری های جدید، استفاده از این فناوری ها برای ارتقای ظاهر گرافیکی برنامه ضروری به نظر می رسید. برای تحقق این امر طرح بهسایت آغاز شد و طی چند سال اخیر تعدادی از سایت ها از این طرح استفاده کردند. اما این روش کند و پر هزینه بود و همه سایت ها نتوانستند از آن استفاده کنند.
در نهایت برای افزایش زیبایی و کارآیی همه سایت ها، این نتیجه رسیدیم که قالب های جدیدتری را به صورت اختصاصی متناسب با هر نوع پایگاه (نشریه، همایش، انجمن و ...) توسعه داده و به صورت رایگان در اختیار همه پایگاه ها قرار دهیم. در حال حاضر قالب پایگاه نشریات تکمیل شده است و نصب آن آغاز گردیده است. امیدواریم تا پایان سال 1394، قالب اختصاصی را برای تمام سامانه های اصلی شرکت در اختیار مشتریان قرار دهیم.

مشاهده نمونه قالب مدرن یک - ویژه نشریات: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مشاهده نمونه قالب مدرن دو - ویژه انجمن ها: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مشاهده نمونه قالب مدرن سه - ویژه همایش ها: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مشاهده نمونه قالب مدرن چهار - قالب عمومی: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مشاهده نمونه قالب مدرن پنج - قالب عمومی: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مشاهده نمونه قالب مدرن شش - ویژه نشریات: پایگاه نمونه برخط (آنلاین) | تصویر قابل دریافت + راهنمای قالب

مزایای قالب های مدرن:

قالب های جدید با کمک فناوری های جدیدتری توسعه داده شده اند. استفاده از div به جای table سرعت بارگذاری صفحات را افزایش داده و نیز باعث تسهیل استفاده از پایگاه از طریق موبایل و تبلت گردیده اند. همچنین با فعال شدن ویرایشگر جدید مشکل کپی کردن مطالب از ورد در مرورگر فایرفاکس حل شده است.
در توسعه این قالب، حداکثر امکانات تغییر توسط کاربر برای اختصاصی سازی مد نظر بوده است. به همین دلیل در برخی بخش ها، کدهای استفاده شده به صورت فایل های txt در دسترس قرار گرفته اند تا به سادگی قابل ویرایش باشند. هر چند این امر در اولین نگاه باعث پیچیدگی کار با قالب می شود، اما با کمی دقت و تمرین مزایای استفاده از فایل های متنی را احساس خواهید کرد. (این روش مشابه مزیت کار با خط فرمان در لینوکس نسبت به محیط گرافیکی در ویندوز است.) همچنین امکان اضافه کردن کدهای جدید به css و java script فراهم شده است که در انتهای همین صفحه توضیح داده شده است.

نکته های مهم:

امکان تست قالب جدید قبل از فعال سازی و نیز فعال و غیر فعال کردن قالب جدید همواره وجود دارد.
با فعال کردن قالب جدید برخی تنظیمات پایگاه (تنظیمات صفحه اصلی، مدیریت مطالب در صفحه اصلی و ...) دیگر تابع بخش تنظیمات نیستند و باید از طریق همین صفحه تنظیم شوند.
بلوکهای جانبی بخش مدیریت بلوک ها فعلا در صفحه اصلی و فرعی فعال نیستند. بلکه بلوک های متنی به جای آنها در نظر گرفته شده اند..
امکان ویرایش فایل های قالب کل بخش های برنامه و نیز امکان توسعه قالب جدید در برنامه فراهم است..
اگر با روش معرفی شده در زیر نمی توانید قالب را تغییر دهید می توانید فایل ها و توضیحات لازم را برای شرکت ایمیل کنید تا ما قالب جدید را برای سایت شما تنظیم کنیم.
هر نوع اشکال فنی در خصوص قالب ها را می توانید با ایمیل شرکت یا شماره تماس 021-22096045 (آقای نظری) مطرح کنید.

روش کار

برای استفاده از این قالب می توانید تنظیمات لازم را در این صفحه انجام دهید و پس از پایان کار، قالب پایگاه را تست کرده و در صورت مناسب بودن، آن را تغییر دهید.
تنظیمات شامل تغییر فایل های css و تصاویر قالب (در صورت نیاز به تغییر رنگ)، تنظیمات متون ظاهر شده در صفحه اول پایگاه و تنظیم منوهای بالای صفحه (صفحات پایگاه) می باشند که همه موارد را می توانید از همین صفحه تنظیم کنید. همچنین می توانید تصاویر و لوگوهای اختصاصی خود را فراگذاری کنید. برای نمایش اخبار پایگاه در صفحه اصلی هم می توانید کد های انتقال مطلب را در فایل های متنی قالب ویرایش کنید.

ساخت قالب: تغییر رنگها و تصاویر قالب با کمک فایل فتوشاپ

1- برای توسعه و تغییر قالب می توانید فایل tpl_modern01_source.zip را دریافت کنید و آنرا Unzip کنید.

2 - فایل را با کمک فتوشاپ ویرایش کنید. بعد از ویرایش فایل PSD می توانید تصاویر را با روش save for web خروجی بگیرید.

3- به بخش تنظیمات قالب مدرن وارد شوید و فایل ها را آپلود و تایید کنید تا قالب جدید ساخته شود

4- تنظیمات متون و لینک ها را از بخش تنظیمات قالب مدرن ادامه دهید و قالب را تست و بعد از نهایی شدن فعال کنید.

تصاویر اصلی بخش فارسی

تصویر لوگوی اصلی برای سمت راست هدر صفحه فارسی

header_right_fa.png - 150px * 110px

تصویر فرعی برای سمت چپ هدر صفحه فارسی

header_left_fa.png - 310px * 110px - در صورت تمایل می توانید عنوان انگلیسی یا لوگوی اضافی را هم در آن وارد کنید.

تصویر فرعی برای سمت چپ فوتر صفحه فارسی

footer_fa.png - 310px * 110px

تصویر اصلی وسط صفحه فارسی (جلد نشریه)

main_fa.png - 293px * 410px

تصاویر اصلی بخش انگلیسی

تصویر لوگوی اصلی برای سمت راست هدر صفحه انگلیسی

header_right_en.png - 150px * 110px

تصویر فرعی برای سمت چپ هدر صفحه انگلیسی

header_left_en.png - 310px * 110px - در صورت تمایل می توانید عنوان فارسی یا لوگوی اضافی را هم در آن وارد کنید.

تصویر فرعی برای سمت چپ فوتر صفحه انگلیسی

footer_en.png - 310px * 110px

تصویر اصلی وسط صفحه انگلیسی (جلد نشریه)

main_en.png - 293px * 410px

تمام مطالب تب های وسط صفحه، بلوک های حاشیه صفحه، متن روی تصویر مجله و نیز متون پایین صفحه به صورت فایل های متنی در شاخه modern01 قرار گرفته اند. شما می توانید با ویرایش متون داخل این فایل ها نسبت به ویرایش این اجزا اقدام کنید. دقت کنید که قبل از هر نوع تغییر از فایل ها backup تهیه کنید تا اگر اشکالی پیش آمد از فایل پشتیبان استفاده کنید.

معرفی فایل های مرتبط و روش توسعه و تغییر قالب

کلیه فایل های قالب در شاخه مرتبط در templates (مثل templates\tmpl_modern01 ) قرار دارند. فایل های جاوا اسکریپت، تصویر و css نیز در شاخه های مجزا به صورت زیر قرار گرفته اند:

/js/jquery.js

فایل jquery.js برنامه

/js/js_global.js

فایل js اصلی برنامه برای قالب مدرن 1

/js/js_global2.js

فایل js اصلی برنامه برای قالب مدرن 2

/js/js_local.js

فایل js قابل تغییر (می توانید آن را ویرایش کنید و کدهای لازم را در آن اضافه کنید)

/css/reset.css

فایل css reset برنامه

/css/style_global.css

فایل css عمومی برنامه که برای هر زبانی بارگذاری می شود

/css/style_fa.css

فایل css برنامه برای صفحات فارسی

/css/style_en.css

فایل css برنامه برای صفحات انگلیسی

/css/style_local.css

فایل css قابل تغییر (می توانید آن را ویرایش کنید و کدهای لازم را در آن اضافه کنید)

/font

پوشه مخصوص فونت ها - فونتهای اصلی برنامه در شاخه fonts در root پایگاه قرار گرفته اند.

/images

پوشه مخصوص تصاویر قالب

/src

پوشه مخصوص منابع اصلی مثل قالب های CSS و فایل های PSD

توجه: در صورتی که می خواهید فهرست یا چکیده مطالب، آلبوم، نظرسنجی، فهرست صفحات (منوها)، محتوای فایل ها یا هر نوع محتوای دیگری از اجزای پایگاه به صورت خودکار در میان قالب درج شوند، راهنمای استفاده از کدهای نمایش محتوا را مطالعه کنید.

در صورتی که می خواهید برای پایگاه خود قالب اختصاصی داشته باشید، می توانید ابتدا قالب مدرن را نصب کنید. سپس فایل های آن را تغییر دهید.
- فایل های تغییر یافته tpl خود را باید در شاخه قالب مدرن در زیرشاخه custom_tpls کپی کنید تا دیگر در هنگام بروزرسانی برنامه بازنویسی نشوند.
- کدهای css جدید خود را می توانید در فایل local.css در زیرشاخه css اضافه کنید. امکان تغییر سایر فایل های css نیز وجود دارد (فایل های css در بروزرسانی بازنویسی نمی شوند)
- کدهای js جدید خود را می توانید در فایل js_local.js در زیرشاخه js اضافه کنید.
- اگر غیر از تغییرات زیر، تغییر دیگری در هدر صفحات لازم بود (که معمولا نیست) از طریق بخش تنظیمات قالب می توانید کدهای لازم را در بخش head اضافه کنید.

- تصاویر قالب را می توانید در زیرشاخه images اضافه کنید. دقت کنید که فقط تصاویر ثابت قالب را در این زیرشاخه اضافه کنید و اگر تصویری مربوط به محتوای پایگاه است در شاخه ای مناسب (مثل custom_tpl_files) در بخش پوشه ها و فایل ها فراگذاری کنید تا مدیر پایگاه برای تغییر آن ها دسترسی داشته باشد.
- برای ساخت هر صفحه چند فایل tpl استفاده می شود. برای اطلاع یافتن از فایل های tpl بارگذاری شده در هر صفحه می توانید گزینه مربوطه را فعال کنید.

سفارشی کردن قالب های مدرن (طراحی قالب اختصاصی):

اگر می خواهید قالب اختصاصی برای سایت خود داشته باشید می توانید قالب مدرن یک را به صورت عمومی نصب کنید و سپس فایل های آن را ویرایش کنید. همه اجزا (CSS، JS و فایل های HTML قابل ویرایش هستند).

برای طراحی قالب اختصاصی به صورت مستقل از پایگاه می توانید فایل نمونه قالب مدرن را از اینجا دریافت کنید. دقت کنید که اگر می خواهید برای اسلایدر یا منوها همچنان از امکانات مدیریتی برنامه استفاده کنید باید آنها را مطابق css و کدهای html این نمونه تهیه کنید.

سایر دکمه ها و پیوندها

دکمه های اشتراک اطلاعات مربوط به ارایه خروجی هایی مثل RSS و XML یا پیوند به شبکه های اجتماعی می باشند. البته خودتان هم می توانید دکمه های این بخش را با کمک ابزار تولید HTML تغییر دهید. دقت کنید که باید به جای علامت # نشانی مورد نظر خود را (با درج http:// در ابتدا ) جایگزین کنید.

برخی موارد قابل استفاده برای دکمه های اشتراک اطلاعات بالای صفحه فارسی:

برخی موارد قابل استفاده برای دکمه های اشتراک اطلاعات بالای صفحه انگلیسی:

راهنمای سفارشی سازی قالب ها در قالب های مدرن:

برای شناسایی فایل های tpl لود شده ابزاری در بخش تنظیمات قالب های مدرن تعبیه شده است.

توسعه و ویرایش قالب + سفارشی کردن قالب برای زیربخش ها، صفحات و زبان مورد نظر (جمعی)

نمایش tpl های استفاده شده توسط برنامه

با فعال کردن آن قالب مشخص می شود:

[ فایل قالب این بخش : person_view.tpl - /opt/lampp/htdocs/templates/tmpl_modern01/person_view.tpl ]

سپس می توانید این قالب را دانلود کنید:

پوشه اصلی قالب و فایل های tpl پیش فرض

و پس از ویرایش در پوشه زیر آپلود کنید:

فایل های tpl سفارشی

Email : yektaweb (AT) gmail.com

Academic Web Tools - Yektaweb CMS - مجموعه مدیریت یکپارچه پایگاه‌های اینترنتی