NexT新老版本配置

写在前面

我的天老爷,搞了几天了终于略懂了一丢丢!一开始接触老坂本(5.1)跟着网上教程diy需要自己插入很多文件或者代码,而新版(7.7)基本插件化了,减少了很多目录文件,省去了自己写的同时也懵逼了一些。。毕竟现在教程基本都是老的,不过我没必要研究得太深入毕竟博客以内容质量为主,可以写写博客就ok了吧,反正目前也就只是自己在看而已,还是花点时间做正经事好了。。

NexT5.1

起始日期

主题配置文件下搜索since

since: 2020

显示阅读全文

auto_excerpt:
  enable: true   # 文章较多的话有必要设置为true显示阅读全文
  length: 150

也可以在md文件中用<!- -more- ->来截断,作为阅读全文的开始位置

设置语言

language: zh-Hans next5以下版本(包含)
language: zh-CN next6以上版本(包含)

menu

注意/和||之间不能留空格,否则出现%20,新版已修复

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

浏览进度

主题配置文件搜索scrollpercent,设为true;如果箭头想放侧栏,搜索b2t把值改为true。

头像

添加头像

主题配置文件搜索 Sidebar Avatar 关键字,去掉 avatar 前面的#;

设置头像圆形、可旋转

打开位于 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%;
}

// 可旋转的圆形头像,`hover`动作
.site-author-image:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -transform: rotate(360deg);
}

侧边栏社交活动

设置侧边栏社交链接

主题配置文件下搜索social,添加社交站点名称与地址即可

设置侧边栏社交图标

主题配置文件下搜索social_icons,添加社交站点名称(注意大小写)图标,图标名称来自Font Awesome图标地

RSS

站点目录下安装模块,$ npm install hexo-generator-feed --save,站点配置文件下添加配置(我也不知道干啥😢):

# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:

友情链接

主题配置文件下搜索Blog rolls,配置:

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

修改文章样式

主页文章添加阴影效果

打开 themes/next/source/css/_custom/custom.styl ,向里面加代码:

.post {
   margin-top: 0px;
   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);
}

代码块自定义样式

还是custom.styl文件(新版直接主题配置文件下更改选择),增加:

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

添加背景图

还是custom.styl文件,增加:

body{
    background:url(/images/bg.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center;
}

NexT代码样式

主题配置文件下:

highlight_theme: night bright #可选值: normal | night | night eighties | night blue | night bright

版权声明

主题配置文件下搜索post_copyright,enable改为true:

# Declare license on posts
post_copyright:
  enable: true
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/

文章底部#标签的图标样式

打开 themes/next/layout/_macro/post.swig 文件,搜索 rel="tag"># ,将 # 换成 <i class="fa fa-tag"></i> 这个图标:

<div class="post-tags">
    {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
    {% endfor %}
</div>

刷新时的加载条

打开 themes/next/_config.yml ,搜索关键字 pace ,设置为 true ,可以更换加载样式:

# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash #替换更换样式

本地搜索

站点目录下安装模块,$ npm install hexo-generator-searchdb --save 打开站点配置文件添加:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

打开主题配置文件,搜索 local_search ,设置为true

# Local search
# Dependencies: https://github.com/flashlab/hexo-generator-search
local_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top_n_per_article: 1

文章顶部显示更新时间

主题配置文件搜索updated_at,设置为true

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

统计文章字数,预览时间

站点目录下安装模块,$ npm i --save hexo-wordcount 打开主题配置文件搜索post_wordcount:

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

修改Logo字体

在 themes/next/source/css/_custom/custom.styl 中添加如下代码:

@font-face {
    font-family: Zitiming;
    src: url('/fonts/Zitiming.ttf');
}
.site-title {
    font-size: 40px !important;
	font-family: 'Zitiming' !important;
}

其中字体文件在 themes/next/source/fonts 目录下,里面有个 .gitkeep 的隐藏文件,打开写入你要保留的字体文件,具体字库自己从网上下载即可。

内容板块透明

博客根目录 themes\next\source\css_schemes\Pisces\index.styl 文件 .post-block 标签下 background: white修改为:

background: rgba(255,255,255,0.7); //0.7是透明度

开启代码复制

主题配置文件下:

codeblock:
    enable: true
    show_result: true

网站图标

主题配置文件下:

favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

不蒜子网站统计

我现在还不知道如何精确计数

主题配置文件中:

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer:
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 浏览
  page_pv_footer:

同时next/layout/_third-party/analytics/busuanzi-counter.swig文件里添加下面脚本,注意src要保持最新

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

leancloud计数

进入leancloud官网,注册得到appid和appkey,然后在安全中心里设置可以访问的域名或地址,之后就开始随便创建一个应用,在应用里创建class名为Counter,一定要Counter的类,然后在主题配置文件里打开leancloud的enable和写入appid和appkey,在Counter类中可以查看访问的情况

使用leancloud计数后,上面的不蒜子统计的page_pv属性可以关闭因为同样是页面浏览量。

NexT7.7

后来在7.7版本主题配置文件基本自己阅读了一遍,毕竟不是很难读,英文不懂就去找翻译,而且很多配置都插件化了,基本都只是需要主题配置文件就能操作的,除非自己diy页面的其他样式。

设置头像

主题配置文件下搜索avatar,设为true.

背景动画

Canvas-nest风格(很常见的动态背景)

# Canvas-nest
# Dependencies: https://github.com/theme-next/theme-next-canvas-nest
# For more information: https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: true
  onmobile: true # Display on mobile or not
  color: "0,0,255" # RGB values, use `,` to separate
  opacity: 0.5 # The opacity of line: 0~1
  zIndex: -1 # z-index property of the background
  count: 99 # The number of lines

git clone [https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest ](https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest)

clone可能会很慢,或者直接download zip并解压到站点目录下的/source/lib里,并重命名为canvas-nest,重新生成服务器即可

JavaScript 3D library风格

git clone [https://github.com/theme-next/theme-next-three source/lib/three](https://github.com/theme-next/theme-next-three source/lib/three)

同上可以直接下载zip解压到lib下并重命名为three,然后在主题配置文件下搜索theme-next-three,将想要的效果改为true即可

# JavaScript 3D library.
# Dependencies: https://github.com/theme-next/theme-next-three
three:
  enable: false
  three_waves: true
  canvas_lines: false
  canvas_sphere: false

丝带背景风格

新版还带有第三种动态背景风格,同样先下载依赖到lib并重命名为canvas-ribbon,见下面截出的代码:

# Canvas-ribbon
# Dependencies: https://github.com/theme-next/theme-next-canvas-ribbon
# For more information: https://github.com/zproo/canvas-ribbon
canvas_ribbon:
  enable: false
  size: 300 # The width of the ribbon
  alpha: 0.6 # The transparency of the ribbon
  zIndex: -1 # The display level of the ribbon

文章背景样式

可以自己建立博客目录文件/source/_data/styles.styl,在里面写入样式代码,然后在主题配置文件里搜索custom_file_path最下面那个自定义style放行就ok了

// 底栏背景色
// .footer {
//     background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
// }

//顶栏图片
// .header {
//     background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
// }

//背景图片
// body{   
//         background: linear-gradient(to top, #a8ff78, #78ffd6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
//         background-size:cover;
//         background-repeat:no-repeat;
//         background-attachment:fixed;
//         background-position:center;
// }

//侧栏图片及内部文字颜色修改
.sidebar {
    background:url("https://s2.ax1x.com/2020/02/20/3ZLwj0.jpg");
    background-size: cover;
    background-position:center;
    background-repeat:no-repeat;
    p,span,a {color: #ad5389}
}

这样设置适合有侧边栏的主题,比如mist那个,其他主题再自行DIY.

阅读全文

新版的阅读全文已经改了,之前还很懵,但就在刚才全明白了,好奇怪为什么之前看不出来,但我就是刚才尝试了那么几次。。。

新版需要下载插件excerpt,自然的就需要在站点配置文件里配置:

excerpt:
  depth: 5  #按层来算,也就是按代码块来算
  excerpt_excludes: []
  more_excludes: []
  hideWholePostExcerpts: true

然后主题配置文件这样设置:

excerpt_description: true
...
read_more_btn: true

配置的默认深度depth原本是10层,我改为5层。刚才我就是理解了这个depth原来就是md文件中的代码块,也就是说当从文章(不包括标题)开始算起10个代码块后就会开始显示阅读全文按钮(在主页上),而不安装该模块的话就无法更改阅读全文按钮的位置。也就是说,不像旧版可以限制字数,新版限制的是层数,但需要相应的模块插件。然后写在md文件里的\<!--more-->的作用就是截断上面部分的文章,当点击阅读全部之后,会自动定位到该标签下面部分的文章,一般不需要这个定位。而网上有旧版的教程说这个截断标签也是可以限制字数的一种方法,这点我前面照写了,我自己没试过。

安装模块的链接我忘记记了,但网上或者github搜索hexo excerpt_excludes应该就有了,记得主题配置文件要设置excerpt_description的值为true。

更改文章切入动作

根据注释可以自行更换多种文字切入动作

motion:
  enable: true
  async: false
  transition:
    # Transition variants:
    # fadeIn | flipXIn | flipYIn | flipBounceXIn | flipBounceYIn
    # swoopIn | whirlIn | shrinkIn | expandIn
    # bounceIn | bounceUpIn | bounceDownIn | bounceLeftIn | bounceRightIn
    # slideUpIn | slideDownIn | slideLeftIn | slideRightIn
    # slideUpBigIn | slideDownBigIn | slideLeftBigIn | slideRightBigIn
    # perspectiveUpIn | perspectiveDownIn | perspectiveLeftIn | perspectiveRightIn
    post_block: fadeIn
    post_header: slideUpBigIn #标题的出现
    post_body: bounceLeftIn
    coll_header: slideLeftIn
    # Only for Pisces | Gemini.
    sidebar: slideUpIn

评论系统

评论系统我用valine,因为valine和leancloud是同个appid和appkey,之前用leancloud统计文章阅读量但新版用不了了,无意中发现valine居然也有文章阅读量统计???然后我就直接打开了新世界的开关!!!然后发现评论系统每个页面都有除了主页,于是网上找了找解决方法,最后在对应页面的md文件里开头附上comments: false 就ok了, 下面是主题配置文件下的valine配置,记得要先申请leancloud的appid和appkey,点击跳转leancloud计数

valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey:  # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

写在最后

由于这些都是存在我笔记中的知识点,后面新版的我基本都自行看注释解决了,毕竟新版是真的容易懂了一些吧,就是某些细节的地方还暂时摸不着头脑。接下去就慢慢磨我的博客吧,一点一点学习应该就能懂了,坚持很重要,现在是疫情时期,继续加油~

  • 0
    点赞
  • 1
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,前端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现前端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。前端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值