http://kenji.blog/ar/tags/html/Recent content in HTML on kenji.blogHugo -- gohugo.ioarkenjinoteThu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/ar/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/Thu, 06 Apr 2023 23:23:46 +0900http://kenji.blog/ar/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/<img src="http://kenji.blog/p/html%E3%81%A7%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3%E8%B3%87%E6%96%99%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95reveal.js/img.png" alt="Featured image of post طريقة إنشاء عرض تقديمي باستخدام HTML (reveal.js)" /><h1 id="طريقة-إنشاء-عرض-تقديمي-باستخدام-html">طريقة إنشاء عرض تقديمي باستخدام HTML </h1><p>أداة reveal.js هي أداة لإنشاء العروض التقديمية باستخدام HTML و Markdown، وتحتوي على الميزات التالية:</p> <ul> <li>ميزات عرض تقديمي متنوعة مثل المعادلات الرياضية، الرسوم المتحركة، وعمليات السحب</li> <li>إمكانية تخصيص السمة والتخطيط</li> <li>ميزات تنقل تدعم أجهزة متعددة مثل الماوس، لوحة المفاتيح، ولوحة اللمس</li> <li>توفير ميزات متقدمة مثل التشغيل التلقائي للشرائح وتضمين الفيديو</li> <li>إمكانية التصدير بصيغة PDF</li> </ul> <p>من خلال هذه الميزات، يمكن للمستخدمين بسهولة إنشاء عروض تقديمية تفاعلية وجذابة.</p> <h1 id="تثبيت-واستخدام-revealjs">تثبيت واستخدام reveal.js </h1><p>أسهل طريقة للاستخدام هي تنزيل ملف ZIP بالكامل من الصفحة التالية وفك ضغطه.</p> <ol> <li>افتح <a class="link" href="https://revealjs.com/installation" target="_blank" rel="noopener" >https://revealjs.com/installation</a> وقم بتنزيل <code>master.zip</code> من الرابط</li> <li>افتح ملف index.html الموجود في المجلد المستخرج باستخدام المتصفح</li> <li>قم بتعديل index.html لإنشاء العرض التقديمي الخاص بك</li> </ol> <p>※ تمت كتابة كود HTML تجريبي في demo.html لذا يمكنك استخدامه كمرجع.</p> <h1 id="طرق-الاستفادة">طرق الاستفادة </h1><p>يمكنك نشر العرض التقديمي الذي قمت بإنشائه كصفحة ويب كما هو، أو تصديره كملف PDF. أيضًا، نظرًا لأن مصدر العرض التقديمي عبارة عن نص، فمن السهل إدارته باستخدام أنظمة التحكم في الإصدار.</p> <p>يبدو أنه يمكنك أيضًا إنشاء عروض تقديمية بتنسيق Markdown.</p> <h1 id="المراجع">المراجع </h1><ul> <li><a class="link" href="https://qiita.com/Targityen/items/40ae4795e2cb77c1adc6" target="_blank" rel="noopener" >لنستخدم reveal.js للعروض التقديمية المستقبلية</a></li> <li><a class="link" href="https://qiita.com/jkjoluvjlajelljicvjzojieoaid/items/01cd7ff819bc2e69b652" target="_blank" rel="noopener" >قائمة أمثلة على صيغة Markdown</a></li> </ul>http://kenji.blog/ar/p/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-html-%D9%81%D9%8A-hugo/Tue, 17 Jan 2023 19:20:32 +0900http://kenji.blog/ar/p/%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D8%B9%D9%84%D8%A7%D9%85%D8%A7%D8%AA-html-%D9%81%D9%8A-hugo/<img src="http://kenji.blog/p/hugo%E3%81%A7html%E3%82%BF%E3%82%B0%E3%82%92%E4%BD%BF%E3%81%86/img.png" alt="Featured image of post استخدام علامات HTML في HUGO" /><p>افتراضيًا، لا يسمح HUGO باستخدام علامات HTML في المقالات، ولكن بإضافة الكود التالي إلى ملف config.toml، سيصبح ذلك ممكنًا.</p> <div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span><span class="lnt">2 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">markup</span><span class="p">.</span><span class="nx">goldmark</span><span class="p">.</span><span class="nx">renderer</span><span class="p">]</span> </span></span><span class="line"><span class="cl"> <span class="nx">unsafe</span> <span class="p">=</span> <span class="kc">true</span> </span></span></code></pre></td></tr></table> </div> </div><p>المرجع: <a class="link" href="https://gohugo.io/getting-started/configuration-markup" target="_blank" rel="noopener" >Configure Markup</a></p>