INFO Deploying: gitINFO Clearing.deploy_git folder...INFO Copying files frompublic folder...INFO Copying files from extend dirs...On branch masternothing to commit, working directory cleanCounting objects:46,done.Delta compression using up to 8 threads.Compressing objects:100%(36/36),done.Writing objects:100%(46/46),507.66KiB|0 bytes/s,done.Total46(delta 3), reused 0(delta 0)remote:Resolving deltas:100%(3/3),done.To git@github.com:NightTeam/nightteam.github.io.git*[new branch] HEAD -> masterBranch master set up to track remote branch master from git@github.com:NightTeam/nightteam.github.io.git.INFO Deploydone: git
另外还可以设置一下语言,如果要设置为汉语的话可以将 language 的字段设置为 zh-CN,修改如下:
language: zh-CN
这样就完成了站点基本信息的配置,完成之后可以看到一些基本信息就修改过来了,页面效果如下:
修改主题
目前来看,整个页面的样式个人感觉并不是那么好看,想换一个风格,这就涉及到主题的配置了。目前 Hexo 里面应用最多的主题基本就是 Next 主题了,个人感觉这个主题还是挺好看的,另外它支持的插件和功能也极为丰富,配置了这个主题,我们的博客可以支持更多的扩展功能,比如阅览进度条、中英文空格排版、图片懒加载等等。
那么首先就让我们来安装下 Next 这个主题吧,目前 Next 主题已经更新到 7.x 版本了,我们可以直接到 Next 主题的 GitHub Repository 上把这个主题下载下来。
# Sidebar Avataravatar: # 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 # If true, the avatar would be dispalyed in circle. rounded: true # If true, the avatar would be rotated with the cursor. rotated: true
作为程序猿,代码块的显示还是需要很讲究的,默认的代码块我个人不是特别喜欢,因此我把代码的颜色修改为黑色,并把复制按钮的样式修改为类似 Mac 的样式,修改 _config.yml 文件的 codeblock 区块如下:
codeblock:# Code Highlight theme # Available values: normal | night | night eighties | night blue | night bright # See: https://github.com/chriskempson/tomorrow-theme highlight_theme: night bright # Add copy button on codeblock copy_button: enable: true # Show text copy result. show_result: true # Available values: default | flat | mac style: mac
bookmark: enable:false# Customize the color of the bookmark. color: "#222" # If auto, save the reading progress when closing the page or clicking the bookmark-icon. # If manual, only save it by clicking the bookmark-icon. save: auto
# `Follow me on GitHub` banner in the top-right corner.github_banner: enable: true permalink: https://github.com/NightTeam/nightteam.github.io title: NightTeam GitHub
# Multiple Comment System Supportcomments: # Available values: tabs | buttons style: tabs # Choose a comment system to be displayed by default. # Available values: changyan | disqus | disqusjs | facebook_comments_plugin | gitalk | livere | valine | vkontakte active: gitalk
主要是 comments.active 字段选择对应的名称即可。
然后找打 gitalk 配置,添加它的各项配置:
# Gitalk# Demo: https://gitalk.github.io# For more information: https://github.com/gitalk/gitalkgitalk: enable: true github_id: NightTeam repo: nightteam.github.io # Repository name to store issues client_id: {your client id} # GitHub Application Client ID client_secret: {your client secret} # GitHub Application Client Secret admin_user: germey # GitHub repo owner and collaborators, only these guys can initialize gitHub issues distraction_free_mode: true # Facebook-like distraction free mode # Gitalk's display language depends on user's browser or system environment # If you want everyone visiting your site to see a uniform language, you can set a force language value # Available values: en | es-ES | fr | ru | zh-CN | zh-TW language: zh-CN
可能在一些情况下我们需要写一个公式,比如演示一个算法推导过程,MarkDown 是支持公式显示的,Hexo 的 Next 主题同样是支持的。
Next 主题提供了两个渲染引擎,分别是 mathjax 和 katex,后者相对前者来说渲染速度更快,而且不需要 JavaScript 的额外支持,但后者支持的功能现在还不如前者丰富,具体的对比可以看官方文档:https://theme-next.org/docs/third-party-services/math-equations。
所以我这里选择了 mathjax,通过修改配置即可启用:
math: enable:true # Default (true) will load mathjax / katex script on demand. # That is it only render those page which has `mathjax: true` in Front-matter. # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE. per_page: true # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support. mathjax: enable: true # See: https://mhchem.github.io/MathJax-mhchem/ mhchem: true
search: path: search.xml field: post format: html limit:10000
然后在主题的 _config.yml 里面修改如下:
# Local search# Dependencies: https://github.com/wzpan/hexo-generator-searchlocal_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: 5 # Unescape html strings to the readable one. unescape: false # Preload the search data when the page loads. preload: false
这里用的是 Local Search,如果想启用其他是 Search Service 的话可以参考官方文档:https://theme-next.org/docs/third-party-services/search-services。