首页 > 作文

使用Hexo开源博客系统,轻松搭建你的个人博客(2)

更新时间:2023-04-07 05:22:30 阅读: 评论:0

上一章节,我们介绍了hexo的基础搭建,搭建完大家一定发现,是英文版本的,并且页面有点丑陋。这一章节,就来跟大家介绍hexo的配置和主题的设置。

站点信息

上一章有跟大家提到过_config.yml这个文件,这个我们先称之为站点全局的配置文件,后续我们说到主题的时候,也会有一个这样的文件,暂时称它主题配置文件。
我们先来看一下全局配置文件主要有哪些内容:

# site 站点主配置title: hexo  # 网站标题subtitle:    # 网站副标题description:   # 网站描述keywords:      # 可以不填写保持默认author: john doe  # 网站拥有者昵称language:    # 网站语言设销售员口才训练置,一般根据依赖的主题而定timezone:    # 网站时区设置,一般不填写保持默认# url## if your site is put in a subdirectory, t url as 'http://yoursite.com/child' and root as '/child/'url:   # 网站url设置root:  # 网站根目录链接permalink: :year/:month/:title.html  # 文章链接,默认是按照 /年/月/日/文章标题 设置的链接permalink_defaults:  # 默认链接形式......# extensions## plugins: /d/file/titlepic/ themes: https://hexo.io/themes/theme:  #主题

这些可根据需要设置,其余默认即可,git配置和站点地图配置后续用到再介绍。
信息配置完记得执行hexo g && hexo s,刷新浏览器查看效果。

安装next主题

主题大家可以在官网下载()也可以到github搜索,我推荐使用next主题,该主题几乎占领了hexo博客的半壁江山。
next主题下载地址:
这边介绍的版本是next6,在next6版本上其实增加了很多next5需要手动配置的东西,并且next5已经停止维护了,所以建议使用next6版本。

下载next主题

两种方式:
1.使用git clone命令将next仓库克隆到hexo世界最大的淡水湖目录下的themes/next,需要在根目录下执行,命令为:git clone /d/file/titlepic/hexo-theme-next themes/next
2.直接在github页面上选择绿色的按钮clone or download下载压缩包,然后解压到themes目录下,名字可自行修改。

设置为next主题

打开全局配置文件_config.yml,找到theme,设置如下:

# extensions## plugins: /d/file/titlepic/ themes: https://hexo.io/themes/theme: hexo-theme-next   #此处填入你在themes目录下的next主题目录名

测试next主题

在git bash中执行如下命令:

hexo clean && hexo g && hexo s

命令执行完成后在浏览器中输入http://localhost:4000即可查看安装好的next主题。

配置next主题

在主题目录下面,也有一个_config.yml的配置文件,我们就叫它主题配置文件,下面我们开始配置。

网站图标设置

打开_config.yml,找到favicon的位置,如下所示:

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_browrconfig: /images/browrconfig.xml

将图片放到你的next主题下面的source/images目录下面,然后在主题配置文件中设置即可。

关闭底部由hexo强力驱动

在footer中,将powered和theme下的属性全部设置为fal

footer:  ...  powered:    # hexo link (powered by hexo).    enable: fal    # version info of hexo after hexo link (vx.x.x).    version: fal  theme:    # theme & scheme info link (theme - next.scheme).    enable: fal    # version info of next after scheme info (vx.x.x).    version: fal

菜单栏设置

menu:  home: / || home  #about: /about/ || ur  tags: /tags/ || tags  categories: /categories/ || th  archives: /archives/ || archive  #schedule: /schedule/ || calendar  #sitemap: /sitemap.xml || sitemap  #commonweal: /404/ || heartbeat# enable / disable menu icons / item badges.menu_ttings:  enable: true  #表示是否显示菜单图标icons  badges: fal  # 显示每个菜单下面有多少个内容

||后面是fontawesome中的图标名称,如果想要修改图标,可以去fontawesome官网找自己喜欢的图标样式。

主题风格设置

# schemes#scheme: mu#scheme: mist#scheme: piscesscheme: gemini

默认是mu,我是使用gemini,大家可以每个都试看看,看喜欢哪个。

社交链接设置

social:  github: /d/file/titlepic/codernice || github  #e-mail: mailto:yourname@gmail.com || envelope  #weibo: /d/file/titlepic/visitor || weibo  #google: https://plus.google.com/yourname || google  #twitter: https://twitter.com/yourname || twitter  #fb page: https://www.facebook.com/yourname || facebook  #vk group: /d/file/titlepic/badbrowr.php || 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

yourname改成你自己在对应网站的id,前面的#注释去掉即可。

友情链接设置

# blog rollslinks_icon: linklinks_title: linkslinks_layout: block#links_layout: inlinelinks:  #title: http://example.com

#title: http://example.com换成对于网站名称和链接即可

开启阅读更多按钮

auto_excerpt:  enable: true  length: 150

默认是fal,首页上会显示整篇文章,设置为true开启阅读更多按钮。

文章元数据设置

post_meta:  item_text: true  created_at: true  updated_at:    enable: fal    another_day: true  categories: true

显示在home页的文章创建于、更新于、阅读次数之类的数据

文章字数统计设置

# post wordcount display ttings# dependencies: https://github.com/theme-next/hexo-symbols-count-timesymbols_count_time:  parated_meta: true  item_text_post: true  item_text_total: fal  awl: 4  wpm: 275

该设置必须要添加hexo-symbols-count-time模块依赖,在hexo站点根目录下使用npm install hexo-symbols-count-time --save命令安装模块。

侧边栏头像设置

# sidebar avataravatar:  # in theme directory (source/images): /images/avatar.gif  # in site directory (source/uploads): /uploads/avatar.gif  # you can also u other linking images.  url: 你的头像地址  # if true, the avatar would be dispalyed in circle.  rounded: true # 设置头像是否为圆形  # the value of opacity should be choo from 0 to 1 to t the opacity of the avatar.  opacity: 1 # 设置不透明度,1为完全不透明,0为完全透明  # if true, the avatar would be rotated with the cursor.  rotated: true # 设置鼠标放到头像上是否旋转

代码块设置

codeblock:  # manual define the border radius in codeblock, leave it blank for the default value: 1  border_radius: 7   # 按钮圆滑度  # add copy button on codeblock  copy_button:    enable: true # 设置是否开启代码块复制按钮    # show text copy result    show_result: true # 是否显示复制成功信息

开启文章打赏按钮

# reward (donate)reward_ttings:  # if true, reward would be displayed in every article by default.  # you can show or hide reward in a specific article throuth `reward: true | fal` in front matter.  enable: true #开启打赏功能  animation: fal  #comment: donate comment herereward:  wechatpay: # 微信收款图片地址  alipay: # 支付宝收款图片地址  #bitcoin: /images/bitcoin.png

开启相关文章推荐功能

related_posts:  enable: true #开启  title: # custom header, leave empty to u the default one  display_in_home: fal #显示在首页  params:    maxcount: 5    #ppmixingrate: 0.0    #isdate: fal    #isimage: fal    #ixcerpt: fal

需要安装hexo-related-popular-posts模块,在hexo站点根目录下执行npm install hexo-related-popular-posts --save安装模块。

代码块风格设置

# code highlight theme# available values: normal | night | night eighties | night blue | night bright# https://github.com/chriskempson/tomorrow-themehighlight_theme: normal

有normal 、night 、 night eighties 、 night blue 、night bright这几种风格,大家可以都试看看。

添加valine评论系统

# valine# you can get your appid and appkey from /d/file/titlepic/index.html more info available at https://valine.js.orgvaline:  enable: true # 开启valine评论  appid: # your leancloud application appid  appkey: # your leancloud application appkey  notify: fal # mail notifier, e: /d/file/titlepic/wiki  verify: fal # verification code  placeholder:  # comment box placeholder  avatar: monsterid # gravatar style  guest_info: nick,mail,link # custom comment header  pagesize: 10 # pagination size  language: # language, available values: en, zh-cn  visitor: fal # leancloud-counter-curity is not supported for now. when visitor is t to be true, appid and appkey are recommended to be the same as leancloud_visitors' for counter compatibility. article reading statistic /d/file/titlepic/visitor.html  comment_count: true # if fal, comment count will only be displayed in post page, not in home page

valine是第三方插件,需要到注册账号,获取到appid和appkey后放到这里即可。avatar是设置默认头像,可以到选择默认头像,然后在这里设置名字即可。

开启百度分享

# baidu share# available values: button | slide# warning: baidu share does not support https.baidushare:  type: button  # 设置分享按钮的风格,有button何slide形式

开启needmoreshare分享

needmoreshare2:  enable: fal  postbottom:    enable: fal    options:      iconstyle: box      boxform: horizontal      position: bottomcenter      networks: weibo,wechat,douban,qqzone,twitter,facebook  float:    enable: fal    options:      iconstyle: box      boxform: horizontal      position: middleright      networks: weibo,wechat,douban,qqzone,twitter,facebook

needmoreshare2依赖theme-next-needmoreshare2模块,要开启的朋友可以到找到方法。

设置文章阅读量

leancloud_visitors:  enable: true  app_id:   app_key:   # dependencies: /d/file/titlepic/hexo-leancloud-counter-curity  # if you don't care about curity in leancloud counter and just want to u it directly  # (without hexo-leancloud-counter-curity plugin), t `curity` to `fal`.  curity: fal  betterperformance: true

appid和appkey跟上面开启valine评论使用的leancloud是一样的。如果发现文章阅读量不显示,可以到leancloud后台的存储菜单下,创建class,命名为counter.

开启不蒜子统计功能

busuanzi广州商学院宿舍_count:  enable: true  total_visitors: true #开启总访客(uv)  total_visitors_icon: ur  total_views: true #开启总访问数(pv)  total_views_icon: eye  post_views: fal  post_views_icon: eye

这边的post_views和上面的leancloud_visitors冲突,两者都是显示文章阅读量,只开启一个就可以了。

开启本地博客搜索功能

local_arch:  enable: fal  # if auto, trigger arch by changing input.  # if manual, tri大个子老鼠和小个子猫的故事gger arch by pressing enter key or arch button.  trigger: auto  # show top n results per article, show all results by tting to -1  top_n_per_article: 1  # unescape html strings to the readable one.  unescape: fal

该功能依赖hexo-generator-archdb插件,使用命令npm install hexo-generator-archdb --save来进行安装,然后在全局配置文件的末尾,加入以下代码即可。

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

总结

以上就是hexo博客常用的基本配置以及基于next主题的一些设置,更多功能大家可在使用中逐摸索,欢迎讨论交流。

需要安装的模块依赖

1.字数统计:npm install hexo-symbols-count-time --save
2.相关文章推荐:npm install hexo-related-popular-posts --save
3.本地博客最简单的舞蹈搜索功能:npm install hexo-generator-archdb --save,然后在全局配置文件末尾加入代码

第三方插件

1.valine评论系统:需要到注册账号,获取到appid和appkey
2.文章阅读量:同样需要用到leancloud的appid和appkey

本文发布于:2023-04-07 05:19:04,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/7cfb024c69746255664a830a38070501.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:使用Hexo开源博客系统,轻松搭建你的个人博客(2).doc

本文 PDF 下载地址:使用Hexo开源博客系统,轻松搭建你的个人博客(2).pdf

标签:主题   配置文件   文章   网站
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图