我竟然在CSDN玩游戲？？，教你利用github page在CSDN主頁放置小游戲-有解無憂

好耶！又多了一種摸魚新方式
大家在網頁端看我的主頁或者博客時，會發現左側多了一個小游戲hiahiahia：

在這里插入圖片描述
這主要是通過github page創建了小游戲頁面，并且通過iframe嵌入到html里實作的，大佬看到這應該已經會了，像我一樣的前端新手可以繼續往下看，以下是實作步驟

1github page創建

1.1 注冊github賬號

這個的最大難度可能就是快速計算骰子點數之和的驗證了，網上注冊流程給的都挺詳細，大家可以搜一下，

1.2 創建公開倉庫
一定是要公開倉庫嗷，然后為了不和個人主頁搶域名，這里的倉庫名稱并不需要命名為 賬號名.github.io，隨便起一個就好：
在這里插入圖片描述
1.3 倉庫內檔案要求
倉庫內一定要有名為 index.html 的檔案：

在這里插入圖片描述
1.4 游戲使用圖片上傳github后加載慢怎么辦

神奇的小技巧：
我們把圖片上傳 CSDN 后圖片后面會有一個鏈接：

在這里插入圖片描述
我們可以在 CSS 檔案使用這個鏈接，圖片顯示就能快很多，美滋滋：

在這里插入圖片描述
1.5 設定為github page

點擊settings:
在這里插入圖片描述
使勁往下拖能看到：

點開后選擇源分支：

在這里插入圖片描述
完成github page設定后會顯示鏈接，在這涂抹掉不做展示了：

在這里插入圖片描述
點開鏈接會發現能顯示游戲，建議過段時間再查看鏈接，因為頁面需要一段時間才能設定好并顯示

2個人主頁顯示游戲

2.1個人主頁修改位置
通過：內容管理->自定義模塊 可以到這個頁面：
不過只有vip和博客專家才能編輯這個內容，，，
在這里插入圖片描述
在欄目內容中撰寫html即可

2.2在html內顯示html
實際上想要顯示游戲可以撰寫如下代碼并復制到欄目內容框內：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>標題</title>
</head>
<body>
<iframe src="你之前的鏈接" frameBorder="0" width="250" scrolling="no" height="280"></iframe>
</body>
</html>

2.3我的個人主頁的完整代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>slandarer的簡介</title>
</head>
<body>

<font color="#2F4A5D" size=3>
    <b>
    [0]這里是slandarer的博客</br>
</b>
</font>  

<font color="#6A869B" size=2>
    目前沒有個人公眾號,創建的時候會第一時間放在這個地方嗷</br>
</font>

<br />
<iframe src="https://slandarer.github.io/smalldogame/" frameBorder="0" width="250" scrolling="no" height="280"></iframe>

<br />
<font color="#4A452A" size=2>
    <b>
    [1] 一些有趣的個人專案及小程式(點擊圖片或鏈接跳轉博文)：</br> 
</b>
</font> 

<br />
<marquee>
    <a href="https://blog.csdn.net/slandarer/article/details/118521735"><font color="#7388C1" size=2>建筑工地海報生成器</font></a>&#160&#160
    <a href="https://blog.csdn.net/slandarer/article/details/117451019"><font color="#625BA1" size=2>環形相冊</font></a>&#160&#160
    <a href="https://blog.csdn.net/slandarer/article/details/118161500"><font color="#8F63A2" size=2>舉牌加油小人生成器</font></a>
</marquee>
<br />
<marquee>
    <a href="https://blog.csdn.net/slandarer/article/details/117304136"><font color="#426EB5" size=2>繞線畫繪制？附帶顏色渲染</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/116528717"><font color="#8272B0" size=2>真正意義上的拼圖小游戲</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/116382472"><font color="#C7B7D2" size=2>突出效果海報</font></a>
</marquee>
<br />
<marquee>
    <a href="https://blog.csdn.net/slandarer/article/details/116325539"><font color="#6EC3C8" size=2>故障風海報</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/115800369"><font color="#7388C1" size=2>圖片三角風格化 (low poly)</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/115709803"><font color="#9AD0D2" size=2>含褶皺面料圖</font></a>&#160&#160
    <a href="https://blog.csdn.net/slandarer/article/details/107160568"><font color="#6EC3C8" size=2>3D玫瑰花繪制</font></a>
</marquee>
<br />
<marquee>
    <a href="https://blog.csdn.net/slandarer/article/details/109558919"><font color="#2F4A5D" size=2>MATLAB 版大富翁</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/108734172"><font color="#C9E3D6" size=2>化學方程式配平</font></a>&#160&#160  
    <a href="https://blog.csdn.net/slandarer/article/details/108120501"><font color="#99D1D2" size=2>連連看小游戲</font></a>
</marquee>
<br />
<font color="#A17C84" size=2>
    <b>
    <br />
    >>好看的圖片</br> 
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/117048623">
    <img src="https://img-blog.csdnimg.cn/20210703202641236.png" width=115>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/107160568">
    <img src="https://img-blog.csdnimg.cn/20210703202652130.jpg" width=135>
</a></br>

<a href="https://blog.csdn.net/slandarer/article/details/117226977">
    <img src="https://img-blog.csdnimg.cn/20210703202715377.png" width=135>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/110287590">
    <img src="https://img-blog.csdnimg.cn/20210703202708152.png" width=115>
</a>

<font color="#A17C84" size=2>
    <b>
    <br />
    <br />
    >>帥氣的特效</br> 
    <br />
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/115457724">
    <img src="https://img-blog.csdnimg.cn/20210703203917422.png" width=120>
</a>
<a href="https://blog.csdn.net/slandarer/article/details/115724116">
    <img src="https://img-blog.csdnimg.cn/20210703203926961.jpg" width=125>
</a>
<font color="#A17C84" size=2>
    <b>
    <br />
    <br />
    >>app designer工具</br> 
    <br />
</b>
</font> 
<a href="https://blog.csdn.net/slandarer/article/details/115035583">
    <img src="https://img-blog.csdnimg.cn/20210703204606872.jpg" width=400>
</a></br>

<a href="https://blog.csdn.net/slandarer/article/details/113797518">
    <img src="https://img-blog.csdnimg.cn/20210703204532933.jpg" width=400>
</a>
</body>
</html>

3后記

眾所周知，我主要是寫MATLAB相關內容的，這次在CSDN個人主頁上放小游戲只是依靠自學的一點點微薄的前端知識，大家提出的各種構建上配置上的問題我可能并沒有能力解答，在此表示抱歉，歡迎大家在看我博客的時候玩一玩左側的小游戲，高級模式比初級模式難了不止一點點嗷，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292132.html

標籤：其他

上一篇：C語言之初級（保姆級別------三子棋游戲）

下一篇：Coin Stack——Java版詳解