السلام عليكم ورحمة الله
كيف يمكنني اظهار صفحة ويب عبر كود html ضمن ملف README.md لغيت هب ؟!
يعني بدي اضع الكود ويطلع وكانه صفحة ويب عادية
اريد خيارات الstyle
وعليكم السلام
يمكنك إظهار صفحة ويب ضمن ملف README.md في GitHub باستخدام عنصر <iframe> في HTML.
يمكنك القيام بذلك كالتالي :
<iframe src="index.html" width="100%" height="500px"></iframe>
<style> /* CSS styles here */ </style>
<link rel="stylesheet" type="text/css" href="styles.css">
لا مشكلة تستطيع استخدام العناصر التالية من HTML فقط وليس كل العناصر:
h1 h2 h3 h4 h5 h6 h7 h8 br b i strong em a pre code img tt div ins del sup sub p ol ul table thead tbody tfoot blockquote dl dt dd kbd q samp var hr ruby rt rp li tr td th s strike summary details
أيضًا تستطيع استخدام السمات التالية:
'a' => ['href'], 'img' => ['src', 'longdesc'], 'div' => ['itemscope', 'itemtype'], 'blockquote' => ['cite'], 'del' => ['cite'], 'ins' => ['cite'], 'q' => ['cite'], :all => ['abbr', 'accept', 'accept-charset', 'accesskey', 'action', 'align', 'alt', 'axis', 'border', 'cellpadding', 'cellspacing', 'char', 'charoff', 'charset', 'checked', 'clear', 'cols', 'colspan', 'color', 'compact', 'coords', 'datetime', 'dir', 'disabled', 'enctype', 'for', 'frame', 'headers', 'height', 'hreflang', 'hspace', 'ismap', 'label', 'lang', 'maxlength', 'media', 'method', 'multiple', 'name', 'nohref', 'noshade', 'nowrap', 'open', 'prompt', 'readonly', 'rel', 'rev', 'rows', 'rowspan', 'rules', 'scope', 'selected', 'shape', 'size', 'span', 'start', 'summary', 'tabindex', 'target', 'title', 'type', 'usemap', 'valign', 'value', 'vspace', 'width', 'itemprop']
أي تلك هي العناصر التي تستطيع استخدامها بشكل صريح مباشرًة لكن إذا أردت استخدام تنسيقات لن تتمكن من ذلك داخل عنصر <style> ولن يتم التعرف عليه، لكن تستطيع تنسيق العناصر بواسطة CSS بكتابة التنسيق داخل العنصر نفسه inline كالتالي:
<div style="width: 100%;"> </div>
وإذا أردت تنفيذ تصميم معين فعليك تصميمه من خلال استخدام عنصر svg ثم عنصر foreignObject الخاص به ووضع كود HTML الذي تريده، إليك مثال لملف باسم animated.svg تستطيع كتابة مثله في محرر الأكواد لديك:
<svg fill="none" viewBox="0 0 600 300" width="600" height="300" xmlns="http://www.w3.org/2000/svg"> <foreignObject width="100%" height="100%"> <div xmlns="http://www.w3.org/1999/xhtml"> <style> @keyframes hi { 0% { transform: rotate( 0.0deg) } 10% { transform: rotate(14.0deg) } 20% { transform: rotate(-8.0deg) } 30% { transform: rotate(14.0deg) } 40% { transform: rotate(-4.0deg) } 50% { transform: rotate(10.0deg) } 60% { transform: rotate( 0.0deg) } 100% { transform: rotate( 0.0deg) } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .container { --color-main: #5452ee; --color-primary: #e73c7e; --color-secondary: #23a6d5; --color-tertiary: #ffff; background: linear-gradient(-45deg, var(--color-main), var(--color-primary), var(--color-secondary), var(--color-tertiary)); background-size: 400% 400%; animation: gradient 15s ease infinite; width: 100%; height: 300px; display: flex; justify-content: center; align-items: center; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; } .hi { animation: hi 1.5s linear -0.5s infinite; display: inline-block; transform-origin: 70% 70%; } @media (prefers-color-scheme: light) { .container { --color-main: #F15BB5; --color-primary: #24b0ef; --color-secondary: #4526f6; --color-tertiary: #f6f645; } } @media (prefers-reduced-motion) { .container { animation: none; } .hi { animation: none; } } </style> <div class="container"> <h1>Hi there, my name is Nikola <div class="hi">👋</div></h1> </div> </div> </foreignObject> </svgg
والنتيجة هي التالي:
بعد ذلك تستطيع رفع ذلك الملف على أي منصة لاستضافة الصور، ثم استخدامه في ملف README كالتالي:
<div style="width: 100%;"> <img src="animated.svg" style="width: 100%;" alt="Click to see the source"> </div>
التعليقات