上一章节,我们介绍了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
,刷新浏览器查看效果。
主题大家可以在官网下载()也可以到github搜索,我推荐使用next主题,该主题几乎占领了hexo博客的半壁江山。
next主题下载地址:
这边介绍的版本是next6,在next6版本上其实增加了很多next5需要手动配置的东西,并且next5已经停止维护了,所以建议使用next6版本。
两种方式:
1.使用git clone命令将next仓库克隆到hexo世界最大的淡水湖目录下的themes/next,需要在根目录下执行,命令为:git clone /d/file/titlepic/hexo-theme-next themes/next
2.直接在github页面上选择绿色的按钮clone or download
下载压缩包,然后解压到themes目录下,名字可自行修改。
打开全局配置文件_config.yml,找到theme,设置如下:
# extensions## plugins: /d/file/titlepic/ themes: https://hexo.io/themes/theme: hexo-theme-next #此处填入你在themes目录下的next主题目录名
在git bash中执行如下命令:
hexo clean && hexo g && hexo s
命令执行完成后在浏览器中输入http://localhost:4000
即可查看安装好的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目录下面,然后在主题配置文件中设置即可。
在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# 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形式
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 条评论) |