精华内容
下载资源
问答
  • hexo next主题

    2018-06-29 17:12:31
    hexo搭建博客的next主题下载,赶紧下载吧,积分已经设最低了
  • NexT主题升级以及hexo4.2.0 NexT7.7.2主题美化 本文主要介绍如何对NexT7.7.2版本的一些主题美化操作 点击我的博客可以查看一下我的样式。 NexT主题升级 我觉得太痛苦了,原来用的NexT5.1.x版本,发现很多网上的东西...

    本文主要介绍如何升级NexT版本以及对NexT7.7.2版本的一些主题美化操作

    点击我的博客可以查看一下我的样式。

    NexT主题升级

    我觉得太痛苦了,原来用的NexT5.1.x版本,发现很多网上的东西不能用,然后就在从v5.1.x升级这个介绍进行了升级。直接升级到v7

    在blog根目录下输入:

    git clone https://github.com/theme-next/hexo-theme-next themes/next-reloaded

    这个指令下载最新的v7.7.2版本(今天是2020.3.29)到名字为next-reloaded的文件中

    然后在修改站点配置文件:

    theme: next-reloaded

    这一版本需要注意,中文由原来的zh-Hans变成了zh-CN

    最后 hexo s --debug

    就是全新版本了,很多东西需要重新配置了,尤其是原来/next/source/css/这个文件下很多东西都没了已经没有了,似乎都是统一到根目录下的source中了,我也没有太搞清楚。下文有实际案例具体介绍。

    主题优化

    说在前面:v7.7.2版本的很多东西都集成好了,可以直接在_config.yml进行true/false选择即可,只要仔细读读每一项的注释,很快就能配置好了。

    下面一部分有关主题优化的是我觉得我读注释不太能理解的,以及注释没有提到的,当然后续可能也会更新一些新的主题优化相关的内容

    查看Hexo博客NexT版本

    在主题文件中找到package.json可以看到

    给文章添加阴影效果

    首先主题配置文件取消如下代码的注释

     style: source/_data/styles.styl
    

    在 blog/source/_data下创建 styles.styl文件,_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);
    }
    

    但是目前来看只有阅读文章的时候会出现阴影效果不知道为什么主页没有这个效果

    给文章添加 本文结束 标记

    首先主题配置文件取消如下代码的注释

     postBodyEnd: source/_data/post-body-end.swig
    

    在 blog/source/_data下创建post-body-end.swig文件,(_data文件也是我手动创建的)在post-body-end.swig文件中添加如下内容:

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

    效果如图:

    image-20200329215844684

    阅读全文按钮颜色设置

    首先主题配置文件取消如下代码的注释

    variable: source/_data/variables.styl
    

    在 blog/source/_data下创建variables.styl文件,(_data文件也是我手动创建的)在variables.styl文件中添加如下内容:

    // Buttons
    // --------------------------------------------------
    $btn-default-bg                 = white;
    $btn-default-color              = #006762;
    $btn-default-font-size          = $font-size-small;
    $btn-default-border-width       = 2px;
    $btn-default-border-color       = #006762;
    $btn-default-hover-bg           = #456f95;
    $btn-default-hover-color        = white;
    $btn-default-hover-border-color = #456f95;
    

    效果如图:

    image-20200329221901928

    如何添加文章版权

    在主题配置文件找到creative_commons, 设置post为true,其中sidebar根据自己喜好选择

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

    文章目录不自动编号

    在主题配置文件中找到toc并设置number属性为false

    网页底部的动态桃心图像

    在主题配置文件中找到下面内容,设置其中animated为true

     icon:
     		 name: user
         animated: true
    	   color: "#006762"
    

    效果就是扑通扑通的跳动心脏


    今天到此结束啦,累死了,搞了大半天,太痛苦。后续可能会继续更新

    展开全文
  • next主题优化

    2019-03-30 09:55:25
    NEXT主题安装 下载next主题 $ cd your-hexo-site` $ git clone https://github.com/iissnan/hexo-theme-next themes/next 修改站点配置文件 找到hexo中的_config.yml文件 # Extensions ## Plugins: ...

    NEXT主题安装

    下载next主题

    $ cd your-hexo-site`
    $ git clone https://github.com/iissnan/hexo-theme-next themes/next
    

    修改站点配置文件

    找到hexo中的_config.yml文件

    # Extensions
    ## Plugins: http://hexo.io/plugins/
    ## Themes: http://hexo.io/themes/
    theme: landscape
    

    至此,NexT主题就安装好了,非常方便,在Hexo中切换主题只需修改站点配置文件中theme属性来配置,想换就换。

    选择Scheme

    next通过scheme提供主题中的主题。

    # Schemes
    scheme: Mist  #去掉默认的注释即可切换为Mist主题
    

    我的博客使用的为mist主题

    菜单设置

    next主题的菜单设置,用于设置博客上方导航栏可以在主题配置中进行修改。

    menu:
      home: /                       #主页
      categories: /categories	#分类页(需手动创建)
      #about: /about		#关于页面(需手动创建)
      archives: /archives		#归档页
      tags: /tags			#标签页(需手动创建)
      #commonweal: /404.html        #公益 404 (需手动创建)
    

    但要注意只在menu选项中设置不能让标签页生效,这些页面需要我们手动创建。

    标签页面

    运行hexo new page "tags"可在/source目录下生成一个tags文件,里面包含有index.md文件这时把上方的tags注释掉,在平时建的博客中加入tags就会形成分类,在标签页可以看到。

    分类页面

    与标签页面同理,但要创建的是categories。

    侧边头像设置

    在主题配置文件中找到_config.yml,搜索avatar字段,增加avatar: /images/avatar.png可以使用本地字段但要注意图片名称。

    设置头像边框为圆形

    打开位于themes/next/source/css/_common/components/sidebar/sidebar-author.syl文件修改为

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
     // 修改头像边框
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
    }
    

    特效:鼠标放置头像上旋转

    .site-author-image {
      display: block;
      margin: 0 auto;
      padding: $site-author-image-padding;
      max-width: $site-author-image-width;
      height: $site-author-image-height;
      border: $site-author-image-border-width solid $site-author-image-border-color;
     // 修改头像边框
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      // 设置旋转
      transition: 1.4s all;
    }
    // 可旋转的圆形头像,`hover`动作
    .site-author-image:hover {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -transform: rotate(360deg);
    }
    

    侧边栏设置

    设置侧边栏社交连接

    打开_config.yml文件搜索social,添加社交站点名称与地址即可。

    # ---------------------------------------------------------------
    # Sidebar Settings
    # ---------------------------------------------------------------
    
    # Social Links.
    # Usage: `Key: permalink || icon`
    # Key is the link label showing to end users.
    # Value before `||` delimeter is the target permalink.
    # Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
    social:
      E-Mail: mailto:yourname@gmail.com || envelope
      Google: https://plus.google.com/yourname || google
      Twitter: https://twitter.com/yourname || twitter
      FB Page: https://www.facebook.com/yourname || facebook
      # 等等
    

    设置侧边栏社交图标

    在_config.yml中搜索social_icons,添加社交站点名称(注意大小写)图标,可以全网图标下载找图标地,非常方便。

    友情链接

    打开_config.yml搜索Blog rolls

    # Blog rolls
    links_title: 友情链接 #标题
    links_layout: block #布局,一行一个连接
    #links_layout: inline
    links: #连接
      baidu: http://example.com/
      google: http://example.com/
    

    代码块自定义样式

    // Custom styles.
    code {
        color: #ff7600;
        background: #fbf7f8;
        margin: 2px;
    }
    // 边框的自定义样式
    .highlight, pre {
        margin: 5px 0;
        padding: 5px;
        border-radius: 3px;
    }
    .highlight, code, pre {
        border: 1px solid #d6d6d6;
    }
    

    在右上或左上实现fork me on github

    选择样式github-ribbons注意修改<a href="https://github.com/you">将这里换为你自己的GitHub主页。打开themes/next/layout/_layout.swig文件,把代码复制到<div class="headband"></div>下面。

    文章顶部显示更新时间

    打开_config.yml,搜索update_at设置为true:

    # Post meta display settings
    post_meta:
      item_text: true
      created_at: true
      updated_at: ture
      categories: true
    

    有空续更。

    展开全文
  • Next主题美化

    2019-09-16 11:58:38
    写作目的 网上关于Hexo的主题美化的博客已经很多也很全面了,但是在作者去一一尝试的时候,却发现有很多博客中提供的方法...Hexo支持很多主题风格,Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的...

    写作目的

    网上关于Hexo的主题美化的博客已经很多也很全面了,但是在作者去一一尝试的时候,却发现有很多博客中提供的方法现在已经不支持或者过时了,为了避免大家和作者一样花费大量时间去一一尝试,所以作者考虑再三,决定将自己尝试过可靠的方法记录下来,与大家一起学习进步。

    一、Next主题美化

    Hexo支持很多主题风格,Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,其一直在更新维护,支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本,下面我会介绍基于Next6主题的界面美化手法。

    1、Next主题安装配置

    Next主题配置安装方式很简单,只需要执行两步:

    $ cd hexo文件目录
    $ git clone https://github.com/theme-next/hexo-theme-next themes/next

    然后设置站点配置文件_config.yml:

    $ theme: next

    即可将我们的Hexo博客主题替换为Next主题。

    2、主题简单配置

    Next主题主要分为四种scheme,可以在主题文件的_config.yml文件中进行选择,分别是Muse、Mist、Pisces、Gemini;作者主要选用的是Gemini风格,效果如下:

    3、Next常规配置

    3.1、个人信息配置

    在站点的_config.yml文件中进行配置:

    title: 可乐&博客
    subtitle: 生于忧患,死于安乐
    description: 看得懂的书,请仔细看;看不懂的书,请硬着头皮看。
    keywords:
    author: 张泉
    language: zh-CN # 主题语言
    timezone: Asia/Shanghai #中国的时区,不要乱改城市

    3.2、头像配置

    将头像放置在themes/next/source/images/中,然后在主题中打开_config.yml文件中进行配置:

    avatar:
      # In theme directory (source/images): /images/avatar.gif
      # In site directory (source/uploads): /uploads/avatar.gif
      # You can also use other linking images.
      url: /images/avatar.png #将我们的头像图片放置在blog/themes/next/source/images目录下,填写具体地址
      # If true, the avatar would be dispalyed in circle.
      rounded: true #鼠标放在头像上时是否旋转
      opacity: 1 #头像放缩指数
      # If true, the avatar would be rotated with the cursor.
      rotated: true #头像是否设为圆形,否则为矩形

    3.3 其它常规配置

    # Table Of Contents in the Sidebar
    toc:
      enable: true #是否自动生成目录
      # Automatically add list number to toc.
      number: false #目录是否自动产生编号
      # If true, all words will placed on next lines if header width longer then sidebar width.
      wrap: false #标题过长是否换行
      # Maximum heading depth of generated toc. You can set it in one post through `toc_max_depth` var.
      max_depth: 6 #最大标题深度
    # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
      offset: 12 #侧边栏相对主菜单像素距离
      # Back to top in sidebar.
      b2t: true #是否提供一键置顶
      # Scroll percent label in b2t button.
      scrollpercent: true #是否显示当前阅读进度
      # Enable sidebar on narrow view (only for Muse | Mist).
      onmobile: false #手机上是否显示侧边栏

    3.4、菜单栏配置

    (1)在主题中打开_config.yml文件中进行配置:

    menu:
      home: / || home
      # about: /about/ || user
      tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat

    (2)系统自动帮我们创建了home和archives页面,所以我们只需要使用终端创建tags和categories页面即可:

    $ cd hexo文件目录
    $ hexo new page "tages"
    $ hexo new page "categories"

    (3)创建好的页面在站点sources中,我们需要对相关页面进行type修改:

    ---
    title: 分类
    date: 2019-09-11 14:14:50
    type: "categories"
    ---
    ---
    title: 标签
    date: 2019-09-11 14:14:28
    type: "tags"
    ---

    (4)在我们写的博客页面中进行相关参数的配置:

    ---
    title: 手把手教你使用Hexo搭建github个人博客
    date: 2019-09-11 19:06:18
    comments: false
    tags:
    - 工具
    - hexo
    categories: 
    - 工具
    - hexo
    ---

    效果如下:

    二、添加搜索功能

    1、安装 hexo-generator-searchdb 插件

    $ cd 文件目录
    $ npm install hexo-generator-searchdb --save
    

    2、打开站点配置文件_config.yml,找到Extensions在下面添加:

    # 搜索
    search:
      path: search.xml
      field: post
      format: html
      limit: 10000

    3、打开主题配置文件_config.yml,找到Local search,将enable设置为true。

    4、效果如下:

    三、自定义博客图标

    我们博客的默认图标是H,不过Next支持修改图标,下面是我的图标:

    我们需要将我们的图标放置在/themes/next/sources/images目录下,并在主题配置文件中进行如下配置,只需要设置small和medium两个就可以:

    favicon:
      small: /images/favicon-16x16-next.png
      medium: /images/favicon-32x32-next.png
      apple_touch_icon: /images/favicon-128x128-next.png
      safari_pinned_tab: /images/logo.svg

    四、添加点击效果

    1、在/themes/next/source/js目录下,新建clicklove.js文件:

    $ cd /themes/next/source/js
    $ touch clicklove.js

    2、将下面的代码粘贴进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);
    

    3、在\themes\next\layout\_layout.swig文件末尾添加:

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

    4、效果如下:

    五、添加背景

    1、下载相应的资源包:

    $ git clone https://github.com/theme-next/theme-next-canvas-nest themes/next/source/lib/canvas-nest
    

    2、在主题配置中做相关参数修改:

    # Canvas-nest
    # Dependencies: https://github.com/theme-next/theme-next-canvas-nest
    canvas_nest: # 网络背景
      enable: true
      onmobile: true # display on mobile or not
      color: '0,0,0' # RGB values, use ',' to separate
      opacity: 0.5 # the opacity of line: 0~1
      zIndex: -1 # z-index property of the background
      count: 150 # the number of lines
    
    # JavaScript 3D library.
    # Dependencies: https://github.com/theme-next/theme-next-three
    # three_waves
    three_waves: false
    # canvas_lines
    canvas_lines: false
    # canvas_sphere
    canvas_sphere: false
    
    # Canvas-ribbon
    # Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
    # size: The width of the ribbon.
    # alpha: The transparency of the ribbon.
    # zIndex: The display level of the ribbon.
    canvas_ribbon:
      enable: false
      size: 300
      alpha: 0.6
      zIndex: -1
    

    3、效果如下

    六、添加更多按钮

    因为在你的博客主页会有多篇文章,如果你想让你的文章只显示一部分,多余的可以点击阅读全文来查看,那么你需要在你的文章中添加

    <!--more-->

    其后面的部分就不会显示了,只能点击阅读全文才能看。效果如下:

    七、添加RSS订阅

    1、安装RSS插件

    $ cd 文件目录
    $ npm install --save hexo-generator-feed
    

    2、打开站点配置文件_config.yml,进行相关参数修改:

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

    3、打开主题配置文件_config.yml,进行相关参数修改:

    $ rss: /atom.xml //注意:有一个空格

    4、效果如下:

    八、添加社交信息

    打开主题配置_config.yml,进行相关参数修改:

    social:
      GitHub: 自己的GitHub地址 || github #
      CSDN: 自己的CSDN地址 || crosshairs
      #E-Mail: mailto:yourname@gmail.com || envelope
      #Weibo: https://weibo.com/yourname || weibo
      #Google: https://plus.google.com/yourname || google
      #Twitter: https://twitter.com/yourname || twitter
      #FB Page: https://www.facebook.com/yourname || facebook
      #VK Group: https://vk.com/yourname || vk
      #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
      #YouTube: https://youtube.com/yourname || youtube
      #Instagram: https://instagram.com/yourname || instagram
      #Skype: skype:yourname?call|chat || skype
    
    social_icons:
      enable: true #是否显示社交图标
      icons_only: false #是否仅显示社交图标
      transition: true 

    九、增加页面宠物

    1、在站点目录下执行:

    $ npm install -save hexo-helper-live2d

    2、打开主题配置_config.yml,添加下列相关参数:

    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      log: false
      model:
        use: live2d-widget-model-tororo
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true
      react:
        opacity: 0.7

    use对应的参数,可以对照着lived2d进行选择,效果如下:

    十、增加文章结束标志

    1、在路径/themes/next/layout/_macro文件夹中新建passage-end-tag.swig文件:

    //切换到路径_macro
    $ cd [_macro路径]
    //创建passage-end-tag.swig文件
    $ touch passage-end-tag.swig
    

    2、打开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>

    3、打开/themes/next/layout/_macro/post.swig,在post-body之后,post-footer之前,添加以下代码:

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

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

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

    5、效果如下:

    十一、添加文章版权信息

    打开主题配置_config.yml,进行相关参数设置:

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

    效果如下:

    十二、增加阅读次数和访客数

    博客阅读次数和访客数使用的是不蒜子提供的相关服务,使用非常简单。

    1、打开 themes/next/layout/_partial/footer.swig,将下面这段代码添加到footer.swig最后面:

    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
      <span class="post-meta-divider">|</span>
      本站总访问量<span id="busuanzi_value_site_pv"></span>次
      <span class="post-meta-divider">|</span>
      本站访客数<span id="busuanzi_value_site_uv"></span>人次
      <span class="post-meta-divider">|</span>
      本文总阅读量<span id="busuanzi_value_page_pv"></span>次
    </div>
    

    2、打开主题配置_config.yml,进行相关参数设置:

    busuanzi_count:
      enable: true  #是否开启不蒜子统计功能
      total_visitors: false
      total_visitors_icon: user
      total_views: false
      total_views_icon: eye
      post_views: false
      post_views_icon: eye

    3、效果如下:

    十三、增加文章字数统计

    在next中推荐的是hexo-symbols-count-time,而在本篇中使用的是功能更加强大的hexo-wordcount

    1、安装hexo插件:

    $ cd 文件目录
    $ npm install hexo-wordcount --save

    2、在/themes/next/layout/_partials/footer.swig末尾添加代码:

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

    3、打开主题配置_config.yml,进行相关参数设置:

    symbols_count_time:
      separated_meta: true #分隔符|
      item_text_post: true #是否统计站点总字数
      item_text_total: true #是否同级文章总字数
      awl: 2 #平均每个字符的长度
      wpm: 300 #words per minute

    3、打开站点配置_config.yml,进行相关参数设置:

    symbols_count_time:
      symbols: true #是否统计字数
      time: false #是否统计阅读时长
      total_symbols: true #是否统计总字数
      total_time: false #是否统计总阅读时长

    3、效果如下:

     

    十四、自定义头部背景区域

    1、将图片文件放在/themes/next/source/images中,打开/themes/next/source/css/_schemes/Pisces/_brand.styl,添加

    background-image: url(/images/blogHead.jpg);
     @media(min-width: 992px){
      	background-image: url(/images/blogHead.jpg);
    	}

    2、效果如下:

    十五、添加右上角github绑带

    1、打开主题配置_config.yml,进行相关参数设置:

    # Value after `||` delimeter is the title and aria-label name.
    github_banner: https://github.com/nightmaredimple || Follow me on GitHub #添加右上角github绑带

    2、效果如下:

     

    参考资料


    Next设置中文文档:http://theme-next.iissnan.com/theme-settings.html

    Hexo主题网站:https://hexo.io/themes/

    Next主题美化:https://blog.csdn.net/nightmare_dimple/article/details/86661502

     

     

    展开全文
  • 终端进入到博客目录,使用以下命令克隆 next 主题到 themes/next 目录下 git clone https://github.com/next-theme/hexo-theme-next.git themes/next 安装成功 更改博客目录下的 _config.yml 里的 theme 为 next ...

    安装

    官网
    github
    终端进入到博客目录,使用以下命令克隆 next 主题到 themes/next 目录下
    git clone https://github.com/next-theme/hexo-theme-next.git themes/next
    在这里插入图片描述
    安装成功
    在这里插入图片描述
    更改博客目录下的 _config.yml 里的 theme 为 next 即可启用
    使用 hexo s 查看

    主题配置

    官方配置文档
    主题的配置文件就是刚刚安装的 next 目录下的 _config.yml 文件
    参阅Hexo配置NexT主题教程

    ❀❀❀❀❀❀完结散花❀❀❀❀❀❀

    展开全文
  • Hexo博客优化之Next主题美化

    万次阅读 多人点赞 2019-01-26 21:42:19
    前言 有了前面几篇博客的介绍,我们就...Hexo博客支持很多主题风格,其中Next主题是Github上Star最多的主题,其一直在更新维护,支持非常多的外部插件和功能选项。我目前使用的是Next6.0版本,下面我会介绍基于Ne...
  • next 主题修改

    2019-08-01 20:13:08
    next 主题修改 打开站点配置文件:站点根目录/_config.yml 然后搜索找到language属性,属性值配置成zh-Hans,表示中文 language: zh-Hans 然后重新打包部署,却发现未生效,可是网上看的一篇教程明明说这这样配置的...
  • Typora 更换 next主题

    2021-01-11 17:40:26
    Typora 自带的字体太丑了,忍了好久终于换了个主题。 一. 下载喜欢的主题 ... ... 二....找到 Typora/themes 目录,将上面的文件移入此文件夹中。...三. 在Typora 中选择next 主题 如图,选择 next 主题即可更换。 ...
  • next主题配置与优化

    2020-12-16 16:49:52
    next主题是Github上star最多的主题,被很多人采用。这篇 博客用来记录next主题的配置与优化过程 一:next主题的配置 1.Git Bash Here打开对应文件夹 git clone https://github.com/theme-next/hexo-theme-next ...
  • oceanic-next-macos-terminal:macOS终端的Oceanic Next主题端口
  • NexT主题优化

    千次阅读 2018-04-05 20:57:45
    前言 这算是各种文章的集合了,如果你有耐心就看完吧(T▽T) 如果是明确想要哪一种功能的童鞋,那就直接查找吧( • ̀ω•́ )✧ ...本篇博文是使用next主题的进击版本,主要是有以下内容 域名绑定,...
  • Next主题美化博客

    2019-12-22 16:16:39
    1.前言 在 Hexo 中有2份主要的配置文件,其名称都是_...2.Next主题安装 Hexo安装主题,只需要将主题文件拷贝至博客所在目录的themes目录下,修改相关配置文件即可生效。 博客所在目录下打开git bash Git cl...
  • hexo更换next主题

    万次阅读 2018-06-03 21:26:32
    next使用手册 用了几天aloha主题,最开始看中的是他的简约,主页就是归档,看起来很清爽,可是没想到功能也...next功能果然很强大,配置很快,next使用手册也很详细,如果不想入坑,建议第一次直接使用next主题 ...
  • Hexo之next主题优化

    2020-05-21 22:25:58
    文章目录前言Next主题风格博客自定义图标鼠标点击特效添加动态背景修改标签样式作者头像设置文章结束标志社交设置文章版权信息博客底部布局添加打赏页面宠物博客摘要显示文章链接样式阅读次数/时长和访客数网易云...
  • Hexo 和Next主题升级

    2020-07-26 19:22:02
    之前搭建博客的时候为了上传到github,简单粗暴地将Next主题克隆并删除了.git文件夹,因此不方便对主题进行更新,如今Next主题已经更新迭代了很多版本,由于希望得到一些新功能的更新,决定将主题进行升级。
  • hexo next主题配置

    2017-10-21 11:01:40
    原文链接hexo next主题配置前言由于各种原因,网站会有各种变化以及配置的增加,以日志记下改动2017年10月21日更新修改链接样式修改文件source\css_common\components\post\post.styl 增加内容.post-body p a{ ...
  • Hexo的Next主题配置

    2019-10-06 14:00:59
    使用Next主题 在这里Downloads Next主题代码 将下载的代码放在myBlog/next目录下 设置站点myBlog/_config.yml的theme字段值为next 生成新页面hexo g 开启服务hexo s --debug 发布代码hexo d 注:此时登录网站,...
  • Hexo-next主题优化篇

    2021-04-23 20:14:31
    Hexo-next主题优化篇
  • hexo+next主题美化

    2020-03-02 10:43:58
    一、站点配置 1、设置 hexo 的 next ...theme: next # 配置成刚下载的next主题 2、配置 hexo 网站相关信息 我们在站点的配置文件_config.yml 中,修改: # Site title: # 网站标题 subtitle: # 网站副标题 descrip...
  • NexT主题基础外观设置

    2019-02-22 10:32:57
    NexT主题基础外观设置 文章目录NexT主题基础外观设置更换语言设置菜单设置菜单连接设置菜单名称设置菜单图标去除底部“*由 Hexo 强力驱动 | 主题 — NexT.Muse*“设置背景动画其他参考连接 更换语言 NexT支持多种...
  • Hexo-Next 主题配置

    2021-03-02 15:35:44
    next 主题下载慢? 官方仓库 https://github.com/theme-next/hexo-theme-next 但是由于国内访问次数太多,很容易被限速。建议先fork到你自己的github仓库,然后再从你自己的github地址下载,效率要高些。 而且,你...
  • hexo的next主题个性化教程:打造炫酷网站

    万次阅读 多人点赞 2017-05-24 22:10:04
    看到有些next主题的网站很炫酷,那么是怎么配置的呢?接下来我会讲一讲如何实现一些炫酷的效果 主要有以下32种: 在右上角或者左上角实现fork me on github 添加RSS 添加动态背景 实现点击出现桃心效果 修改文章...
  • 安装并优化 next 主题

    2021-02-01 16:50:46
    另一方面,精美的博客界面是给读者的第一印象,好的界面可以吸引更多的人访问,下面介绍 NexT 主题(GitHub 评分最高) 本问博客地址 一、安装 NexT 主题 有两种方式可以进行安装,一种是安装稳定版本(已经...
  • next主题设定代码高亮格式

    千次阅读 2018-03-02 13:53:18
    next主题设定代码高亮格式 @(Hexo+Github) 新版的Next主题卡得很严,记录如下。 首先需要动的地方有: 主题的_config.yml文件 站点的_config.yml文件 代码块的语言标注 在站点的配置文件中,搜索hightlight: ...
  • Hexo next 主题加载自定义 js 文件

    千次阅读 2019-06-02 09:31:40
    Hexo next 主题加载自定义 js 文件 为什么要配置 hexo next 主题自定义 js 文件呢?主要原因有两点: 不可靠:加载第三方站点的 js 依赖其站点的稳定性,如果第三方站点给挂了或者不维护了,那么加载的地址就失效...
  • Hexo NexT主题自定义背景图片

    千次阅读 2020-10-31 21:20:25
    Hexo NexT主题自定义中可能会碰到的坑前言初衷个性化之路正文方法1(失败)方法2后记 前言 初衷 Hexo是一个基于Node.js的静态网页生成器,我将它与Github Page搭配使用,创建我的个人博客网站。 但是相信大家绝对...
  • Hexo博客Next主题美化

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

    万次阅读 热门讨论 2018-09-05 17:26:53
    教程针对NexT主题设置,此教程为进阶教程,基础配置主题的教程可以查阅相关资料,以下改变的效果可以到此博客预览 当前所在菜单下划线显示 效果图: 打开themes\next\layout_partials文件夹...
  • Hexo NexT 主题初体验

    2018-07-25 02:15:14
    简谈 NexT 主题的配置和第三方的服务的接入。 前言 前一篇完成了简单个人主页的搭建,然而,追求美的脚步和好奇心的滋生,难以遏制。 NexT 主题配置 NexT 主题配置官网文档,有详尽的配置,如设置 RSS、设置字体、...

空空如也

空空如也

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

next主题