zoukankan      html  css  js  c++  java
  • Hexo 博客Next 搭建与美化主题

    ========================================================================================
    将页面部署到GitHub或者Coding
    ========================================================================================

    1.进入GitBash
    ssh-keygen -t rsa -C "@qq.com"
    默认会在家目录生成:C:Users.ssh
    复制pub中的内容到github

    2.测试连通性,邮箱地址不用改
    ssh -T git@github.com

    3.此时你还需要配置
    git config --global user.name "" //你的github用户名,非昵称
    git config --global user.email "@qq.com" //填写你的github注册邮箱

    4.部署代码命令如下

    cd public/

    git init
    git add .

    git commit -m "MyBlog"
    git remote add origin https://github.com/用户名/项目名称.git
    git push -f origin master


    ========================================================================================
    自动化页面部署到 GitHub
    ========================================================================================
    hexo g &
    cd public &
    git config --global user.name "xxxxxx" &
    git config --global user.email "@qq.com" &
    git init &
    git add . &
    git commit -m "Blog" &
    git remote add origin https://github.com/xxxxxx.github.io.git &
    git push -f origin master &
    echo "push master GitHub " &
    del /s /f /q .git &
    rd /s /q .git &

    ========================================================================================
    替换底部标签#号为图标
    ========================================================================================
    修改 hemes extlayout\_macropost.swig
    搜索 rel="tag"># 将 # 换成 <i class="fa fa-tag"></i>

    ========================================================================================
    给站点添加版权声明
    ========================================================================================
    1.新建配置文件,并写入以下内容: hemes extlayout\_macromy-copyright.swig

    {% if page.copyright %}
    <div class="my_post_copyright">
    <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
    <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
    <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
    <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    </p>
    <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者</p>
    </div>
    {% endif %}
    ---------------------------------------------------------------------------------------------
    2.在目录 hemes extsourcecss\_commoncomponentspost下新建my-post-copyright.styl并写入内容:

    .my_post_copyright {
    box-shadow: 10px 1px 10px #989898;
    padding: 10px;
    text-shadow: 1px 1px 1px #FFF;
    font-size: 16px;
    font-family: 'Microsoft Yahei';
    border-left: solid 5px #3199E4;
    background: #F3F3F3;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 50%;
    border-top-right-radius: 10px;
    }
    .my_post_copyright p{margin:0;}
    .my_post_copyright span {
    display: inline-block;
    5.2em;
    color: #1d1f21;
    font-weight: bold;
    }
    .my_post_copyright .raw {
    margin-left: 1em;
    5em;
    }
    .my_post_copyright a {
    color: #808080;
    border-bottom:0;
    }
    .my_post_copyright a:hover {
    color: #a3d2a3;
    text-decoration: underline;
    }
    .my_post_copyright:hover .fa-clipboard {
    color: #000;
    }
    .my_post_copyright .post-url:hover {
    font-weight: normal;
    }
    .my_post_copyright .copy-path {
    margin-left: 1em;
    1em;
    +mobile(){display:none;}
    }
    .my_post_copyright .copy-path:hover {
    color: #808080;
    cursor: pointer;
    }

    ---------------------------------------------------------------------------------------------
    3.修改配置文件: hemes extlayout\_macropost.swig 修改(335行)

    {% if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
    {% include '../_partials/post/post-related.swig' with { post: post } %}
    {% endif %}

    #------------------------------------------------------------
    <!--增加的底部版权代码-->
    <div>
    {% if not is_index %}
    {% include 'my-copyright.swig' %}
    {% endif %}
    </div>
    #------------------------------------------------------------
    {#####################}
    {### END POST BODY ###}
    {#####################}
    ---------------------------------------------------------------------------------------------
    4.修改 hemes extsourcecss\_commoncomponentspostpost.styl文件,在最后一行增加代码:
    @import "my-post-copyright";


    ========================================================================================
    给站点添加订阅
    ========================================================================================
    1.首先安装插件: npm install hexo-generator-feed

    2.在本地hexo根目录下的_config.yml文件中,添加以下配置

    # Extensions
    ## Plugins: http://hexo.io/plugins/
    #RSS订阅
    plugin:
    - hexo-generator-feed
    #Feed Atom
    feed:
    type: atom
    path: atom.xml
    limit: 20

    ========================================================================================
    添加CNZZ站长统计代码
    ========================================================================================
    vim hemesNextlayout\_partialsfooter.swig

    <div style="display:none">
    <script src="https://s19.cnzz.com/z_stat.php?id=1274884885&web_id=1274884885" language="JavaScript"></script>
    </div>

    ========================================================================================
    给网站底部添加运行时间
    ========================================================================================
    在 /themes/Next/layout 文件夹下找到你的 footer 文件,即脚布局文件,在对应的位置添加代码

    <span id="timeDate">本站已运行: </span>

    <script>
    var seconds = 1000;
    var minutes = seconds * 60;
    var hours = minutes * 60;
    var days = hours * 24;
    var years = days * 365;
    var birthDay = Date.UTC(2009,11,04,00,00,00); // 这里设置建站时间
    setInterval(function() {
    var today = new Date();
    var todayYear = today.getFullYear();
    var todayMonth = today.getMonth()+1;
    var todayDate = today.getDate();
    var todayHour = today.getHours();
    var todayMinute = today.getMinutes();
    var todaySecond = today.getSeconds();
    var now = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
    var diff = now - birthDay;
    var diffYears = Math.floor(diff/years);
    var diffDays = Math.floor((diff/days)-diffYears*365);
    var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours);
    var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes);
    var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds);
    document.getElementById('timeDate').innerHTML="本站已运行: "+diffYears+"年 "+diffDays+"天 "+diffHours+"小时 "+diffMinutes+"分钟 "+diffSeconds+"秒";
    }, 1000);
    </script>

    ========================================================================================
    neat 博文压缩功能,npm install hexo-neat --save (主页config.yml添加以下内容)/与live2D冲突
    ========================================================================================
    neat_enable: true
    # 压缩html
    neat_html:
    enable: true
    exclude:
    # 压缩css
    neat_css:
    enable: true
    exclude:
    - '**/*.min.css'
    # 压缩js
    neat_js:
    enable: true
    mangle: true
    output:
    compress:
    exclude:
    - '**/*.min.js'
    - '**/jquery.fancybox.pack.js'
    - '**/index.js

    ========================================================================================
    # 是否开启看板娘Live2D插件
    ========================================================================================
    live2d:
    enable: true
    scriptFrom: local
    model:
    use: live2d-widget-model-ela
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    display:
    superSample: 2
    300
    height: 290
    position: left
    hOffset: 0
    vOffset: -10
    mobile:
    show: true
    scale: 0

    ========================================================================================
    另类文献
    ========================================================================================
    #cnblogs_post_body h2 {
    font-size: 28px;
    font-weight: bold;
    background-color: #5531e4;
    border-radius: 5px;
    color: #fff;
    padding-left: 8px;
    text-shadow: 1px 1px 1px #000;
    }
    #cnblogs_post_body h3 {
    background: #005f96;
    border-radius: 100px 6px 100px 6px;
    box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    color: #FFFFFF;
    font-family:"微软雅黑", "宋体", "黑体", Arial;
    font-size: 15px;
    font-weight: bold;
    height: 30px;
    line-height: 20px;
    margin: 12px 0 !important;
    padding: 5px 0 5px 10px;
    text-shadow: 2px 2px 3px #222222;
    }
    #MySignature {
    border: solid 1px #169fe6;
    padding: 10px;
    background: rgba(47, 180, 220, 0.24) url(//images.cnblogs.com/cnblogs_com/grenet/226272/o_o_o_info.png) no-repeat scroll 15px 50%;
    padding-left: 80px;
    }
    #MySignature div{line-height: 25px;}

  • 相关阅读:
    OCP-1Z0-053-200题-36题-615
    Android换行符变成方框的解决方法
    OCP-1Z0-053-200题-35题-614
    FusionCharts 3D帕累托图
    FusionCharts 3D帕累托图报错
    FusionCharts 2D帕累托图
    OCP-1Z0-053-200题-33题-612
    OCP-1Z0-053-V13.02-612题
    OCP-1Z0-053-200题-32题-611
    OCP-1Z0-053-V13.02-611题
  • 原文地址:https://www.cnblogs.com/csnd/p/11463019.html
Copyright © 2011-2022 走看看