基于atomicneko魔改搭建Typecho主页（Handsome主题）

博主： literature
发布时间：2023 年 08 月 21 日
181 次浏览
关闭评论
1117字数
分类：主机教程

Preface

在搭建本站的时候，又是因为康到了神代綺凜大佬的博客主页，遂研究了一番，有了魔改的想法。

# 神代綺凜の随波逐流

MOE IS JUSTICE TECHNOLOGY IS POWER
萌は正義なのですテクノロジーがあれば何でもできるです

实现方法

Fork项目

原项目：

修改个人信息

主要内容都位于scr/index.html和另一个css文件当中，直接修改即可。

项目基于Node.js和Webpack打包，具体使用方法在GitHub有写。

我Fork以后的魔改项目：

修改Handsome的时光机模板

在魔改好主页的文件之后，我的想法是在时光机页面直接调用那个html，使用iframe的方式，结果和原作的方法不谋而合。我将生成的dist文件夹放置在/var/www的某个目录之下（自己记住，其实直接通过html访问都可以），为了将其整合到时光机页面当中，我们则需要修改主题文件目录下的cross.php并插入一段iframe代码。

后记

剩下的就由大家自己魔改啦（去掉自己想去的，仔细调教

反正我魔改之前也从来没玩过php，自己瞎改代码肯定行的（确信）

(/▽＼)

最后修改：2023 年 08 月 21 日

© 允许规范转载

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

基于atomicneko魔改搭建Typecho主页（Handsome主题）

literature • 2023 年 08 月 21 日

<h1>Preface</h1><p>在搭建本站的时候，又是因为康到了<strong>神代綺凜</strong>大佬的博客主页，遂研究了一番，有了魔改的想法。</p><p></p><div class="preview"><div class="post-inser post box-shadow-wrap-normal"><div class="inner-image bg" style="background-image: url(https://moe.best/usr/img/avatar1.png);background-size: cover;"></div><div class="inner-content"><p class="inser-title"># 神代綺凜の随波逐流</p><div class="inster-summary text-muted">MOE IS JUSTICE  TECHNOLOGY IS POWER<br />萌は正義なのです  テクノロジーがあれば何でもできるです</div></div><p></div><p></div><p></p><h1>实现方法</h1><h2>Fork项目</h2><p>原项目：<button class="btn m-b-xs btn-dark btn-addon" onclick="window.open("https://github.com/amphineko/atomicneko","_blank")"><i><i data-feather="github"></i></i>amphineko/atomicneko</button></p><h2>修改个人信息</h2><p>主要内容都位于<code>scr/index.html</code>和另一个<code>css</code>文件当中，直接修改即可。</p><p>项目基于Node.js和Webpack打包，具体使用方法在GitHub有写。</p><p>我Fork以后的魔改项目：</p><p><button class="btn m-b-xs btn-dark btn-addon" onclick="window.open("https://github.com/JeffersonQin/atomicneko","_blank")"><i><i data-feather="github"></i></i>JeffersonQin/atomicneko</button></p><h2>修改Handsome的时光机模板</h2><p>在魔改好主页的文件之后，我的想法是在时光机页面直接调用那个html，使用<code>iframe</code>的方式，结果和原作的方法不谋而合。我将生成的<code>dist</code>文件夹放置在<code>/var/www</code>的某个目录之下（自己记住，其实直接通过<code>html</code>访问都可以），为了将其整合到时光机页面当中，我们则需要修改主题文件目录下的<code>cross.php</code>并插入一段<code>iframe</code>代码。</p><pre><code class="language-php"><script type="text/javascript">
    // document.domain = "caibaojian.com";
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };

window.onload = function () {
        setIframeHeight(document.getElementById('external-frame'));
    };
</script>

<iframe src="//gyrojeff.top/intro-chem/index.html" style="width: 100%" frameborder="0" height=1500px scrolling="no" id="external-frame" onload="setIframeHeight(this)" onloadeddata="setIframeHeight(this)" onchange="setIframeHeight(this)"></iframe></code></pre><h1>后记</h1><p>剩下的就由大家自己魔改啦（去掉自己想去的，仔 细 调 教</p><p>反正我魔改之前也从来没玩过php，自己瞎改代码肯定行的（确信）</p><p>(/▽＼)</p>