这两天整理网站方面的事,本地IIS部署个人网站,发现我的hexo做的个人网站实在很单调,于是找来资料做进一步的配置。

一、网站图标

看一下hexo\themes\modernist\layout\_partial\head.ejs,找到这句:

<link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">

我的是<link rel="icon" type="image/x-icon" href="<%- theme.favicon %>"> 不修改,好像也可以。。只是把favicon.ico放到hexo\source目录下了。

你懂的,将你的favicon.ico放到工程根目录下即可,也就是hexo\source目录。可以在线制作你的ico图标

二、主题的更换

萝卜白菜各有所爱,玩博客换主题是必不可少的,hexo的默认主题为landscape,hexo的主题列表 Hexo Themes
我比较喜欢 pacmanmodernistishgoraytaylorism。Pacman最为优秀,简洁大方小清新,同时移动版本支持的也很好,但作者并没有把很多参数分离出来给出可配置项,我最终选择了modernist。

安装modernist主题的方法就是一句git命令:

git
clone https://github.com/heroicyang/hexo-theme-modernist.git
themes/modernist

(参考了主题列表的文章里
  Install:

Execute the following command, and modify theme in _config.yml to theme-name

$ git clone<repository>
themes/<theme-name>

安装完成后,打开hexo\_config.yml,修改主题为modernist

1
theme: modernist

打开hexo\themes\modernist目录,编辑主题配置文件_config.yml:

menu: #配置页头显示哪些菜单(下面几个自己定义页面,往下文看)
# Home: /
Archives: /archives
Reading: /reading
About: /about
# Guestbook: /about excerpt_link: Read More #摘要链接文字
archive_yearly: false #按年存档 widgets: #配置页脚显示哪些小挂件
- category
# - tag
- tagcloud
- recent_posts
# - blogroll blogrolls: #友情链接
- bruce sha's duapp wordpress: http://ibruce.duapp.com
- bruce sha's javaeye: http://buru.iteye.com
- bruce sha's oschina blog: http://my.oschina.net/buru
- bruce sha's baidu space: http://hi.baidu.com/iburu fancybox: true #是否开启fancybox效果 duoshuo_shortname: buru #多说账号 google_analytics:
rss:

更新主题

cd themes/modernist
git pull

三、评论框

静态博客要使用第三方评论系统,hexo默认集成的是Disqus,因为你懂的,所以国内的话还是建议用多说

多说——专门基于社交网络的评论系统,能够轻松的帮网站主搭建自己互动性极强的社区,让留言的用户都有“家”的感觉,功能强大且永久免费。

直接用你的qq账号/微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。

如果使用modernist主题,在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可(fml710)。

你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置,对于css设置,可以参考这里,我是在HeroicYang的基础上修改的。

如果使用的是默认的landscape主题只需要修改themes\landscape\layout\_partial\article.ejs模板中的

<% if (!index && post.comments && config.disqus_shortname){ %>
<section id="comments">
<div id="disqus_thread">
<noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<% } %>

改为

<% if (!index && post.comments && config.duoshuo_shortname){ %>
<section id="comments">
<!-- 多说评论框 start -->
<div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"datoublog"};
true(function() {
truetruevar ds = document.createElement('script');
truetrueds.type = 'text/javascript';ds.async = true;
truetrueds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
truetrueds.charset = 'UTF-8';
truetrue(document.getElementsByTagName('head')[0]
truetrue || document.getElementsByTagName('body')[0]).appendChild(ds);
true})();
true</script>
<!-- 多说公共JS代码 end -->
</section>
<% } %>

如果是其他主题,也只需要修改主题\layout\_partial\comment.ejs

四、自定义页面

执行new page命令:

hexo new page "about"

在hexo\source\下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。

上述步骤,也可以手工生成,在hexo\source\下手工新建about和index.md也是完全等价的。

因为markdown对table的支持不好,我是在about中直接建立index.html,里面书写页面内容,hexo会帮你加上头和尾。

五、404页面

GitHub Pages 自定义404页面非常容易,直接在Hexo/source目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目

才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

其实,404页面可以做更多有意义的事,来做个404公益项目吧,做点有意义的事情,也对得起这个域名。

目前有如下几个公益404接入地址,我选择了腾讯的。404页面,每个人可以做的更多。

404.html的内容可以设置为下面的内容

<span style="font-size:14px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
<title>公益404</title>
</head>
<body>
<script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://fml710.xyz/" homePageName="回到我的主页"></script>
</body>
</html></span>

注:

1、页面有个链接默认是返回腾讯网,改修“homePageUrl”、“homePageName”两个参数,可定制化,

homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"

2、本地查看的话,<meta>中 一定要加  http-equiv="Content-Type" content="text/html;  否则中文乱码,content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

Hexo博客网站再配置的更多相关文章

  1. hexo博客的相关配置

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 前面两节讲解了hexo博客的搭建以及jacman主题的配置,这节主要讲解博客的一些相关配置.比如404页面,图床,自定义页面,个人网站绑定(重要的 ...

  2. Hexo 博客 github.io MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  3. Hexo博客部署到腾讯云服务器全过程(Nginx,证书,HTTPS),你要的这里都有

    背景 说来也惭愧,博客已经搭建很久了,一直免费的部署在 Coding 和 Github Pages 上,前者迁移到腾讯云 Serverless,导致原有的配置始终有问题,没时间仔细研究,刚好腾讯服务器 ...

  4. github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...

  5. github+hexo搭建自己的博客网站(五)进阶配置(畅言实现博客的评论)

    如何对如何搭建hexo+github可以查看我第一篇入门文章:http://www.cnblogs.com/chengxs/p/7402174.html 详细的可以查看hexo博客的演示:https: ...

  6. github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

    详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如 ...

  7. 博客网站-Hexo+GitHub+Netlify

    Hexo+GitHub+Netlify一站式搭建属于自己的博客网站 https://www.cnblogs.com/kerbside/p/10130606.html https://hhongwen. ...

  8. Hexo+GitHub+Netlify一站式搭建属于自己的博客网站

    喜欢的话请关注我的个人博客我在马路边https://hhongwen.cn/,此文为博主原创,转载请标明出处. 更好的阅读体验请点击查看:Hexo+GitHub+Netlify一站式搭建属于自己的博客 ...

  9. Hexo+Github: 博客网站搭建完全教程(看这篇就够了)

    本篇教程首次发布在个人博客:sunhwee.com,想要获得最佳阅读体验,欢迎前往,建议用电脑查看教程文档. # 阅读须知 注意,这篇文章篇幅较长,主要针对新手,每一步很详细,所以可能会显得比较啰嗦, ...

随机推荐

  1. jQuery UI 自定义样式的日历控件

    在线演示 本地下载

  2. 将CString写入到本地文件中

    void SocketU::WritePacket2File(CString packet_str)//packet_str为待写入的字符串{ CTime time = CTime::GetCurre ...

  3. idea通过springboot初始化器新建项目

    1.通过初始化器新建项目,勾选后 对应生成的pom文件 以及生成的包路径 2.生成项目后点击稍后弹出的自动自动导入maven工程的改变,当pom中有依赖改变时会自动刷新导入依赖 3.删除自动生成项目的 ...

  4. jQuery.fn.extend() jQuery.extend()

    是jQuery为开发插件提拱了两个方法 jQuery.fn jQuery.fn = jQuery.prototype = { init: function( selector, context ) { ...

  5. Javascript -- 级联菜单, javascript解析xml文件

    1. cities.xml 保存省份和城市 <?xml version="1.0" encoding="GB2312"?> <china> ...

  6. python测试函数的使用时间

    1. 使用装饰器来衡量函数执行时间 有一个简单方法,那就是定义一个装饰器来测量函数的执行时间,并输出结果:(代码通用3.x) import time from functools import wra ...

  7. 简单Trace类实现

    <C++沉思录>27章内容修改后所得: /************************************************************************/ ...

  8. Java多线程 - 控制线程

    join线程 在某个线程的执行流中调用其他线程的join()方法时,调用线程将被阻塞,直到被join()方法加入的线程完成为止. join()方法有三种重载形式: join():等待被join的线程执 ...

  9. angularjs实现星星评分

    angularjs实现星星评分 自定义指令 app.directive('myStars', function () { return { require : '?ngModel', // ?ngMo ...

  10. hermite插值

    Hermite 插值就是要求插值函数不仅经过所给节点,而且要保证在该点的导数也相等.<备注:虽然还不理解这句话,但是还是先放这里!> 所谓样条曲线(Spline Curves)是指给定一组 ...