thinphp 做外贸网站,wordpress 小学生,如何建设自己的摄影网站,网站备案号在哪2022-01-25 更新#xff1a;博客新地址#xff1a;https://www.itbob.cn/#xff0c;文章距上次编辑时间较远#xff0c;部分内容可能已经过时#xff01; 本文将讲述一些 Hexo 博客实用功能的添加#xff0c;本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X…2022-01-25 更新博客新地址https://www.itbob.cn/文章距上次编辑时间较远部分内容可能已经过时 本文将讲述一些 Hexo 博客实用功能的添加本文以作者 luuman 的 spfk 主题和作者 xaoxuu 的 Material X 主题为例实际效果欢迎访问我的博客进行查看本文章会不定时进行更新。文章涉及有关参考资料、教程、链接如有侵权请联系我删除
请注意不同主题可能方法有些不同相同主题不同版本配置方法也有所差异阅读主题文档非常重要
博客功能添加前提条件有一定的前端基础了解 HTML、CSS、JS了解 CSS 预处理语言 Sass、Less、Stylus搞懂 hexo 的目录结构。
博客功能添加通用步骤选定主题认真阅读主题文档大多数主题文档都有非常详细的配置设置分析主题目录结构了解每个文件是对应网页哪个部分的认真阅读相关教程教程本质上只为你提供核心代码和思路具体代码要添加到哪个地方需要你自己搞懂主题结构添加到需要的、合适的位置
欢迎关注我的专栏《Github/Coding Pages Hexo》从前期搭建到后期美化一条龙帮你解决 Hexo 常见问题
推荐阅读《Hexo 博客优化之博客美化系列持续更新》
Hexo 交流群924812033有问题可以一起交流解决。 文章目录【01】添加评论系统 【02】添加字数统计和阅读时长 【03】添加网站运行时间 【04】添加百度统计 【05】添加RSS订阅 【06】添加 Fork me on GitHub 效果 【07】更改本地预览端口号 【08】启用 HTTPS 【09】博客备份 【10】自定义一个不使用主题模板渲染的独立页面 未完待续...... 【01】添加评论系统
主流的评论系统有很多比如网易云跟帖、多说、友言、畅言、来必力LiveRe、Disqus、Valine、Gitalk 等等目前网易云跟帖、多说、友言都已经关闭了还有些可能国内还访问不了比较麻烦百度了一下最后还是选择了来必力评论系统
进入来必力官网注册一个账号
注册完毕之后登录进入安装页面选择 City 免费版安装安装之后你会得到一段代码 我们打开主题文件下的 _config.yml 文件添加如下代码
在 \themes\hexo-theme-spfk\layout\_partial\comments 文件夹下新建一个 livere.ejs 的文件在里面填写来必力提供的代码
!-- 来必力City版安装代码 --
div idlv-container data-idcity data-uid这里是你的uidscript typetext/javascript(function(d, s) {var j, e d.getElementsByTagName(s)[0];if (typeof LivereTower function) { return; }j d.createElement(s);j.src https://cdn-city.livere.com/js/embed.dist.js;j.async true;e.parentNode.insertBefore(j, e);})(document, script);/scriptnoscript为正常使用来必力评论功能请激活JavaScript/noscript
/div
!-- City版安装代码已完成 --打开 \themes\hexo-theme-spfk\layout\_partial\article.ejs 文件在适当位置添加如下红框中的代码
完成以上操作之后我们就可以使用来必力评论系统了 另外推荐使用 Valine 评论系统和 gitalk 评论系统 【02】添加字数统计和阅读时长
先在博客目录下执行以下命令安装 hexo-wordcount 插件
$ npm i --save hexo-wordcount注意在 Material X 主题中字数统计和阅读时长的功能我已提交 PR在最新版本中只需要安装插件后在主题 config.yml 配置文件里将 word_count 关键字设置为 true 即可对于旧版本可以通过以下方法实现
以 Material X 主题版本 1.2.1为例在 \themes\material-x\layout\_meta 目录下创建 word.ejs 文件在 word.ejs 文件中写入以下代码
% if(isPostList || !isPostList){ %% if (theme.word_count !post.no_word_count) { %div stylemargin-right: 10px;span classpost-timespan classpost-meta-item-iconi classfa fa-keyboard/ispan classpost-meta-item-text 字数统计: /spanspan classpost-count% wordcount(post.content) %字/span/span/spannbsp; | nbsp;span classpost-timespan classpost-meta-item-iconi classfa fa-hourglass-half/ispan classpost-meta-item-text 阅读时长≈/spanspan classpost-count% min2read(post.content) %分/span/span/span/div% } %
% } %然后在主题的配置文件 _config.yml 找到 meta 关键字将 word 填入 header 中
meta:header: [title, author, date, categories, tags, counter, word, top]footer: [updated, share]最后在主题目录下的 _config.yml 添加以下配置即可
word_count: true效果图 同样的以 spfk 主题为例在 \themes\hexo-theme-spfk\layout\_partial\post 目录下创建 word.ejs 文件在 word.ejs 文件中写入以下代码
div stylemargin-top:10px;span classpost-timespan classpost-meta-item-iconi classfa fa-keyboard-o/ispan classpost-meta-item-text 字数统计: /spanspan classpost-count% wordcount(post.content) %字/span/span/spannbsp; | nbsp;span classpost-timespan classpost-meta-item-iconi classfa fa-hourglass-half/ispan classpost-meta-item-text 阅读时长: /spanspan classpost-count% min2read(post.content) %分/span/span/span
/div然后在 \themes\hexo-theme-spfk\layout\_partial\article.ejs 中适当位置添加以下代码
最后在主题目录下的 _config.yml 添加以下配置即可
word_count: true如果显示的位置不好可以自行更改其位置成功配置后的效果如下 另外要在博客底部显示所有文章的总字数可以点击此处根据你博客底部文件的类型选择相应的代码放在适当的位置即可前提是要安装好 hexo-wordcount 插件例如我使用 Material X 主题在 \themes\material-x\layout\_partial 目录下的 footer.ejs 文件中添加如下代码
i classfas fa-chart-area/i
span classpost-count字数统计% totalcount(site) %/span实现效果如下 【03】添加网站运行时间
一个比较好的小功能可以看见自己的博客运行多久了时间一天天的增加成就感也会一天天增加的 在 \themes\hexo-theme-spfk\layout\_partial\footer.ejs 文件下添加以下代码
span idtimeDate载入天数.../spanspan idtimes载入时分秒.../span
scriptvar now new Date(); function createtime() { var grt new Date(08/10/2018 17:38:00);//在此处修改你的建站时间格式月/日/年 时:分:秒now.setTime(now.getTime()250); days (now - grt ) / 1000 / 60 / 60 / 24; dnum Math.floor(days); hours (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum Math.floor(hours); if(String(hnum).length 1 ){hnum 0 hnum;} minutes (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); mnum Math.floor(minutes); if(String(mnum).length 1 ){mnum 0 mnum;} seconds (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); snum Math.round(seconds); if(String(snum).length 1 ){snum 0 snum;} document.getElementById(timeDate).innerHTML 本站已安全运行 dnum 天 ; document.getElementById(times).innerHTML hnum 小时 mnum 分 snum 秒; }
setInterval(createtime(),250);
/script最后效果如下 【04】添加百度统计
百度统计是百度推出的一款免费的专业网站流量分析工具能够告诉用户访客是如何找到并浏览用户的网站在网站上做了些什么非常有趣接下来我们把百度统计添加到自己博客当中
访问百度统计首页注册一个账号后登陆添加你的博客网站 接着点击代码获取复制该代码
然后到目录 \themes\hexo-theme-spfk\layout\_partial 下新建一个 baidu-analytics.ejs 文件里面粘贴你刚刚复制的代码
修改主题文件夹下的 _config.yml 文件将你的key图中涂掉部分填写进去
所有操作完成后可以在百度统计管理页面检查代码是否安装成功如果代码安装正确一般20分钟后可以查看网站分析数据
另外推荐友盟2010年4月在北京成立安全、可靠、公正、第三方的网站流量统计分析系统 【05】添加RSS订阅
RSS订阅是站点用来和其他站点之间共享内容的一种简易方式即Really Simple Syndication简易信息聚合如果不会使用可以参见百度百科https://baike.baidu.com/item/RSS%E8%AE%A2%E9%98%85/663114 首先我们安装feed插件在本地hexo目录下右键Git Bash Here输入以下命令
$ npm install hexo-generator-feed等待安装完成后打开hexo目录下的配置文件 _config.yml在末尾添加以下配置
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20随后打开主题配置文件 _config.yml添加以下配置
rss: /atom.xml至此RSS订阅功能添加完成 【06】添加 Fork me on GitHub 效果
效果图 点击此处可以查看更多样式将相应样式的代码复制到你想要放的地方就OK了代码里的链接也要替换成你的更多创意比如 Follow me on CSDN 只需要用PS改掉图片里的文字替换掉相应链接即可 【07】更改本地预览端口号
hexo博客在执行hexo s进行本地预览的时候默认端口号是4000当该端口号被占用时会报错 Error: listen EADDRINUSE 0.0.0.0:4000 此时可以关闭占用该端口的进程也可以更换端口号更换端口号可以通过以下两种方法实现
方法一在根目录的_config.yml配置文件内加上如下代码更改hexo s运行时的端口号
server:port: 5000compress: trueheader: true方法二通过 hexo server -p 5000 命令来指定端口这种方法只是本次执行有效 【08】启用 HTTPS
参考我的另一篇文章《利用官方支持为基于GitHub Pages的Hexo博客启用HTTPS》 【09】博客备份
参考我的另一篇文章《使用 hexo-git-backup 插件备份你的 Hexo 博客》 【10】自定义一个不使用主题模板渲染的独立页面
参考我的另一篇文章《Hexo 博客自定义一个不使用主题模板渲染的独立页面》 未完待续…
