精华内容
下载资源
问答
  • Hexo主题Next优化

    2021-03-20 22:45:01
    然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<divclass=“headband”>的下面),并把href改为你的github地址 添加RSS 切换到你的blog(我是取名blog,具体的看你们的取名是什么)的...

    实现fork me on github

    去网址https://github.com/blog/273-github-ribbons挑选自己喜欢的样式,并复制代码

    然后粘贴刚才复制的代码到themes/next/layout/_layout.swig文件中(放在<divclass=“headband”>的下面),并把href改为你的github地址

    添加RSS

    切换到你的blog(我是取名blog,具体的看你们的取名是什么)的路径,也就是在你的根目录下

    然后安装 Hexo 插件

    $ npm install --save hexo-generator-feed
    

    站点配置文件里面的末尾添加:(请注意在冒号后面要加一个空格,不然会发生错误!)

    # Extensions
    ## Plugins: http://hexo.io/plugins/
    plugins: hexo-generate-feed
    

    然后打开next主题文件夹里面的_config.yml,在里面配置为如下样子:(就是在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

    # Set rss to false to disable feed link.
    # Leave rss as empty to use site's feed link.
    # Set rss to specific value if you have burned your feed already.
    rss: /atom.xml
    

    配置完之后运行:

    $ hexo g
    

    修改文章底部标签样式

    修改模板/themes/next/layout/_macro/post.swig,搜索 rel=“tag”>#,将 # 换成

    添加“本文结束”标记

    在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容:

    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
        {% endif %}
    </div>
    

    接着打开\themes\next\layout_macro\post.swig文件,在post-body 之后, post-footer 之前添加如下代码(post-footer之前两个DIV):

    <div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>
    

    然后打开主题配置文件(_config.yml),在末尾添加:

    # 文章末尾添加“本文结束”标记
    passage_end_tag:
      enabled: true
    

    网站底部字数统计

    切换到根目录下,然后运行如下代码

    $ npm install hexo-wordcount --save
    

    然后在/themes/next/layout/_partials/footer.swig文件尾部加上

    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
    </div>
    

    绑定域名

    只需三步就可以绑定:
    
    - ping你的http://github.io域名,得到一个IP;
    
    - 修改你的域名解析记录,添加一个A记录,用得到的IP;
    
    - 登录http://github.com>进入项目>Settings>Custom domain>输入你的域名>Save。
    
    

    实现统计功能

    在根目录下安装 hexo-wordcount,运行:

    $ npm install hexo-wordcount --save
    

    然后在主题的配置文件中,配置如下:

    # Post wordcount display settings
    # Dependencies: https://github.com/willin/hexo-wordcount
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true
    

    文章加密访问

    打开themes->next->layout->_partials->head.swig文件,在以下位置插入这样一段代码:

    <script>
        (function(){
            if('{{ page.password }}'){
                if (prompt('请输入文章密码') !== '{{ page.password }}'){
                    alert('密码错误!');
                    history.back();
                }
            }
        })();
    </script>
    

    然后在文章头部上添加:

    password: password
    

    添加jiathis分享

    在主题配置文件中jiathis为true,就行了

    如果你想自定义话,打开themes/next/layout/_partials/share/jiathis.swig修改

    添加菜单页

    使用git命令hexo new page “Books” 就直接创建了source\books\index.md文件

    我们可以在主题配置的_config文件下找到相应的字段,字段前加# 表示被注释掉,我们也可以自己添加menu的内容,新增 books,后面的 || book代表菜单的图标

    hexo集成了FontAwsome 所以我们只需要在主题的配置文件中加入相应的icon名字即可 FontAwsome官网 然后鼠标往下拉,在图标集中选择自己喜欢的icon,然后记住名字,保存在上面的menu_icon字段中就可以啦

    books: /books/ || book
    

    在language添加en.ym翻译字段

    设置网站的图标Favicon

    找一张(32*32)的ico图标, 推荐网站阿里巴巴矢量图标库,并将图标名称改为favicon.ico,然后把图标放在/themes/next/source/images里,并且修改主题配置文件:

    favicon:
      small: /images/favicon.ico
      medium: /images/favicon.ico
      apple_touch_icon: /images/favicon.ico
      safari_pinned_tab: /images/logo.svg
    
    展开全文
  • hexo 主题 next7.8 版本配置美化

    千次阅读 2020-05-06 16:31:33
    网上next主题的配置大多为next5.+或next6.+,在最新版本中对之前的版本进行了高度的插件化,许多功能都集成在主题配置文件中,同时之前自定义样式配置文件的路径也有所改变,针对于此写下自己的配置记录

    hexo 主题 next7.8 版本配置美化

    网上next主题的配置大多为next5.+或next6.+,在最新版本中对之前的版本进行了高度的插件化,许多功能都集成在主题配置文件中,同时之前自定义样式配置文件的路径也有所改变,针对于此写下自己的配置记录

    设置博主文字描述和中文语言

    站点配置文件修改site

        title: Kali
        subtitle: IT博客
        description: 没有目的,就做不成任何事情
        keywords:
        author: KaliAlbert
        language: zh-CN
        timezone: Asia/Shanghai
    

    设置next主题和主题样式

    站点配置文件

    theme: next
    

    主题配置文件

    #Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini
    

    设置首页不显示全文

    主题配置文件修改:

    excerpt accurately.
    auto_excerpt:
    enable: true
    length: 150
    

    设置博客文章持久化连接

    安装hexo-abbrlink这个插件

    npm install hexo-abbrlink --save
    

    站点配置文件修改permalink添加如下内容

    permalink: post/:abbrlink.html
    abbrlink:
      alg: crc32  
      rep: hex    
    

    Menu增加关于、标签、分类页面

    站点配置文件修改menu

    将about、tags、categories前的#号去掉,示例如下:

    menu:
      home: / || fa fa-home
      about: /about/ || fa fa-user
      tags: /tags/ || fa fa-tags
      categories: /categories/ || fa fa-th
    

    新建相关页面

    hexo new page "about"
    hexo new page "tags"
    hexo new page "categories"
    

    修改生成页面的配置

    source\about\index.md
    source\tags\index.md
    source\categories\index.md

    ---
    title: 关于
    type: "about"
    ---
    ---
    title: 标签
    type: "tags"
    ---
    ---
    title: 分类
    type: "categories"
    ---
    

    添加搜索功能

    安装exo-generator-searchdb这个插件

    npm install hexo-generator-searchdb --save
    

    站点配置文件添加并修改local_search

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
    local_search:
      enable: true
    

    设置背景图片和透明度

    修改主题配置文件中的custom_file_path

    custom_file_path:
      #head: source/_data/head.swig
      #header: source/_data/header.swig
      #sidebar: source/_data/sidebar.swig
      #postMeta: source/_data/post-meta.swig
      #postBodyEnd: source/_data/post-body-end.swig
      #footer: source/_data/footer.swig
      #bodyEnd: source/_data/body-end.swig
      #variable: source/_data/variables.styl
      #mixin: source/_data/mixins.styl
      style: source/_data/styles.styl
    

    在博客主站目录下的source文件夹下新建_data文件夹并添加styles.styl文件

    在styles.styl中添加如下内容

    url中可以添加本地图片资源
    在next主题的source中新建assets目录图片资源放在其中

    body {
        background:url(/assets/background.jpg);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%;
        opacity: 0.8;
        //可选
        +mobile(){
          //background-position: 0% -20%;https://i.loli.net/2018/12/29/5c270a0523154.jpg
          //https://i.loli.net/2018/12/29/5c270fc2bfcad.png
          background-image: url(https://ziyuan.lruihao.cn/images/bg_cell.png);
          background-size: cover;
        }
    }
    

    设置canvas_ribbon动态背景

    进入到 NexT 主题目录下

    安装模块到 source/lib 目录下

    git clone https://github.com/theme-next/theme-next-canvas-ribbon source/lib/canvas-ribbon
    

    编辑主题配置文件,启用 canvas_ribbon 模块,如下:

    canvas_ribbon:
      enable: true
      size: 300
      alpha: 0.6
      zIndex: -1
    

    设置左上角或右上角 github 图标

    主题配置文件,启用 github-banner 如下:

    github_banner:
      enable: true
      permalink: https://https://github.com/KaliAlbert
      title: Follow me on GitHub
    
    

    设置侧栏阅读进度百分比

    编辑站点配置文件,修改 back2top 部分如下

    back2top:
      enable: true
      sidebar: true
      scrollpercent: true
    

    设置阅读位置标记功能

    进入到 NexT 主题目录下

    安装模块到 source/lib 目录下:

    git clone https://github.com/theme-next/theme-next-bookmark.git source/lib/bookmark
    

    编辑主题配置文件,启用 bookmark 模块,如下:

    bookmark:
      enable: true
      save: auto
    

    设置字数统计和预计阅读时间

    进入到博客主站目录下,安装 Hexo 插件:

    npm install hexo-symbols-count-time --save
    

    编辑站点配置文件,添加如下内容:

    symbols_count_time:
      symbols: true 
      time: true 
      total_symbols: true 
      total_time: true 
    

    此插件集成在 NexT 主题中,在 Hexo 站点配置文件中启用插件后,你可以调整 NexT 配置中的选项,查看主题配置文件,配置如下:

    symbols_count_time:
      separated_meta: true 
      item_text_post: true 
      item_text_total: true 
      awl: 2
      wpm: 275
    

    添加文章分享按钮

    进入到 NexT 主题目录下

    安装模块到 source/lib 目录下:

    git clone https://github.com/theme-next/theme-next-needmoreshare2 source/lib/needsharebutton
    

    编辑主题配置文件,添加 needmoreshare2 模块,如下:

    needmoreshare2:
      enable: true
      postbottom:
        enable: true
        options:
          iconStyle: default
          boxForm: horizontal
          position: bottomCenter
          networks: Weibo,Wechat,Douban,QQZone
      float:
        enable: false
        options:
          iconStyle: default
          boxForm: horizontal
          position: middleRight
          networks: Weibo,Wechat,Douban,QQZone
    

    设置网页底部信息

    查看主题配置文件,修改 footer 配置如下:

    zixingguankan
    

    网站底部添加网站运行时间

    修改主题下layout_partials\footer.swig,并添加内容如下:

        <!-- 网站运行时间的设置 -->
        <span id="timeDate">载入天数...</span>
        <span id="times">载入时分秒...</span>  Sometimes your whole life boils down to one insame move.
        <script>
            var now = new Date();
            function createtime() {
                var grt= new Date("01/05/2020 00:00:00");//此处修改你的建站时间或者网站上线时间
                now.setTime(now.getTime()+250);
                days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
                hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
                if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
                mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
                seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
                snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
                document.getElementById("timeDate").innerHTML = "本站已安全运行 "+dnum+" 天 ";
                document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
        }
        setInterval("createtime()",250);
        </script>
    

    添加自定义404页面

    hexo new page 404
    

    编辑新建的页面文件,默认在站点根目录下 /source/404/index.md,在 front-matter 中添加 permalink: /404,表示指定该页面固定链接为 http://“主页”/404.html

        ---
        title: 404
        comments: false
        permalink: /404
        ---
    
        <center>404 Not Found
        对不起,您所访问的页面不存在或者已删除
        [点击此处](https://kalialbert.github.io/)返回首页
        </center>
    
        * 我的Github:[https://kalialbert.github.io/](https://kalialbert.github.io/)
    

    添加图片放大预览功能

    在主题配置文件,启用 fancybox,修改配置如下:

    fancybox: true
    

    图片懒加载设置

    在主题配置文件中启用lazyload

    lazyload: true
    

    点击出现桃心效果(可选)

    在主题/source/js/下新建文件 clicklove.js,添加内容如下

        !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
    

    修改_layout.swig

    在主题\layout_layout.swig文件末尾添加:

        <!-- 页面点击小红心 -->
        <script type="text/javascript" src="/js/clicklove.js"></script>
    

    主页文章添加置顶图标(可选)

    修改主题的/layout/_macro/post.swig 文件,在

        {% if post.top %}
        <i class="fa fa-thumb-tack"></i>
        <font color=7D26CD>{{ __('post.sticky') }}</font>
        <span class="post-meta-divider">|</span>
        {% endif %}
    
    

    标签云特效(可选)

    npm install hexo-tag-cloud@^2.0.* --save 
    

    在主题文件夹找到文件 theme/next/layout/_macro/sidebar.swig, 然后在back2top.sidebar上方添加如下代码

        {% if site.tags.length > 1 %}
        <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
        <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
        <div class="widget-wrap">
            <h3 class="widget-title">Tag Cloud</h3>
            <div id="myCanvasContainer" class="widget tagcloud">
                <canvas width="250" height="250" id="resCanvas" style="width=100%">
                    {{ list_tags() }}
                </canvas>
            </div>
        </div>
        {% endif %}
    

    在主站配置文加下添加内容如下

    # hexo-tag-cloud
    tag_cloud:
        textFont: Trebuchet MS, Helvetica
        textColor: '#333'
        textHeight: 25
        outlineColor: '#E2E1D1'
        maxSpeed: 0.1 
    

    主页文章添加阴影效果

    在source/_data/styles.styl中添加内容如下

    .post {
       margin-top: 60px;
       margin-bottom: 60px;
       padding: 25px;
       -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
       -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
    }
    

    设置代码块复制和代码高亮

    在主题配置文件中修改codeblock

    codeblock:
      highlight_theme: normal
      copy_button:
        enable: true
        show_result: true
        style:
    

    网站侧栏背景及主副标题颜色

    在主站source/_data/styles.styl中添加内容如下

    //题头
    .site-meta {
        background: $blue; 
    }
    //主标题颜色
    .brand{
        color: #4dfc23
    }
    //副标题颜色
    .site-subtitle{
        color: #4dfc23
    }
    

    修改文章内链接文本样式

    打开文件 /themes/next/source/css/_common/components/post/post.styl,在末尾添加以下

    .post-body p a{
      color: #0593d3;
      border-bottom: none;
      border-bottom: 1px solid #0593d3;
      &:hover {
        color: #fc6423;
        border-bottom: none;
        border-bottom: 1px solid #fc6423;
      }
    }
    

    修改文章底部标签样式

    在主题配置文件中修改

    tag_icon: true
    

    在文章末尾添加“文章结束”标记

    在主题/layout/_macro 下新建 passage-end-tag.swig 文件,并添加以下代码

        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束 <i class="fa fa-heart"></i> 感谢阅读-------------</div>
    

    打开 /themes/next/layout/_macro/post.swig 文件,在 END POST BODY 后面引入 passage-end-tag.swig,如下

        {#####################}
        {### END POST BODY ###}
        {#####################}
        {% if theme.passage_end_tag.enable and not is_index %}
        {% include 'passage-end-tag.swig' %}
        {% endif %}
    

    在主题配置文件 _config.yml 的末尾添加以下配置

    passage_end_tag:
      enable: true
    

    修改分类页面样式

    在主站source/_data/styles.styl中添加内容如下

    // 分类&&标签 页面样式
    .post-block.page {
        margin-top: 40px;
    }
    // 分类页面page
    .category-all-page {
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        background-color: #797D7F;
        padding: 20px 30px 60px 30px;
        border-radius: 25px 25px 25px 25px;
    }
    .category-all-title {
        font-family: Impact;
        font-size: 24px;
        color: aqua;
    }
    .category-list {
        overflow: auto;
    }
    .category-list li {
        height: 100%;
        float: left;
        border-right: 3px solid #222;
        padding: 0 20px;
    }
    .category-all ul li {
        list-style: none!important;
    }
    .category-list li:last-child {
        border-right: none;
    }
    .category-list li a {
        font-size: 16px;
        text-decoration: none;
        color: chartreuse;
        font-family: Helvetica, Verdana, sans-serif;
        // text-transform: uppercase;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    .category-list li a:hover {
        color: black;
    }
    .category-list li.active a {
        font-weight: bold;
        color: black;
    }
    

    设置头像

    在站点配置文件下修改avatar

    网站底部加上访问量

    打开主题的配置文件/theme/next/_config.yml,找到如下配置busuanzi_count(不蒜子)启用

    busuanzi_count:
      enable: true
    

    修改不蒜子颜色

    在主站source/_data/styles.styl中添加

    // 修改不蒜子数据颜色
    #busuanzi_value_site_pv,#busuanzi_value_site_uv{
      color: #00BFFF;
    }
    

    网站底部添加动态桃心

    修改主题配置文件中icon

    icon:
        name: fa fa-heart 
        animated: true 
        color: "#ff0000" 
    

    网站底部添加备案信息(可选)

    在主题\layout_partials\footer.swing下添加

        <div class="BbeiAn-info" style="color:#4dfc23">
            {{ __('鄂ICP备') }} -
            <a target="_blank" href="http://www.miitbeian.gov.cn/" style="color:#4dfc23;"  rel="nofollow">18025394</a> <!--a标签中增加nofollow属性,避免爬虫出站。-->| 
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42090202000295" style="text-decoration:none;color:#4dfc23;padding-left:30px;background:url(https://s1.ax1x.com/2018/09/29/ilmwIH.png) no-repeat left center" rel="nofollow">{{ __('鄂公网安备 42090202000295') }}</a>    <!--这里将图标作为了背景,以使得能和后面的文字在同一行-->
        </div>
    

    侧边栏社交链接

    修改主题配置文件

    social:
      GitHub: https://github.com/KaliAlbert || fab fa-github
      E-Mail: 172468103@qq.com || fa fa-envelope
      Bili: https://space.bilibili.com/15071276 || fa fa-tv
    

    添加侧栏友情链接

    在主题配置文件中修改Blog rolls

    links_settings:
      icon: fa fa-link
      title: Friend Links
      layout: inline
      
    links:
      V2EX: https://www.v2ex.com/
      #Title: http://yoursite.com
    

    在文章底部增加版权信息

    编辑 主题配置文件,修改如下配置:

    creative_commons:
      license: by-nc-sa
      sidebar: true
      post: true
      language:
    

    关于页面样式的修改,回顶部按钮样式、底部页码等等

    在博客主站\source_data\styles.styl中添加内容如下

    //TOC目录全部展开
    .post-toc.nav.nav-child {
      display: block;
    }
    //TOC目录不显示三级以上目录
    .nav-level-3.nav-child {
      display: none !important;
    }
    
    // 右下角返回顶部按钮样式
    .back-to-top:hover {
        color: rgb(136, 255, 13);
    	background-color: rgba(0, 0, 0, 0.75); //black
    }
    
    // 文章代码块顶部样式
    .highlight figcaption {
        margin: 0em;
        padding: 0.5em;
        background: #eee;
        border-bottom: 1px solid #e9e9e9;
    }
    .highlight figcaption a {
        color: rgb(80, 115, 184);
    }
    
    //代码块复制按钮
    .highlight{
      //方便copy代码按钮(btn-copy)的定位
      position: relative;
    }
    .btn-copy {
        display: inline-block;
        cursor: pointer;
        background-color: #eee;
        background-image: linear-gradient(#fcfcfc,#eee);
        border: 1px solid #d5d5d5;
        border-radius: 3px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-appearance: none;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        color: #333;
        -webkit-transition: opacity .3s ease-in-out;
        -o-transition: opacity .3s ease-in-out;
        transition: opacity .3s ease-in-out;
        padding: 2px 6px;
        position: absolute;
        right: 5px;
        top: 5px;
        opacity: 0;
    }
    .btn-copy span {
        margin-left: 5px;
    }
    .highlight:hover .btn-copy{
      opacity: 1;
    }
    
    //修改文章内code样式
    code {color:#c7254e;background:#f9f2f4;border:1px solid #d6d6d6;}
    
    // [Read More]按钮样式: 黑底绿字
    .post-button .btn:hover {
    	
        color: rgb(136, 255, 13) !important;
    	background-color: rgba(0, 0, 0, 0.75); //black
    }
    
    // 页面底部页码
    .pagination .page-number.current {
    	
        border-radius: 100%;
        background-color: rgba(100, 100, 100, 0.75);
    }
    // 页面底部页码, 去除鼠标置于上方时,数字上方的线
    .pagination .prev, .pagination .next, .pagination .page-number {
        margin-bottom: 10px;
        border: none;
    	color: rgb(1, 1, 1);
    }
    
    // 页面底部页码,鼠标置于上方,黑底绿字
    .page-number:hover,.page-number:active{
    	color: rgb(136, 255, 13);
    	border-radius: 100%;
        //background-color: rgba(255, 0, 100, 0.75); //品红
    	background-color: rgba(0, 0, 0, 0.75); //black
    }
    

    链接:

    如果想要看到相关的效果,参看我的博客
    Kali的博客.
    后续会不断更新主题的美化配置

    参考资料

    Hexo站点及Next主题配置详解.
    Xu’s Blog.

    展开全文
  • Hexo 主题 的 Typecho 移植版。 新版本重构 计划与 Hexo 版本保持同步,支持所有的 Schemes,可通过主题设置配置: Next.Mist (以这个为基础) Next.Muse Next.Pisces Next.Gemini 正在做的: 代码格式化 去掉...
  • hexo主题next 7.X版本配置美化

    千次阅读 2019-05-26 15:55:00
    我们主要对next主题进行了如下配置操作。效果可以前往https://www.ipyker.com查看。 也可以前往https://github.com/ipyker/hexo-next-theme获取配置后的源文件。 设置中文语言 设置博主文字描述 设置博客...

    我们主要对next主题进行了如下配置操作。效果可以前往https://www.ipyker.com 查看。

    也可以前往https://github.com/ipyker/hexo-next-theme 获取配置后的源文件。

     

    • 设置中文语言
    • 设置博主文字描述
    • 设置博客文章连接为year/month/day/title.html格式
    • Menu增加关于、标签、分类、互动、搜索菜单
    • 禁用关于、标签、分类菜单评论功能
    • 添加添加RSS
    • 设置背景图片。默认禁用,可以在themes/nexT/source/css/_custom/custon.styl文件中启用
    • 设置Canvas_nest动态背景
    • 图片快速加载设置
    • 微信支付宝打赏功能
    • 点击出现桃心效果
    • 主页文章添加阴影效果
    • 设置代码高亮
    • 顶栏背景色
    • 底栏背景色
    • 在右上角实现红色的fork me on github。默认禁用,可以在themes/nexT/_config.yml文件github_banner键中启用
    • 添加添加RSS
    • 修改文章内链接文本样式
    • 修改文章底部标签样式
    • 在文章末尾添加“文章结束”标记
    • 设置头像
    • 网站底部加上访问量
    • 网站底部字数统计
    • 网站底部添加网站运行时间
    • 网站底部添加动态桃心
    • 网站底部添加备案信息
    • 底部隐藏由Hexo强力驱动、主题--NexT.Mist
    • 设置网站的图标Favicon
    • 实现文章文字统计功能和阅读时长
    • 添加来必力云跟帖功能。(需要自己注册获取ID)
    • 去掉底部重复字数统计
    • 修改字体大小
    • 添加DaoVoice在线联系。(需要自己注册获取ID)
    • 侧边栏社交小图标设置
    • 添加侧栏推荐阅读
    • 修改侧边栏背景图片
    • 修改侧边栏文字颜色
    • 在文章底部增加版权信息
    • Hexo博客添加站内搜索
    • 修改选中字符的颜色
    • 添加aplay音乐播放
    • 添加博客右下角卡通动漫

    转载于:https://www.cnblogs.com/harlanzhang/p/10926305.html

    展开全文
  • <div><p><img alt="image" src="https://img-blog.csdnimg.cn/img_convert/85fb7dbc1d30c8a877d8c2976774dbed.png" /></p>该提问来源于开源项目:gitalk/gitalk</p></div>
  • 最近想在博客主题中添加一个天气插件,在网上搜索一番以后选择了【心知天气】。实现在博客中预报天气的效果。 首先要去心知天气的官网,获取插件代码,具体方式可以参见【官方文档】。 我选择在博客的顶部导航处...

    最近想在博客主题中添加一个天气插件,在网上搜索一番以后选择了【心知天气】。实现在博客中预报天气的效果。
    在这里插入图片描述
    首先要去心知天气的官网,获取插件代码,具体方式可以参见【官方文档】。
    我选择在博客的顶部导航处添加天气信息,找到header.swig,具体位置为:themes\next\layout\_partials\header.swig。在文件的适当位置添加代码,我选择在logo的右侧添加,具体位置为:
    在这里插入图片描述
    插件代码如下:

      <div class="weather">
      <!-- 《添加“心知天气”-->
        <div id="tp-weather-widget"></div>
      <script>
        (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
        window.SeniverseWeatherWidget('show', {
          flavor: "slim",
          location: "WX4FBXXFKE4F",
          geolocation: true,
          language: "zh-Hans",
          unit: "c",
          theme: "auto",
          token: "efb760e3-5326-4f08-839b-122738249a17",
          hover: "enabled",
          container: "tp-weather-widget"
        })
      </script>
      <!-- 添加“心知天气”》-->
      </div>
    

    如果你希望在主题配置文件中,配置是否添加天气插件,代码就要改为:

      <div class="weather">
      <!-- 《添加“心知天气”-->
      {% if theme.xinzhi_weather %}
        <div id="tp-weather-widget"></div>
      <script>
        (function(a,h,g,f,e,d,c,b){b=function(){d=h.createElement(g);c=h.getElementsByTagName(g)[0];d.src=e;d.charset="utf-8";d.async=1;c.parentNode.insertBefore(d,c)};a["SeniverseWeatherWidgetObject"]=f;a[f]||(a[f]=function(){(a[f].q=a[f].q||[]).push(arguments)});a[f].l=+new Date();if(a.attachEvent){a.attachEvent("onload",b)}else{a.addEventListener("load",b,false)}}(window,document,"script","SeniverseWeatherWidget","//cdn.sencdn.com/widget2/static/js/bundle.js?t="+parseInt((new Date().getTime() / 100000000).toString(),10)));
        window.SeniverseWeatherWidget('show', {
          flavor: "slim",
          location: "WX4FBXXFKE4F",
          geolocation: true,
          language: "zh-Hans",
          unit: "c",
          theme: "auto",
          token: "efb760e3-5326-4f08-839b-122738249a17",
          hover: "enabled",
          container: "tp-weather-widget"
        })
      </script>
      {% endif %}
      <!-- 添加“心知天气”》-->
      </div>
    

    新增了一个if条件语句。同时也要在【主题配置文件中】,添加如下代码:

    # 心知天气(如果不用为false):https://www.seniverse.com
    xinzhi_weather: true
    

    在这里插入图片描述
    天气插件的具体位置和样式,可以在header.styl文件中进行修改,具体位置为:themes\next\source\css\_common\components\header\header.styl
    比如:

    .weather{
        float: left;
        margin: 8px 15px;
    }
    

    在这里插入图片描述
    具体效果参见我的博客:https://serena-tz.gitee.io/

    展开全文
  • 我的博客地址 https://limxrabbit.github.io 小小的记录一下下!
  • 主要内容:修改主题css样式、首页文章显示阅读全文、增加目录 ...next主题首页默认显示的是文章全部内容,大多数情况下这并不是我们希望的展现形式,可以通过如下方法设置阅读全文而只显示文章摘...
  • 原因是hexo在5.0之后把swig给删除了需要自己手动安装 npm i hexo-renderer-swig
  • hexo theme next7.8 主题美化

    千次阅读 2020-07-16 15:11:29
    hexo 主题 next7.8 版本配置美化 1. 下载主题 最简单的安装方式就是直接克隆整个仓库: # 进入你的博客目录 cd hexo # 将仓库复制到博客目录的 themes/next 文件夹中 git clone ...
  • 博客-Hexo-NexT 使用Hexo主题NexT建造的个人主页(源代码)
  • 与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后,打开 站点配置文件, 找到 theme 字段,并将其值更改为 next。 启用 NexT 主题 theme: next 当你看到站点的外观与下图所示类似时即说明你已成功安装 NexT ...
  • HexoHexo-NexT主题-博客搭建

    千次阅读 2020-12-14 11:38:09
    title: Hexo-NexT主题-博客搭建 date: 2020-02-14 13:49:27 tags: Hexo Next 生活 学习 categories: Hexo-NexT description: 为了记录我的大学生活的学习,在2020春节前决定搭建一个自己的博客来记录自己大学四年...
  • Hexo-next主题优化篇

    2021-04-23 20:14:31
    Hexo-next主题优化篇
  • 终端进入到博客目录,使用以下命令克隆 next 主题到 themes/next 目录下 git clone https://github.com/next-theme/hexo-theme-next.git themes/next 安装成功 更改博客目录下的 _config.yml 里的 theme 为 next ...
  • hexo_next主题

    2018-01-26 13:35:27
    Hexo 是高效的静态站点生成框架,她基于 Node.js。 通过 Hexo 你可以轻松地使用 Markdown 编写文章,除了 Markdown 本身的语法之外,还可以使用 Hexo 提供的 标签插件 来快速的插入特定形式的内容。在这篇文章中,...
  • 更改 主题配置文件,设定 rss 字段的值: false:禁用 RSS,不在页面上显示 RSS 连接。 留空:使用 Hexo 生成的 Feed 链接。 你可以需要先安装 hexo-generator-feed 插件。 具体的链接地址:适用于已经烧制过 Feed...
  • Hexo博客Next主题美化

    2020-05-12 13:38:01
    本文主要说明在Hexo博客nexT主题下如何进行美化,具体对应效果可通过博客页面(https://alderaan.xyz)进行查看。
  • hexonext主题设置

    2018-09-03 13:00:20
    hexonext主题设置 这篇文章主要说明的是怎么把hexo主题设成next,不涉及详细的优化。 安装主题 安装的过程就一行代码,进入博客根目录下面的themes文件夹,右键空白处git bash,出现命令行窗口输入以下命令...
  • 本文章配置环境是Hexo 3.8.0+`NexT 5.1.4,主题自身已经提供的功能,仅需要配置即可完成。 下一篇文章将讲解采用第三方插件的来实现不通的功能,同时更深入地讲解如何编写Hexo插件。 Hexo博客专题索引页 定义...
  • hexo+next主题美化

    2020-03-02 10:43:58
    1、设置 hexonext 主题 我们在站点的配置文件_config.yml 中找到 theme 后添加: theme: next # 配置成刚下载的next主题 2、配置 hexo 网站相关信息 我们在站点的配置文件_config.yml 中,修改: # Site title:...
  • hexonext主题添加分类

    万次阅读 2018-03-02 13:54:19
    hexonext主题添加分类 @(Hexo+Github) 当前博客主题用的是next最新版,最初是比较简陋的界面,一直放着没怎么动,测试了下Latex的显示效果没有达到在CSDN我的博客上的效果,就很失望,没再此地更新。 但是今年...
  • Hexo-next主题美化

    2018-11-25 18:52:07
    Hexo优点 个人认为Hexo博客搭建较为简单,适合...关于Next主题的美化教程众多,这里不一一介绍,我会再下面独立成章一些个人认为比较有用的美化教程,其余可参考以下博客: Hexo官方插件(官方即正统) hexonext...
  • Hexo-Next6.7.0主题优化

    2019-01-28 14:31:00
    Hexo-Next6.7.0主题优化 效果预览:Next6.7.0主题个人博客 一、下载next主题 $ cd your-hexo-site $ git clone https://github.com/iissnan/hexo-theme-next themes/next 二、使用next主题 在站点配置...
  • hexo使用next主题设置

    2020-05-30 15:07:26
    1.hexo4.0 - Next7.2.4 主题优化配置 2. Hexo博客优化之Next主题美化 用github+hexo搭建完个人博客后,朋友们应该很想知道怎么在上面写博文吧,这里介绍一个很简单的方法: 以md格式导出博客到本地,然后...
  • Hexo-Next主题优化

    2020-05-15 12:21:02
    只需修改主题配置文件 /themes/next/_config.yml # Canvas-nest canvas_nest: false # three_waves three_waves: false # canvas_lines canvas_lines: true 上面三个,想开哪个背景,就把哪.
  • NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化 本文主要介绍如何对NexT7.7.2版本的一些主题美化操作 点击我的博客可以查看一下我的样式。 NexT主题升级 我觉得太痛苦了,原来用的NexT5.1.x版本,发现很多网上的东西...
  • Hexo-next主题支持数学公式

    千次阅读 2019-11-29 21:07:24
    本文主要解决Hexo-next主题支持数学公式问题 更换Hexo的markdown渲染引擎 hexo-renderer-kramed引擎是在默认的渲染引擎,hexo-renderer-marked的基础上修改了一些bug,两者比较接近,也比较轻量级。 npm uninstall ...
  • NexT 是一个高质量并且优雅的Hexo 主题。这是精心制作做出来的 hexo 主题。 如果你对此主题非常喜欢,欢迎Star &amp;amp;amp;amp;amp;amp; Fork,非常感谢。 预览界面 首页 底部 相册 文章 搜索 安装 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,101
精华内容 1,240
关键字:

hexo主题next