master

分支 (1)

管理

管理

master

wychao12.github.io
/
index.html


<!DOCTYPE html>
<html lang="zh-cn ">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>myBlog || </title>
    <meta name="author" content="Wychao">
    <meta name="description" content=" ">
    <meta name="keywords" content=" ">
    <link rel="icon" href="/images/avatar.png">
    <link rel="stylesheet" href="/css/antd.min.css">

    <link rel="stylesheet" href="/css/full-theme.css">

    <script src="/js/vue.js"></script>
    <script src="/js/antd.min.js"></script>
<meta name="generator" content="Hexo 5.4.2"></head>

<body>

    <div id="loading"
        style="height: 100vh; width: 100%; position: fixed;display: flex;z-index: 200; justify-content: space-between;">
        <div id="loadleft" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div id="loadright" style="width: 50%;background-color: #ffffff;transition: width 0.6s ease-out;"></div>
        <div
            style="position: fixed; height: 100vh; width: 100%;display: flex;justify-content: center;align-items: center;">
            <div id="loadcontent"
                style="width:400px;height:400px;padding:50px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:solid 10px#a3ddfb; text-align:center;opacity:1;transition:opacity 0.3s ease-out;">
                <div>
                    <h2>LOADING...</h2>
                    <p>加载过慢请开启缓存(浏览器默认开启)</p>
                    <div>
                        <img src="/dancingkitty.gif" alt="loading">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="layout">
        <transition name="into">
            <div v-show="show_page" style="display: none;">
                <div id="menu_show">

<nav id="menu">
    <div class="desktop-menu">
        <a href="/">
            <span class="title">myBlog</span>
        </a>

        <a href="/">
            <span>
                <a-icon type="home" theme="filled" />
            </span>
            <span>home</span>
        </a>

        <a href="/about">
            <span>
                <a-icon type="idcard" theme="filled" />
            </span>
            <span>about</span>
        </a>

        <a href="/archives">
            <span>
                <a-icon type="folder" theme="filled" />
            </span>
            <span>archives</span>
        </a>

        <a href="/like/categories">
            <span>
                <a-icon type="book" theme="filled" />
            </span>
            <span>categories</span>
        </a>

        <a href="/like/tags">
            <span>
                <a-icon type="tags" theme="filled" />
            </span>
            <span>tags</span>
        </a>

    </div>

    <div :class="'phone-menu ' + menu_show" id="phone-menu">
        <div :class="'title'" @click="menu_show=!menu_show">
            <span style="margin-right: 10px;">
                <a-icon type="appstore" theme="filled" />
            </span>
            <span>myBlog</span>
        </div>
        <div class="items" v-show="menu_show">

            <a href="/">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="home" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">home</div>
                </div>
            </a>

            <a href="/about">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="idcard" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">about</div>
                </div>
            </a>

            <a href="/archives">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="folder" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">archives</div>
                </div>
            </a>

            <a href="/like/categories">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="book" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">categories</div>
                </div>
            </a>

            <a href="/like/tags">
                <div class="item">
                    <div style="min-width:20px; max-width:50px; width: 10%">
                        <a-icon type="tags" theme="filled" />
                    </div>
                    <div style="min-width:100px;max-width: 150%;width: 20%;">tags</div>
                </div>
            </a>

        </div>
        <div class="curtain" v-show="menu_show"></div>
    </div>

</nav>
                </div>

                <div id="main">
                    <div id="home-head" style=background-image:url('home.jpg')>
    <script>
        var menu = document.getElementById("menu")
        menu.className += " menu-color"
    </script>

    <div id="home-info" class="home-info" @click="home_click">
        <span class="loop"></span>
        <span class="loop"></span>
        <span class="loop"></span>
        <span class="loop"></span>
        <span class="info">
            <div class="wrap">
                <h1>myBlog</h1>
                <h3></h3>
                <h5></h5>
            </div>
        </span>
    </div>

</div>


<div id="home-posts-wrap" class=>
    <div id="home-posts">

        <div id="posts">


<div class="post">

    <a href="/2022/05/17/hello-world/">
        <h2>
            Hello World
        </h2>
    </a>

    <div class="category-and-date">


        <span class="date">
            <span class="icon">
                <a-icon type="calendar" theme="filled" />
            </span>
            2022/5/17
        </span>

    </div>

    <div class="excerpt">
        <div class="content" v-pre>


            <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><pre><code class="bash">$ hexo new &quot;My New Post&quot;
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><pre><code class="bash">$ hexo server
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><pre><code class="bash">$ hexo generate
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><pre><code class="bash">$ hexo deploy
</code></pre>
<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>


        </div>
    </div>

    <div class="post-tags">


    </div>

    <a href="/2022/05/17/hello-world/ " class="go-post">
        阅读全文
    </a>
</div>


<div class="page-current">

    <div class="prev">

    </div>

    <div class="page-index">


        <span class="current">
            1
        </span>


    </div>

    <div class="next">

    </div>

</div>

        </div>
    </div>

    <div id="home-card">
        <a-affix :offset-top="card_top">
    <a-card class="card-style" style="width: 300px">
        <div class="avatar">
            <img src="images/avatar.png " alt="头像">
        </div>
        <div class="name">
            Wychao
        </div>
        <div class="descriptions">

            <div class="description">
                UE4开发工程师
            </div>

            <div class="description">
                教学软件研发
            </div>

        </div>
        <div class="icon-links">

            <span class="icon-link">
                <a target="_blank" rel="noopener" href="https://github.com/korilin">


                    <a-icon type="github"
                        theme="filled" />

                </a>
            </span>

            <span class="icon-link">
                <a target="_blank" rel="noopener" href="https://twitter.com/korilin_dev">


                    <a-icon type="twitter"
                        theme="" />

                </a>
            </span>

        </div>
        <div class="friend-links">

            <div class="friend-link">
                <a href="">
                    技术博客
                </a>
            </div>

            <div class="friend-link">
                <a href="">
                    记录博客
                </a>
            </div>

        </div>
    </a-card>
</a-affix>
    </div>

</div>

<footer id="footer">
    <div class="footer-wrap">
        <div>
            © 2018 - 2022 myBlog
            <span class="footer-icon">
                <a-icon type="flag" theme="filled" /></span>
            @Wychao
        </div>
        <div></div>
        <div>Based on the <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo Engine</a> & <a
                target="_blank" rel="noopener" href="https://github.com/korilin/hexo-theme-particle">Particle Theme</a></div>

    </div>

</footer>

<script src="/js/highlight.min.js"></script>
<script src="/js/particle.js"></script>
                </div>
            </div>
        </transition>
    </div>

    <script>
    new Vue({
        el: "#layout",
        data: {
            show_page: false,
            onload_menu: false,
            menu_show: false,
            card_top: 100
        },
        created: function () {
            var that = this
            window.onload = function () {
                that.show_page = true
                document.getElementById("loadcontent").style.opacity = 0
                setTimeout(function () {
                    document.getElementById("loadleft").style.width = 0
                    document.getElementById("loadright").style.width = 0
                }, 300)
                setTimeout(function () {
                    document.getElementById("loading").style = "display:none"
                }, 600)
            }
        },
        mounted: function () {
            var that = this
            window.addEventListener('scroll', function (e) {
                that.menu_show = false
            })
        },
        methods: {
            home_click: function () {
                window.scrollTo({
                    top: window.innerHeight - 80,
                    behavior: "smooth",
                });
            }
        }
    })
</script>

</body>

</html>