All posts by Hoangominh01

Hoangominh01·1/5/2021 in Hỗ trợ - Thiết kế wiki

Javascript không hoạt động trên trang chính??

Khi mình sử dụng đoạn js:

mw.hook('wikipage.content').add(function() {
	$("a[title='Love Live! ']").html('<img style="-webkit-user-select: none;margin: auto;width: 110px;" src="https://static.wikia.nocookie.net/love-live/images/2/22/Love_Live%21_Logo.png/revision/latest?cb=20200904041255&path-prefix=vi">');
	$("a[title='Love Live! Sunshine ']").html('<img style="-webkit-user-select: none;margin: auto;width: 100px;" src="https://static.wikia.nocookie.net/love-live/images/c/c0/Love_Live%21_Sunshine_Logo.png/revision/latest?cb=20200904041205&path-prefix=vi">');
	$("a[title='Love Live! SuperStar ']").html('<img style="-webkit-user-select: none;margin: auto;width: 100px;" src="https://static.wikia.nocookie.net/love-live/images/5/54/Love_Live%21_Super_Star_Logo.png/revision/latest?cb=20200904041224&path-prefix=vi">');
	$("a[title='Love Live! Nijigaku ']").html('<img style="-webkit-user-select: none;margin: auto;width: 100px;" src="https://static.wikia.nocookie.net/love-live/images/7/79/Love_Live%21_NijiGaku_Logo.png/revision/latest?cb=20201227125638&path-prefix=vi">');
});

Thì mà đã hoạt động trên 2 bản mẫu Trang chính (ảnh 2) và MainPageMenu (ảnh 3) nhưng khi đưa lên Trang chính (ảnh 1) thì lại không hoạt động.

Liệu mã js không hoạt động được trên trang chính của wiki hay sao vậy??

Hoangominh01·9/4/2020 in Hỗ trợ - Thiết kế wiki

Tạo tab theo ý muốn

<p>minhf muốn thiết kế 1 tab mà có thể lấy hình ảnh làm tiêu đề cho tab nhưng <tabber> lại không cho phép nên mình tự tạo 1 tab theo ý muốn. Mặc dù mình đã thử nghiệm tab này trên 1 live server và hoạt động thành công nhưng khi mình sử dụng trên wiki thì nó lại không hoạt động. Ad có thể xem giúp mình với

<i>Mã HTML</i> </p> <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="html5 source-html5">

<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tabs"</span>></span>
    <span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LLSStar"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"active tab"</span>></span>[[Tập tin:Love Live! Super Star Logo.png|150px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
    <span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab"</span>></span>[[File:Love Live! Logo.png|180px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
    <span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LLSS"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab></span></span>[[File:Love Live! Sunshine Logo.png|150px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
 
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab-content"</span>></span>
    <span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LLSStar"</span> data-tab-<span class="kw3">content</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"active"</span>></span>
      <span class="sc2"><<span class="kw2">h1</span>></span>Love Live! Super Star<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
      <span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LL"</span> data-tab-content></span>
      <span class="sc2"><<span class="kw2">h1</span>></span>Love Live!<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
      <span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LLSS"</span> data-tab-content></span>
      <span class="sc2"><<span class="kw2">h1</span>></span>Love Live! SunShine<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
      <span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>

</div></div> <p><i>Mã CSS</i> </p> <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">

<span class="br0">[</span>data-tab-content<span class="br0">]</span> <span class="br0">{</span>
        <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      .active<span class="br0">[</span>data-tab-content<span class="br0">]</span> <span class="br0">{</span>
        <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      body <span class="br0">{</span>
        <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
        <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      <span class="re1">.tabs</span> <span class="br0">{</span>
        <span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
        justify-content<span class="sy0">:</span> space-around<span class="sy0">;</span>
        <span class="kw1">list-style-type</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
        <span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
        <span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      <span class="re1">.tab</span> <span class="br0">{</span>
          <span class="kw1">display</span><span class="sy0">:</span> inline-block<span class="sy0">;</span>
        <span class="kw1">cursor</span><span class="sy0">:</span> <span class="kw2">pointer</span><span class="sy0">;</span>
        <span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      <span class="re1">.tab</span><span class="re1">.active</span> <span class="br0">{</span>
        <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#CCC</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      <span class="re1">.tab</span><span class="re2">:hover </span><span class="br0">{</span>
        <span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#AAA</span><span class="sy0">;</span>
      <span class="br0">}</span>
 
      <span class="re1">.tab-content</span> <span class="br0">{</span>
        <span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
        <span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
      <span class="br0">}</span>

</div></div> <p><i>Mã Scripts</i> </p> <div dir="ltr" class="mw-geshi mw-content-ltr"><div class="javascript source-javascript">

 
        <span class="kw1">const</span> tabs <span class="sy0">=</span> document.<span class="me1">querySelectorAll</span><span class="br0">(</span><span class="st0">'[data-tab-target]'</span><span class="br0">)</span>
        <span class="kw1">const</span> tabContents <span class="sy0">=</span> document.<span class="me1">querySelectorAll</span><span class="br0">(</span><span class="st0">'[data-tab-content]'</span><span class="br0">)</span>
 
        tabs.<span class="me1">forEach</span><span class="br0">(</span>tab <span class="sy0">=></span> <span class="br0">{</span>
        tab.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=></span> <span class="br0">{</span>
            <span class="kw1">const</span> target <span class="sy0">=</span> document.<span class="me1">querySelector</span><span class="br0">(</span>tab.<span class="me1">dataset</span>.<span class="me1">tabTarget</span><span class="br0">)</span>
            tabContents.<span class="me1">forEach</span><span class="br0">(</span>tabContent <span class="sy0">=></span> <span class="br0">{</span>
            tabContent.<span class="me1">classList</span>.<span class="me1">remove</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
            <span class="br0">}</span><span class="br0">)</span>
            tabs.<span class="me1">forEach</span><span class="br0">(</span>tab <span class="sy0">=></span> <span class="br0">{</span>
            tab.<span class="me1">classList</span>.<span class="me1">remove</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
            <span class="br0">}</span><span class="br0">)</span>
            tab.<span class="me1">classList</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
            target.<span class="me1">classList</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
        <span class="br0">}</span><span class="br0">)</span>
    <span class="br0">}</span><span class="br0">)</span>

</div></div>

(Edited by Hoangominh01)

Hoangominh01·7/13/2020 in Hỗ trợ - Thiết kế wiki

Hỏi về cách import 1 file css khác vào MediaWiki:Wikia.css

<p>Hiện css trên wiki mình khá dài nên mình muốn chia nhỏ thành nhiều trang file css khác nhau rồi import vào 1 file MediaWiki:Wikia.css để quản lí dễ dàng hơn. Trước mình có thử cus pháp @import url(" "); nhưng thất bại. Ai có thể chỉ cách cho mình với ạ??? </p>

(Edited by Hoangominh01)

Hoangominh01·2/1/2018 in Hỗ trợ - Mới tham gia

Giao diện

<p>thumb|400pxLúc thiết kế giao diện của Trang Chính thì mình xem qua trong Review thì nó hoàn toàn đầy đủ màn nhưng sau khi mình Save lại thì nó thành ra như hình bên dưới mà trước đây nó vẫn hiển thị đầy đủ. Tại sao lại vậy hả Ad </p>

(Edited by Hoangominh01)

Hoangominh01·1/24/2018 in Hỗ trợ - Thiết kế wiki

Trích dẫn

<p>thumb|500pxMình muốn tạo 1 box trích dẫn từ Twitter như này thì làm thế nào vậy?? </p>

(Edited by Hoangominh01)