להכליל קבצי JavaScript ו-CSS פרטיים במערכת ה-CMS של bluetronix

דרישות ומטרה

למדריך זה אתה זקוק לגישה למפתח ל-CMS של bluetronix ועליך להכיר את מבנה הפריסות ותיקיות המפתח. תלמד לשלב קבצים אישיים של JavaScript ו-CSS בנוסף לקבצי ה-CMS הקיימים, מבלי לשנות את קבצי המערכת המקוריים.

אנחנו משתמשים בקבצים המוצגים בצילומי המסך BxHeadScript_own.js ו-BxStyle_own.css. שני הקבצים משולבים במפורש בפריסה, כך שה-CMS יתחשב בהם בעת загрузка האתר.

1. פתח את העיצוב

פתח ב-CMS את התחום פריסה ובחר פריסה - HTML. לאחר מכן פתח את הפריסה שבה אתה מעוניין לשלב את הקבצים של JavaScript ו-CSS שלך. בדוגמה זו אנו משתמשים בפריסת ברירת המחדל.

בהגדרת הפריסה תמצא כבר שילובים עבור קבצי ה-CMS המרכזיים, לדוגמה BxHeadScript.js ו-BxStyle.css. ניתן לרשום קבצים אישיים נוספים ישירות לידם.

2. צור קובץ JavaScript פרטי במנהל הקבצים

פתח את מנהל הקבצים ומעבר לתיקיית המערכת המסומנת באדום bx_script. שם תמצא את קבצי ה-JavaScript המרכזיים של ה-CMS של bluetronix וככל הנראה גם גרסאות תלויות שפה.

צור שם את הקובץ האישי BxHeadScript_own.js או בחר אותו אם הוא כבר קיים. תוכל לשכפל קובץ קיים מתאים כבסיס.

בחר עריכה כדי לפתוח את קוד ה-JavaScript של הקובץ שלך בעורך הטקסט.

בדוגמה המוצגת הקובץ מכיל קוד JavaScript אישי לבחירה בין מצב כהה למצב בהיר. בעורך הטקסט תוכל לתחזק את קוד ה-JavaScript הספציפי לפרויקט שלך ולשמור אותו לאחר מכן.

אל תשנה את BxHeadScript.js המקורי עבור הרחבות אישיות. קבצים בתוך תיקיות bx_-מערכת עשויים להיכחד בעדכוני CMS. סמן קבצים אישיים שם עם _own.

3. הכלל קובץ JavaScript פרטי בעיצוב

חזור לפריסה - HTML. הוסף את קובץ ה-JavaScript האישי שלך בנוסף לקובץ ה-CMS הקיים. אם אתה רוצה שהסקריפט שלך ייטען מוקדם, הוסף אותו כפי שמוצג בצילום המסך באזור head אחר הסקריפט הראשי הקיים.

<script src="__FV_/bx_script/BxHeadScript_own_min.js__"></script>
<script src="__FV_/bx_script/BxHeadScript_own.js__"></script>

השורה הנוספת טוענת את קוד ה-JavaScript האישי שלך. קובץ BxHeadScript.js המקורי נשאר ללא שינוי. נתיב הקובץ וכתיב הקובץ האישי חייבים להתאים לקובץ במנהל הקבצים.

4. צור קובץ CSS פרטי במנהל הקבצים

פתח במנהל הקבצים את תיקיית המערכת bx_style. כאן נמצא בין היתר הגרסת הסגנון המרכזית BxStyle.css. עבור התאמות אישיות נשתמש בקובץ נפרד בשם BxStyle_own.css.

צור את הקובץ BxStyle_own.css או פתח את הקובץ האישי הקיים. הקובץ של המערכת BxStyle.css נשאר במקומו.

באמצעות עריכה תוכל להוסיף ולקבוע כללי CSS אישיים לקובץ הזה ולשמור.

5. הכלל קובץ CSS פרטי בעיצוב

פתח שוב את פריסה - HTML. באזור head הוסף את קובץ ה-CSS האישי שלך לאחר קובץ הסגנון הקיים. הסדר חשוב אם אתה רוצה שהחוקים האישיים ילחצו על העיצוב הסטנדרטי.

<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own_min.css__">
<link rel="stylesheet" href="__FV_/bx_style/BxStyle_own.css__">

קובץ ה-CSS הסטנדרטי נשאר קיים, בעוד שאתה מנהל התאמות או עיצובים שונים בנפרד בBxStyle_own.css.

6. השתמש ב-JavaScript בכותרת או בסוף העמוד

קבצי JavaScript יכולים להיות משולבים בהתאם לתפקידם באזור head או בסוף העמוד לפני תג body הסוגר. קובץ BxHeadScript_own.js המוצג נטען ב-Head. עבור סקריפטים אחרים תוכל גם להשתמש בתיקיית פרויקט משלו ולשלב את הקובץ מאוחר יותר בפריסה.

דוגמה לקובץ נוסף מתוך תיקיה אישית בסוף העמוד:

<script src="__FV_/bx_script/BxScript_own_min.js__"></script>
<script src="__FV_/script/MyScript.js__"></script>

דוגמה זו מציגה קובץ נוסף. אם אתה רוצה במקום זאת להחליף קובץ מערכת בגרסה אישית, עליך להתאים את השילובים המתאימים בפריסה שנבחרה ולוודא שאין פונקציות CMS דרושות שאבדות.

7. הבחנה בין תיקיות מערכת לתיקיות פרויקט אישיות

התיקיות המסומנות באדום bx_ שייכות ל-CMS של bluetronix. קבצים אישיים בתוך תיקיות אלו חייבים להיות מסומנים עם _own כדי שלא יתנהגו כמו קבצי המערכת בעדכוני CMS רגילים.

תוכל לאחסן קבצי JavaScript ו-CSS אישיים גם בתיקיות פרויקט שהקמת ללא קידומת bx_, לדוגמה /script/ או /my_scripts/. שם אין חובה לסימון _own. יש להשתמש בנתיב האמיתי בפריסתך.

הסימון _own לא מחליף את השילוב בפריסה: קובץ שנמצא בנפרד ייטען רק כאשר הוא משולב בשורה המתאימה של script או link.

8. גרסה אוטומטית של קבצים

בהחדרות העיצוב המוצגות, מערכת bluetronix CMS משתמשת בתו __FV_…__. כך המערכת יכולה להוסיף פרמטר גרסה לפי תאריך השינוי. לאחר שינוי, הדפדפן טוען את קובץ ה-JavaScript או CSS העדכני במקום להמשיך להשתמש בגרסה הישנה ששמורה במטמון.

דוגמה: נתיב מקורי כמו /script/MyScript.js יכול להתווסף לאחר העיבוד עם פרמטר גרסה. אינך צריך לעדכן את מספר הגרסה בקבצים המיובאים בכל עיצוב.

9. שמירה ובדיקת שינויים

שמור קודם כל את קובצי ה-JavaScript וה-CSS שלך ולאחר מכן את העיצוב שנערך. טען מחדש את האתר שלך וודא שהפונקציות של JavaScript שלך פועלות וכללי ה-CSS שלך מיושמים.

אם קובץ לא נטען, בדוק קודם כל את שם הקובץ, את האותיות הגדולות והקטנות, את נתיב התיקיה ואת החיבור בעיצוב. אם ישנם מספר קשרים, ודא גם שערכת את העיצוב שנש Assigned לעמוד המתאים.

סיכום

לשיפורים אישיים, צור לדוגמה BxHeadScript_own.js בתיקיית bx_script וBxStyle_own.css בתיקיית bx_style. לאחר מכן חבר את שני הקבצים בעיצוב Layout - HTML בנוסף לקבצי ה-CMS המקוריים. כך הקבצים הסטנדרטיים נשמרים ללא שינוי, בעוד שאתה מנהל בנפרד קוד JavaScript ו-CSS ספציפי לפרויקט.