Loading... **Head Pic: [SAOまとめ / ショウラ][1]** 感觉原有的时光机不是很好看，所以就学着神代大佬那样改了改，中间遇到些小问题大佬也帮我解决了:) ## 思路 在自己看的时候就感觉应该是用了 `iframe`，但是造诣不足不敢断定（其实是啥都不会），又去问了问，然后看了看源代码确实是用了 `iframe`，那么剩下的问题就很好解决了，就是将原本的代码删掉，换成一个自定义的页面 <img src="https://blog.mou.best/usr/themes/handsome/assets/img/emotion/aru/sweat.png" class="emotion-aru"> ## 选用页面 这里是直接采用了神代綺凜的原有模板，效果可以看[这里][2]（是单独页面），可以直接部署在Github Page上（又一个白嫖的方法），但是Github Page上的是单独的，我们虽然可以用 `iframe`来直接调用，但是有个样式错误，我们后面再讲，这里贴上页面的Github项目链接 <button class="btn m-b-xs btn-black btn-addon" onclick='window.open("https://github.com/amphineko/atomicneko","_blank")'><i class="fa fa-github"></i>amphineko / atomicneko</button> 修改 `index.html`以及对应的图标，配色设置建议自行在 `style.css`内找，这有利于你的动手能力（雾，其实是我懒） ## 动手 懒癌患者可以直接下载 `cross.php`，文件，并将第22行内的 `url`填写上即可 <button class="btn m-b-xs btn-info btn-addon" onclick='window.open("https://drive.google.com/file/d/1J4-pSBrh-ePZ2ypZixzOvszt4-asG39k/view?usp=sharing","_blank")'><i class="fa fa-google"></i>cross.php[谷歌云]</button> <button class="btn m-b-xs btn-primary btn-addon" onclick='window.open("https://1drv.ms/u/s!AmqLOuGivhhj3gOtjaZc4T5IyGb5?e=RdVrmV","_blank")'><i class="fa fa-cloud-download"></i>cross.php[OneDrive]</button> <button class="btn m-b-xs btn-dark btn-addon" onclick='window.open("https://share.weiyun.com/EClJ8GUL","_blank")'><i class="fa fa-download"></i>cross.php[微云]</button> **自己动手** 将cross.php里的内容替换成 ```php <?php /** * 时光机 * * @package custom */ if (!defined('__TYPECHO_ROOT_DIR__')) exit; $this->need('component/header.php'); ?> <!-- aside --> <?php $this->need('component/aside.php'); ?> <!-- / aside --> <!-- content --> <div id="loadingbar" class="butterbar hide"> <span class="bar"></span> </div> <main class="app-content-body <?php echo Content::returnPageAnimateClass($this); ?>"> <div class="hbox hbox-auto-xs hbox-auto-sm"> <div class="col"> <iframe src="你的网页链接" style="width:100%;" frameborder="0" scrolling="no" id="aboutPage"></iframe> <div class="padder" style="max-width:1024px;margin-left:auto;margin-right:auto;padding:0;margin-top:30px;"> <?php $this->need('component/say.php') ?> </div><!--end of #pedder--> </div> </div> </main> <!-- /content --> <!-- footer --> <?php $this->need('component/footer.php'); ?> <!-- / footer --> ``` 然后看看你的 `cross`页面，是不是更改到了呢，但是只有一小块看得见  下面就来修复这个玩意 ## 样式 <div class="tip inlineBlock warning"> 什么？你用了神代綺凜的魔改？如果是手动抄的话需要注意到有没有抄到js，如果没有的话建议回去抄一下js,找不到的话也可以试试[Sanakey][4]的[插件][5]，这样也能更好的避免更新火葬场，而后应该就不需要再进行此步骤了，如果还要则直接看FAQ <img src="https://blog.mou.best/usr/themes/handsome/assets/img/emotion/aru/knife.png" class="emotion-aru"> </div> 在网站的 `usr/themes/handsome/assets/js`内新建一个文件名为 `cross.js`，并写入以下内容 ```JS $(document).ready(function () { window.setInterval(function () { if (document.getElementById("aboutPage")) { var a = document.getElementById("aboutPage"), b = a.contentWindow.document.getElementById("mainc"); try { a.style.height = b.scrollHeight + "px" } catch (e) {} } }, 300); })(); ``` 保存 然后在 `usr/themes/handsome/component`的 `header.php`大约第 `103`行 ```php <script src="<?php echo STATIC_PATH ?>js/features/fancyMorph.min.js"></script> ``` 的后面添加 ```php <script src="<?php echo STATIC_PATH ?>js/cross.js"></script> ``` 即可完工，此处贴图（在没有打开插件以及仅使用了神代綺凜的css魔改状态下）  其实如果你在githubpage部署了那个页面你还多建了一个站 <img src="https://blog.mou.best/usr/themes/handsome/assets/img/emotion/aru/clap.png" class="emotion-aru"> ## FAQ **Q**:我全部照做为什么还是不行？/我已经使用了神代綺凜的魔改插件（`css`与 `js`都抄到了）为什么还不行？ A:因为你 `iframe`的 `src`和站点不同源，不给 `js`访问（意思就是改不了），所以解决方法是，在网站根目录建一个about页面，并且把你做好的about me网站丢进去（反正全是 `html+css+js`罢了），然后将url改成:`http://你的域名/about`就行了，或者利用反代（我不会） **Q**:Github打开慢怎么办 A:挂梯子 **Q**:我下载了cross.php还要做后面的修复吗？ A:要，所以懒狗还是得动手 <img src="https://blog.mou.best/usr/themes/handsome/assets/img/emotion/aru/discovertruth.png" class="emotion-aru"> [1]: https://www.pixiv.net/artworks/76463759 [2]: http://about.mou.best/ [3]: http://blog.mou.best/usr/uploads/2020/07/2373152180.png [4]: https://keymoe.com/ [5]: https://keymoe.com/archives/31/ [6]: http://blog.mou.best/usr/uploads/2020/07/3346564284.png 最后修改：2020 年 11 月 29 日 11 : 59 PM © 允许规范转载
谢谢兄弟