[{"data":1,"prerenderedAt":1110},["ShallowReactive",2],{"article-\u002Farticles\u002F672092be1b1845a7036f7818":3},{"id":4,"title":5,"articleId":6,"body":7,"cover":1091,"coverThumb":1092,"created":1093,"date":1094,"description":1095,"extension":1096,"meta":1097,"navigation":496,"path":1098,"seo":1099,"stem":1100,"tags":1101,"updated":1108,"__hash__":1109},"articles\u002Farticles\u002F672092be1b1845a7036f7818.md","تهيئة التطبيق: اللغة العربية، والخطوط، والألوان | جـ2","672092be1b1845a7036f7818",{"type":8,"value":9,"toc":1086},"minimark",[10,14,26,37,45,124,132,143,149,152,155,160,242,265,275,304,311,319,332,335,460,467,558,565,598,601,606,609,615,618,621,629,632,656,659,670,673,679,768,775,778,794,797,803,806,809,812,820,826,957,963,1050,1060,1063,1066,1069,1072,1080,1083],[11,12,13],"p",{},"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،",[15,16,17],"blockquote",{},[11,18,19,20,25],{},"لمواصلة التعلم والاطلاع على المقالات السابقة ضمن هذه السلسلة، يمكنك الوصول إلى المقال السابق (",[21,22,24],"a",{"href":23},"\u002Farticles\u002F65bf3d8f789ae522f33e3fd2\u002F","تجهيز وتنصيب بيئة العمل",")، حيث سيساعدك في إكمال الصورة وتطبيق المفاهيم بشكل متكامل.",[11,27,28,29,36],{},"في هذا الجزء من ",[21,30,32],{"href":31},"\u002Farticles\u002F65bf4be1789ae522f33e4069\u002F",[33,34,35],"strong",{},"السلسلة الكاملة لتعلم بناء التطبيقات","، سنبدأ بإزالة الشاشة الترحيبية الافتراضية في Nuxt واستبدالها بمحتوى مخصص.",[11,38,39,40,44],{},"افتح الملف ",[41,42,43],"code",{},"app.vue"," وقم بتعديل الكود ليكون بالشكل التالي:",[46,47,52],"pre",{"className":48,"code":49,"language":50,"meta":51,"style":51},"language-html shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- \u003CNuxtWelcome \u002F> -->\n     \u003Ch2>مرحبا بالعالم !\u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","html","",[41,53,54,70,81,88,104,114],{"__ignoreMap":51},[55,56,59,63,67],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"s95oV","\u003C",[55,64,66],{"class":65},"s4JwU","template",[55,68,69],{"class":61},">\n",[55,71,73,76,79],{"class":57,"line":72},2,[55,74,75],{"class":61},"  \u003C",[55,77,78],{"class":65},"div",[55,80,69],{"class":61},[55,82,84],{"class":57,"line":83},3,[55,85,87],{"class":86},"sAwPA","    \u003C!-- \u003CNuxtWelcome \u002F> -->\n",[55,89,91,94,97,100,102],{"class":57,"line":90},4,[55,92,93],{"class":61},"     \u003C",[55,95,96],{"class":65},"h2",[55,98,99],{"class":61},">مرحبا بالعالم !\u003C\u002F",[55,101,96],{"class":65},[55,103,69],{"class":61},[55,105,107,110,112],{"class":57,"line":106},5,[55,108,109],{"class":61},"  \u003C\u002F",[55,111,78],{"class":65},[55,113,69],{"class":61},[55,115,117,120,122],{"class":57,"line":116},6,[55,118,119],{"class":61},"\u003C\u002F",[55,121,66],{"class":65},[55,123,69],{"class":61},[11,125,126,127,131],{},"بعد الحفظ، ستظهر الرسالة \"",[128,129,130],"em",{},"مرحبا بالعالم!","\" بدلاً من الشاشة الترحيبية.",[11,133,134,135,138,139,142],{},"يُفضل دائما تفعيل خيار الحفظ التلقائي في VS Code لتوفير الوقت من خلال قائمة ",[41,136,137],{},"File"," واختيار ",[41,140,141],{},"Auto Save",".",[96,144,146],{"id":145},"دعم-اللغة-العربية",[33,147,148],{},"دعم اللغة العربية",[11,150,151],{},"يعتمد دعم اللغة العربية في صفحات الويب على ضبط اتجاه النص (RTL) ليصبح من اليمين إلى اليسار، هذا الإعداد مهم لعرض النصوص العربية بشكل صحيح في المتصفحات والأجهزة المختلفة.",[11,153,154],{},"أيضا يجب الانتباه لتنسيق العناصر مثل القوائم والصور، بحيث تتماشى مع تجربة المستخدم العربي وتجعل الواجهة مُتَّسقة وسهلة القراءة.",[11,156,157,158],{},"ولضبط اتجاه النص في التطبيق بشكل عام، نقوم باضافة الكود التالي لملف ",[41,159,43],{},[46,161,163],{"className":48,"code":162,"language":50,"meta":51,"style":51},"\u003Cscript lang=\"ts\" setup>\nuseHead({\n  htmlAttrs: {\n    lang: 'ar',\n    dir: 'rtl',\n  },\n});\n\u003C\u002Fscript>\n",[41,164,165,188,196,201,212,222,227,233],{"__ignoreMap":51},[55,166,167,169,172,176,179,183,186],{"class":57,"line":58},[55,168,62],{"class":61},[55,170,171],{"class":65},"script",[55,173,175],{"class":174},"svObZ"," lang",[55,177,178],{"class":61},"=",[55,180,182],{"class":181},"sU2Wk","\"ts\"",[55,184,185],{"class":174}," setup",[55,187,69],{"class":61},[55,189,190,193],{"class":57,"line":72},[55,191,192],{"class":174},"useHead",[55,194,195],{"class":61},"({\n",[55,197,198],{"class":57,"line":83},[55,199,200],{"class":61},"  htmlAttrs: {\n",[55,202,203,206,209],{"class":57,"line":90},[55,204,205],{"class":61},"    lang: ",[55,207,208],{"class":181},"'ar'",[55,210,211],{"class":61},",\n",[55,213,214,217,220],{"class":57,"line":106},[55,215,216],{"class":61},"    dir: ",[55,218,219],{"class":181},"'rtl'",[55,221,211],{"class":61},[55,223,224],{"class":57,"line":116},[55,225,226],{"class":61},"  },\n",[55,228,230],{"class":57,"line":229},7,[55,231,232],{"class":61},"});\n",[55,234,236,238,240],{"class":57,"line":235},8,[55,237,119],{"class":61},[55,239,171],{"class":65},[55,241,69],{"class":61},[11,243,244,245,248,249,252,253,256,257,260,261,264],{},"وظيفة الكود السابق التعديل على وسم ",[41,246,247],{},"HTML"," الرئيسي في التطبيق وجعل اللغة المستخدمة ",[41,250,251],{},"lang"," هى العربية ",[41,254,255],{},"ar","، واتجاه النص ",[41,258,259],{},"dir"," من اليمين إلى اليسار ",[41,262,263],{},"rtl"," وهى اختصار right to left.",[11,266,267,268,271,272,274],{},"للتأكد من هذا التغيير في المتصفح - إذا كنت تستخدم جوجل كروم مثلا - اضغط الاختصار ",[41,269,270],{},"ctrl + u"," وستلاحظ تغير وسم ",[41,273,247],{}," في أعلى الصفحة ليصبح مشابه للشكل التالي",[46,276,278],{"className":48,"code":277,"language":50,"meta":51,"style":51},"\u003Chtml  lang=\"ar\" dir=\"rtl\">\n",[41,279,280],{"__ignoreMap":51},[55,281,282,284,286,289,291,294,297,299,302],{"class":57,"line":58},[55,283,62],{"class":61},[55,285,50],{"class":65},[55,287,288],{"class":174},"  lang",[55,290,178],{"class":61},[55,292,293],{"class":181},"\"ar\"",[55,295,296],{"class":174}," dir",[55,298,178],{"class":61},[55,300,301],{"class":181},"\"rtl\"",[55,303,69],{"class":61},[11,305,306,307,310],{},"لاحظ عند معاينة المتصفح أن النص (",[128,308,309],{},"مرحبا بالعالم !",") أصبح على يمين الشاشة.",[11,312,313,314,318],{},"قبل تكملة الجزء التالي، يرجى الإطلاع على المقال (",[21,315,317],{"href":316},"\u002Farticles\u002F66e56f82bb18f0ae332df6a5\u002F","أنسب مكتبة UI يمكنك استخدامها مع Nuxt",") وتحديدا الجزء الخاص بشرح تنصيب \"Vuetify\" مع \"Nuxt\".",[11,320,321,322,331],{},"بعد تثبيت Vuetify، يمكنك تخصيص واجهة التطبيق بإنشاء شريط علوي (",[21,323,330],{"href":324,"rel":325,"target":329},"https:\u002F\u002Fvuetifyjs.com\u002Fen\u002Fcomponents\u002Fapp-bars\u002F#app-bars",[326,327,328],"nofollow","noopener","noreferrer","_blank","app bar",").",[11,333,334],{},"قم بتحديث ملف app.vue ليصبح بالشكل التالي:",[46,336,338],{"className":48,"code":337,"language":50,"meta":51,"style":51},"\u003Ctemplate>\n  \u003Cv-layout>\n    \u003Cv-app-bar :elevation=\"2\">\n      \u003Cv-app-bar-title>تطبيق المنتجات\u003C\u002Fv-app-bar-title>\n      \u003Ctemplate v-slot:append>\n        \u003Cv-btn icon=\"mdi-dots-vertical\">\u003C\u002Fv-btn>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fv-app-bar>\n  \u003C\u002Fv-layout>\n\u003C\u002Ftemplate>\n",[41,339,340,348,357,375,390,401,424,433,442,451],{"__ignoreMap":51},[55,341,342,344,346],{"class":57,"line":58},[55,343,62],{"class":61},[55,345,66],{"class":65},[55,347,69],{"class":61},[55,349,350,352,355],{"class":57,"line":72},[55,351,75],{"class":61},[55,353,354],{"class":65},"v-layout",[55,356,69],{"class":61},[55,358,359,362,365,368,370,373],{"class":57,"line":83},[55,360,361],{"class":61},"    \u003C",[55,363,364],{"class":65},"v-app-bar",[55,366,367],{"class":174}," :elevation",[55,369,178],{"class":61},[55,371,372],{"class":181},"\"2\"",[55,374,69],{"class":61},[55,376,377,380,383,386,388],{"class":57,"line":90},[55,378,379],{"class":61},"      \u003C",[55,381,382],{"class":65},"v-app-bar-title",[55,384,385],{"class":61},">تطبيق المنتجات\u003C\u002F",[55,387,382],{"class":65},[55,389,69],{"class":61},[55,391,392,394,396,399],{"class":57,"line":106},[55,393,379],{"class":61},[55,395,66],{"class":65},[55,397,398],{"class":174}," v-slot:append",[55,400,69],{"class":61},[55,402,403,406,409,412,414,417,420,422],{"class":57,"line":116},[55,404,405],{"class":61},"        \u003C",[55,407,408],{"class":65},"v-btn",[55,410,411],{"class":174}," icon",[55,413,178],{"class":61},[55,415,416],{"class":181},"\"mdi-dots-vertical\"",[55,418,419],{"class":61},">\u003C\u002F",[55,421,408],{"class":65},[55,423,69],{"class":61},[55,425,426,429,431],{"class":57,"line":229},[55,427,428],{"class":61},"      \u003C\u002F",[55,430,66],{"class":65},[55,432,69],{"class":61},[55,434,435,438,440],{"class":57,"line":235},[55,436,437],{"class":61},"    \u003C\u002F",[55,439,364],{"class":65},[55,441,69],{"class":61},[55,443,445,447,449],{"class":57,"line":444},9,[55,446,109],{"class":61},[55,448,354],{"class":65},[55,450,69],{"class":61},[55,452,454,456,458],{"class":57,"line":453},10,[55,455,119],{"class":61},[55,457,66],{"class":65},[55,459,69],{"class":61},[11,461,462,463,466],{},"لتأكيد دعم Vuetify للغة العربية، أنشئ ملف ",[41,464,465],{},"vuetify.config.ts"," وأضف الإعدادات التالية:",[46,468,472],{"className":469,"code":470,"language":471,"meta":51,"style":51},"language-typescript shiki shiki-themes github-dark","import { defineVuetifyConfiguration } from 'vuetify-nuxt-module\u002Fcustom-configuration';\n\nexport default defineVuetifyConfiguration({\n  locale: {\n    locale: 'ar',\n    fallback: 'en',\n  },\n  localeMessages: ['ar', 'en'],\n});\n","typescript",[41,473,474,492,498,511,516,525,535,539,554],{"__ignoreMap":51},[55,475,476,480,483,486,489],{"class":57,"line":58},[55,477,479],{"class":478},"snl16","import",[55,481,482],{"class":61}," { defineVuetifyConfiguration } ",[55,484,485],{"class":478},"from",[55,487,488],{"class":181}," 'vuetify-nuxt-module\u002Fcustom-configuration'",[55,490,491],{"class":61},";\n",[55,493,494],{"class":57,"line":72},[55,495,497],{"emptyLinePlaceholder":496},true,"\n",[55,499,500,503,506,509],{"class":57,"line":83},[55,501,502],{"class":478},"export",[55,504,505],{"class":478}," default",[55,507,508],{"class":174}," defineVuetifyConfiguration",[55,510,195],{"class":61},[55,512,513],{"class":57,"line":90},[55,514,515],{"class":61},"  locale: {\n",[55,517,518,521,523],{"class":57,"line":106},[55,519,520],{"class":61},"    locale: ",[55,522,208],{"class":181},[55,524,211],{"class":61},[55,526,527,530,533],{"class":57,"line":116},[55,528,529],{"class":61},"    fallback: ",[55,531,532],{"class":181},"'en'",[55,534,211],{"class":61},[55,536,537],{"class":57,"line":229},[55,538,226],{"class":61},[55,540,541,544,546,549,551],{"class":57,"line":235},[55,542,543],{"class":61},"  localeMessages: [",[55,545,208],{"class":181},[55,547,548],{"class":61},", ",[55,550,532],{"class":181},[55,552,553],{"class":61},"],\n",[55,555,556],{"class":57,"line":444},[55,557,232],{"class":61},[11,559,560,561,564],{},"ثم في ",[41,562,563],{},"nuxt.config.ts","، اضبط إعدادات Vuetify على النحو التالي:",[46,566,570],{"className":567,"code":568,"language":569,"meta":51,"style":51},"language-javascript shiki shiki-themes github-dark","vuetify: {\n    vuetifyOptions: '.\u002Fvuetify.config.ts',\n},\n","javascript",[41,571,572,580,593],{"__ignoreMap":51},[55,573,574,577],{"class":57,"line":58},[55,575,576],{"class":174},"vuetify",[55,578,579],{"class":61},": {\n",[55,581,582,585,588,591],{"class":57,"line":72},[55,583,584],{"class":174},"    vuetifyOptions",[55,586,587],{"class":61},": ",[55,589,590],{"class":181},"'.\u002Fvuetify.config.ts'",[55,592,211],{"class":61},[55,594,595],{"class":57,"line":83},[55,596,597],{"class":61},"},\n",[11,599,600],{},"عند معاينة التطبيق، ستظهر النصوص والواجهة في الاتجاه الصحيح (من اليمين إلى اليسار) بفضل الإعدادات الجديدة.",[96,602,604],{"id":603},"الخطوط",[33,605,603],{},[11,607,608],{},"لأجل تصميم واجهة متميزة ومتناسقة، يلعب اختيار الخطوط دورًا أساسيًا في تحسين تجربة المستخدم وإضافة لمسة جمالية تعكس هوية التطبيق.",[11,610,611],{},[612,613],"img",{"alt":51,"src":614},"\u002Fimages\u002F67337ca24e9c5b5b41766fc7.webp",[11,616,617],{},"في التطبيقات التي تدعم اللغة العربية، يجب اختيار خطوط تدعم الأحرف العربية بشكل مثالي وتتيح عرضها بوضوح واتجاه صحيح، مما يساعد في تحسين تجربة المستخدم وضمان تفاعله مع التطبيق بسلاسة وراحة.",[11,619,620],{},"بالنسبة للعناوين، أفضّل استخدام الخطوط Noto Kufi Arabic أو Cairo لتميزها بالأناقة والوضوح. أما للفقرات، فإنني أرى أن Noto Naskh Arabic هو الأنسب لإضفاء سلاسة على النصوص الطويلة ودعم القراءة المتواصلة.",[11,622,623,624,142],{},"هذه الخطوط متوفرة بشكل مجاني ضمن ",[21,625,628],{"href":626,"rel":627,"target":329},"https:\u002F\u002Ffonts.google.com",[326,327,328],"خطوط جوجل",[11,630,631],{},"لاستخدام الخطوط السابقة فقط اكتب الأمر التالي",[46,633,637],{"className":634,"code":635,"language":636,"meta":51,"style":51},"language-bash shiki shiki-themes github-dark","npx nuxi@latest module add fonts\n","bash",[41,638,639],{"__ignoreMap":51},[55,640,641,644,647,650,653],{"class":57,"line":58},[55,642,643],{"class":174},"npx",[55,645,646],{"class":181}," nuxi@latest",[55,648,649],{"class":181}," module",[55,651,652],{"class":181}," add",[55,654,655],{"class":181}," fonts\n",[11,657,658],{},"يستخدم الأمر السابق لتثبيت موديول nuxt\u002Ffonts في التطبيق، مما يُتيح لك دمج إدارة الخطوط بسهولة.",[11,660,661,662,669],{},"يقدم ",[21,663,666],{"href":664,"rel":665,"target":329},"https:\u002F\u002Ffonts.nuxt.com",[326,327,328],[33,667,668],{},"موديول nuxt\u002Ffonts"," تجربة سلسة بدون إعدادات مسبقة، حيث يدعم مزودات خطوط جاهزة مثل Google و Adobe، مع إمكانية إضافة مزودات مخصصة للمزيد من التحكم.",[11,671,672],{},"يدعم أيضًا تنزيل الخطوط للاستخدام المحلي (local)، وتخزين مؤقت للخطوط أثناء بناء وتطوير التطبيق، مما يسهم في تسريع عملية التحميل وتعزيز الكفاءة.",[11,674,675,676,678],{},"يمكنك تغيير الخط في التطبيق لجميع النصوص في الصفحة، قم بتعديل ملف ",[41,677,43],{}," واضف الكود التالي في نهاية الملف",[46,680,682],{"className":48,"code":681,"language":50,"meta":51,"style":51},"\u003Cstyle>\nbody {\n  font-family: 'Cairo', sans-serif;\n  font-optical-sizing: auto;\n  font-weight: 400;\n  font-style: normal;\n}\n\u003C\u002Fstyle>\n",[41,683,684,693,701,719,731,743,755,760],{"__ignoreMap":51},[55,685,686,688,691],{"class":57,"line":58},[55,687,62],{"class":61},[55,689,690],{"class":65},"style",[55,692,69],{"class":61},[55,694,695,698],{"class":57,"line":72},[55,696,697],{"class":65},"body",[55,699,700],{"class":61}," {\n",[55,702,703,707,709,712,714,717],{"class":57,"line":83},[55,704,706],{"class":705},"sDLfK","  font-family",[55,708,587],{"class":61},[55,710,711],{"class":181},"'Cairo'",[55,713,548],{"class":61},[55,715,716],{"class":705},"sans-serif",[55,718,491],{"class":61},[55,720,721,724,726,729],{"class":57,"line":90},[55,722,723],{"class":705},"  font-optical-sizing",[55,725,587],{"class":61},[55,727,728],{"class":705},"auto",[55,730,491],{"class":61},[55,732,733,736,738,741],{"class":57,"line":106},[55,734,735],{"class":705},"  font-weight",[55,737,587],{"class":61},[55,739,740],{"class":705},"400",[55,742,491],{"class":61},[55,744,745,748,750,753],{"class":57,"line":116},[55,746,747],{"class":705},"  font-style",[55,749,587],{"class":61},[55,751,752],{"class":705},"normal",[55,754,491],{"class":61},[55,756,757],{"class":57,"line":229},[55,758,759],{"class":61},"}\n",[55,761,762,764,766],{"class":57,"line":235},[55,763,119],{"class":61},[55,765,690],{"class":65},[55,767,69],{"class":61},[11,769,770,771,774],{},"لاحظ تغيير الخط لكلمة \"",[128,772,773],{},"تطبيق المنتجات","\" في الشريط العلوي، إلى الخط Cairo.",[11,776,777],{},"قد تحتاج عند هذه الخطوة، عمل تشغيل جديد للتطبيق من الأمر",[46,779,781],{"className":634,"code":780,"language":636,"meta":51,"style":51},"npm run dev\n",[41,782,783],{"__ignoreMap":51},[55,784,785,788,791],{"class":57,"line":58},[55,786,787],{"class":174},"npm",[55,789,790],{"class":181}," run",[55,792,793],{"class":181}," dev\n",[11,795,796],{},"وبشكل عام، يفضل دائما إعادة تشغيل التطبيق عند اضافة موديول أو حزمة (Package) جديدة.",[96,798,800],{"id":799},"اختيار-الألوان",[33,801,802],{},"اختيار الألوان",[11,804,805],{},"عند تصميم واجهات التطبيقات، تلعب الألوان دورًا محوريًا في تعزيز تجربة المستخدم وإضفاء الطابع المناسب على التصميم.",[11,807,808],{},"يعتبر Vuetify إطار عمل متكامل يقدم للمطورين مكتبة واسعة من المكونات والأدوات المرنة لأجل تصميم واجهات مميزة وقابلة للتخصيص، كما يتيح إدارة الألوان بشكل سهل وفعال، مما يسمح بتحديد ألوان رئيسية وثانوية تتماشى مع هوية التطبيق وتعكس طابعه.",[11,810,811],{},"ما يميز Vuetify أنه مبني على نظام Google Material Design، حيث يستند إلى مكتبة ألوان معتمدة تضمن تناسق الألوان وسهولة الاستخدام، مما يجعل تجربة التصميم أكثر تناغمًا واستجابة لمعايير التصميم الحديث.",[11,813,814,815,819],{},"يمكنك معرفة المزيد عن Google Material Design من خلال مقالي السابق (",[21,816,818],{"href":817},"\u002Farticles\u002F6604b21ee77dd47e3816678c\u002F","التصميم المادي … المزايا والعيوب",")",[11,821,822,823,825],{},"لتغيير اللون الرئيسي في التطبيق قم بتعديل ملف ",[41,824,465],{}," السابق ليصبح بالشكل التالي",[46,827,829],{"className":469,"code":828,"language":471,"meta":51,"style":51},"import { defineVuetifyConfiguration } from 'vuetify-nuxt-module\u002Fcustom-configuration';\n\nexport default defineVuetifyConfiguration({\n  theme: {\n    themes: {\n      light: {\n        colors: {\n          primary: '#1A237E', \u002F\u002F primary color\n        },\n      },\n    },\n  },\n  locale: {\n    locale: 'ar',\n    fallback: 'en',\n  },\n  localeMessages: ['ar', 'en'],\n});\n",[41,830,831,843,847,857,862,867,872,877,890,895,900,906,911,916,925,934,939,952],{"__ignoreMap":51},[55,832,833,835,837,839,841],{"class":57,"line":58},[55,834,479],{"class":478},[55,836,482],{"class":61},[55,838,485],{"class":478},[55,840,488],{"class":181},[55,842,491],{"class":61},[55,844,845],{"class":57,"line":72},[55,846,497],{"emptyLinePlaceholder":496},[55,848,849,851,853,855],{"class":57,"line":83},[55,850,502],{"class":478},[55,852,505],{"class":478},[55,854,508],{"class":174},[55,856,195],{"class":61},[55,858,859],{"class":57,"line":90},[55,860,861],{"class":61},"  theme: {\n",[55,863,864],{"class":57,"line":106},[55,865,866],{"class":61},"    themes: {\n",[55,868,869],{"class":57,"line":116},[55,870,871],{"class":61},"      light: {\n",[55,873,874],{"class":57,"line":229},[55,875,876],{"class":61},"        colors: {\n",[55,878,879,882,885,887],{"class":57,"line":235},[55,880,881],{"class":61},"          primary: ",[55,883,884],{"class":181},"'#1A237E'",[55,886,548],{"class":61},[55,888,889],{"class":86},"\u002F\u002F primary color\n",[55,891,892],{"class":57,"line":444},[55,893,894],{"class":61},"        },\n",[55,896,897],{"class":57,"line":453},[55,898,899],{"class":61},"      },\n",[55,901,903],{"class":57,"line":902},11,[55,904,905],{"class":61},"    },\n",[55,907,909],{"class":57,"line":908},12,[55,910,226],{"class":61},[55,912,914],{"class":57,"line":913},13,[55,915,515],{"class":61},[55,917,919,921,923],{"class":57,"line":918},14,[55,920,520],{"class":61},[55,922,208],{"class":181},[55,924,211],{"class":61},[55,926,928,930,932],{"class":57,"line":927},15,[55,929,529],{"class":61},[55,931,532],{"class":181},[55,933,211],{"class":61},[55,935,937],{"class":57,"line":936},16,[55,938,226],{"class":61},[55,940,942,944,946,948,950],{"class":57,"line":941},17,[55,943,543],{"class":61},[55,945,208],{"class":181},[55,947,548],{"class":61},[55,949,532],{"class":181},[55,951,553],{"class":61},[55,953,955],{"class":57,"line":954},18,[55,956,232],{"class":61},[11,958,959,960,962],{},"ثم قم بتعديل كود الشريط العلوي في ملف ",[41,961,43],{}," ليصبح بالشكل التالي",[46,964,966],{"className":48,"code":965,"language":50,"meta":51,"style":51},"\u003Cv-app-bar :elevation=\"2\" color=\"primary\"> \u003C!-- add color prop -->\n      \u003Cv-app-bar-title>تطبيق المنتجات\u003C\u002Fv-app-bar-title>\n      \u003Ctemplate v-slot:append>\n        \u003Cv-btn icon=\"mdi-dots-vertical\">\u003C\u002Fv-btn>\n      \u003C\u002Ftemplate>\n\u003C\u002Fv-app-bar>\n",[41,967,968,994,1006,1016,1034,1042],{"__ignoreMap":51},[55,969,970,972,974,976,978,980,983,985,988,991],{"class":57,"line":58},[55,971,62],{"class":61},[55,973,364],{"class":65},[55,975,367],{"class":174},[55,977,178],{"class":61},[55,979,372],{"class":181},[55,981,982],{"class":174}," color",[55,984,178],{"class":61},[55,986,987],{"class":181},"\"primary\"",[55,989,990],{"class":61},"> ",[55,992,993],{"class":86},"\u003C!-- add color prop -->\n",[55,995,996,998,1000,1002,1004],{"class":57,"line":72},[55,997,379],{"class":61},[55,999,382],{"class":65},[55,1001,385],{"class":61},[55,1003,382],{"class":65},[55,1005,69],{"class":61},[55,1007,1008,1010,1012,1014],{"class":57,"line":83},[55,1009,379],{"class":61},[55,1011,66],{"class":65},[55,1013,398],{"class":174},[55,1015,69],{"class":61},[55,1017,1018,1020,1022,1024,1026,1028,1030,1032],{"class":57,"line":90},[55,1019,405],{"class":61},[55,1021,408],{"class":65},[55,1023,411],{"class":174},[55,1025,178],{"class":61},[55,1027,416],{"class":181},[55,1029,419],{"class":61},[55,1031,408],{"class":65},[55,1033,69],{"class":61},[55,1035,1036,1038,1040],{"class":57,"line":106},[55,1037,428],{"class":61},[55,1039,66],{"class":65},[55,1041,69],{"class":61},[55,1043,1044,1046,1048],{"class":57,"line":116},[55,1045,119],{"class":61},[55,1047,364],{"class":65},[55,1049,69],{"class":61},[11,1051,1052,1053,1056,1057],{},"لاحظ إضافة ",[41,1054,1055],{},"color"," بقيمة ",[41,1058,1059],{},"primary",[11,1061,1062],{},"يفترض أن يتحول الشريط العلوي إلى اللون الأزرق في التطبيق.",[11,1064,1065],{},"وهكذا نكون قد غطينا الأساسيات التي ستساعدك في إنشاء تطبيق احترافي يدعم اللغة العربية، مع استخدام خطوط مميزة وألوان تتماشى مع هوية التطبيق.",[11,1067,1068],{},"في المقالات القادمة - بإذن الله، نستكشف المزيد حول تخصيص المكونات واستخدام مكتبة Vuetify لإنشاء واجهات تفاعلية وأكثر احترافية، مما يجعل رحلتك في بناء التطبيقات ممتعة وغنية بالتفاصيل العملية.",[11,1070,1071],{},"تابع السلسلة لاستكمال رحلتك نحو بناء تطبيق متكامل من الصفر!",[11,1073,1074,1075,142],{},"بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر ",[21,1076,1079],{"href":1077,"rel":1078,"target":329},"https:\u002F\u002Fgithub.com\u002Framyahm2010\u002Fproducts-app",[326,327,328],"رابط المشروع هنا",[11,1081,1082],{},"وفقنى الله وإياك إلى ما يحبه ويرضاه ،،",[690,1084,1085],{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":51,"searchDepth":72,"depth":83,"links":1087},[1088,1089,1090],{"id":145,"depth":72,"text":148},{"id":603,"depth":72,"text":603},{"id":799,"depth":72,"text":802},"\u002Fimages\u002F67337c744e9c5b5b41766f9d.webp","\u002Fimages\u002F67337c744e9c5b5b41766f9d_thumb.webp","2024-10-29T07:46:06.342Z","2024-10-29T08:26:42.418Z","توضيح كيفية تهيئة تطبيقات الويب باللغة العربية، مع ضبط الخطوط والألوان باستخدام أدوات متقدمة مثل Vuetify وNuxt، لتحقيق تجربة استخدام متكاملة واحترافية.","md",{},"\u002Farticles\u002F672092be1b1845a7036f7818",{"title":5,"description":1095},"articles\u002F672092be1b1845a7036f7818",[1102,1105],{"id":1103,"label":1104},"65bf3e32789ae522f33e3fee","سلسلة بناء التطبيقات",{"id":1106,"label":1107},"65ae26381d50740dab36fdb7","اطار Nuxt","2025-03-01T10:51:33.220Z","vOEZqxjcExYDqcTxkuGbkFE68put5EE-IXSVocFlteE",1788209571270]