我竟然在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>



标题

2.3我的个人主页的完整代码

DOCTYPE html>



slandarer的简介




    
    [0]这里是slandarer的博客

  


    目前没有个人公众号,创建的时候会第一时间放在这个地方嗷







    
    [1] 一些有趣的个人项目及小程序(点击图片或链接跳转博文)： 

 



    建筑工地海报生成器  
    环形相册  
    举牌加油小人生成器



    绕线画绘制？附带颜色渲染    
    真正意义上的拼图小游戏    
    突出效果海报



    故障风海报    
    图片三角风格化 (low poly)    
    含褶皱面料图  
    3D玫瑰花绘制



    MATLAB 版大富翁    
    化学方程式配平    
    连连看小游戏



    
    
    >>好看的图片 

 

    


    



    


    



    
    
    
    >>帅气的特效 
    

 

    


    


    
    
    
    >>app designer工具 
    

 

    



    

3后记

众所周知，我主要是写MATLAB相关内容的，这次在CSDN个人主页上放小游戏只是依靠自学的一点点微薄的前端知识，大家提出的各种构建上配置上的问题我可能并没有能力解答，在此表示抱歉，欢迎大家在看我博客的时候玩一玩左侧的小游戏，高级模式比初级模式难了不止一点点嗷。