Hexo静态博客搭建

静态博客

  • 静态博客生成器
    • 官方推荐的 Jekyll
    • Node.js 编写的 Hexo
    • Go 编写的 Hugo
    • Python 编写的 Pelican
    • 以及更人性化的 Gridea
  • https://sspai.com/post/54608

网站托管平台

Hexo

环境配置

  • npm install -g hexo-cli
  • npm install –save hexo-theme-fluid
  • npm install hexo-deployer-git –save
  • hexo init blog
  • hexo new post blogName

hexo command

  • hexo g // 启动
  • hexo g -d // 发布 | _config.yml配置deploy:git
  • hexo server // 启动服务器

hexo configure

hexo music

  • Hexo+Fluid博客添加网易云背景音乐
  • node_modules\hexo-theme-fluid\layout_partials\footer.ejs
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <div class="footer-content">
        <%- theme.footer.content %>

            <div id="music_div" style="position: fixed; bottom: 0px; left: 30px;">

                <!-- 凡人 -->
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
                    src="//music.163.com/outchain/player?type=2&id=1465290469&auto=1&height=66">
                </iframe>
                <!-- 难念的经 -->
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
                    src="//music.163.com/outchain/player?type=2&id=5271858&auto=1&height=66">
                </iframe>

                <script src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>
                <script src="/js/musicshow.js"></script>
            </div>

    </div>
  • hexo-theme-fluid/source/js/musicshow.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    !(function() {
    function show() {
        //简单判断首页，因为我的域名是tomorrow50.xyz，所以首页就会触发
        if (location.href.match(/xyz.{0,1}$/)){
            //直接把音乐框隐藏
            $("#music_div").attr("style","display:none;");
            //滚动条事件
            $(window).scroll(function(){
                //获取滚动条的滑动距离
                var scroH = $(this).scrollTop();
                //滚动条的滑动距离大于120，就显示，反之就隐藏
                if(scroH >= 120){
                    $("#music_div").attr("style","display:block;position:fixed;bottom:0px;left:30px;");
                }else if(scroH < 120){
                    $("#music_div").attr("style","display:none;");
                }
            })
        }

    }
    show();
    })();
  • 使用 Fluid 注入功能实现背景视频

hexo image

Hexo Theme

Comment

Tool
#Tool #Hexo
Hexo静态博客搭建
https://automask.github.io/wild/2021/10/27/log/T_Hexo/
作者
Kyle Zhou
发布于
2021年10月27日
许可协议