零基础学习GitHub桌面版-8配置你的Hexo

2024-06-22 15:08
文章标签 github 桌面版 hexo 配置 学习 基础

本文主要是介绍零基础学习GitHub桌面版-8配置你的Hexo，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

  • 完善你的页面
    • 1 标签页 Tags page
    • 2 分类页 Categories page
    • 3 社交媒体连接 Social Media Contact
      • 31如何在contacts中增加新的选项
    • 4 Feed 链接 Feed link
  • 评论支持 Comment support
  • 开通网站内搜索
  • 开通站内统计
  • 小技巧
    • 1 设置favicon
    • 2 主页显示摘要
    • 3 文章预览图片
    • 4支持数学公式

1. 完善你的页面

新站初见，还有一些网站页面是空的，比如tags还有分类页面、自我介绍页面，打开的时候显示404，下面挨个配置。

1.1 标签页 Tags page

添加一个标签页面，里面包含您网站中的所有标签。

  • 使用hexo命令创建一个名为 tags 页面
hexo new page "tags"

此时生成了文件夹：INFO Created: ~/Desktop/MyBlog/source/tags/index.md

  • 编辑标签页 index.md, 设置页面类型为tags.
title: All tags
date: 2018-01-18 13:39:45
type: "tags"
layout: "tags"
  • 添加 tags 到主题配置文件 _config.yml 里（注意是主题的配置文件）:
menu:home: archives: archivestags: tags

然后执行：

hexo clean
hexo g -d
然后输入github账号密码

然后去访问自己的网站 https://xqtbox.github.io 吧，哈哈，漂亮

1.2 分类页 Categories page

添加一个分类页面，里面包含您网站中的所有分类

  1. 使用hexo命创建一个名为 categories 页面
hexo new page "categories"

这样就创建了：INFO Created: ~/Desktop/MyBlog/source/categories/index.md

  1. 编辑分类页categories/index.md, 设置页面类型为 categories.
title: All categories
date: 2014-12-22 12:39:04
type: "categories"
layout: "categories"
  1. 添加 categories 到主题配置文件 _config.yml 里:
menu:home: archives: archivescategories: categories

然后执行：

hexo clean
hexo g -d
然后输入github账号密码

然后去访问自己的网站 https://xqtbox.github.io 吧，哈哈，漂亮

1.3 社交媒体连接 Social Media Contact

配置一下主题 可以自动添加链接到您的社交媒体帐户里:

social:GitHub: your-github-urlTwitter: your-twitter-urlWeibo: your-weibo-urlDouBan: your-douban-urlZhiHu: your-zhihu-url

填写真实地址即可。

1.3.1如何在contacts中增加新的选项？

但是我们不一定有facebook和twitter，那么如何在contacts中增加中文的新的选项？如新浪微博、微信等，并且添加对应的图标？

答案是：
访问 http://fontawesome.io/icons/ ，找到自己需要的图标，然后将对应的icon名称直接填入主题的配置文件的cantacts中。
例如：

contacts:github: http://github.com/xqtbox/twitter: 'https://twitter.com/hanangellove'weibo: "http://weibo.com/1619592223/"rss: atom.xml

这个网站提供了一些国内常见的contact比如 新浪微博、微信、百度等公司，但是这个网站不提供的就不行了。

显示 feed 链接。也就是RSS订阅：

在主题配置文件_config.yml里设置rss , 如下所示:

  1. rss: false 会禁用 feed 链接。

  2. rss: 使用站点 feed 链接。这是默认的选项。
    按照插件hexo-generator-feed的README中的安装说明进行操作。在完成这个插件的配置后，Feed链接也生成好了

  3. rss: http://your-feed-url 设置你的 feed 链接.

2. 评论支持 Comment support

博客是用来交流与分享的地方，如果不能评论，那就会少很多乐趣。下面我们配置Disqus 评论系统。

好消息是NexT 已经原生支持 Disqus 评论系统，我们只需要简单配置，过程思路如下：

  1. 去disqus官网申请个帐号，免费的。
  2. 注册的时候填写一个用户名（shortname）
  3. 复制这个用户名在博客配置文件里，就ok了

首先账号的注册过程见： https://www.jianshu.com/p/c4f65ebe23ad

注册好后，进入theme文件夹，再进入你的主题，打开你的主题配置文件 _config.yml 添加以下代码:

disqus_shortname: your-disqus-shortname

然后执行：

hexo clean
hexo generate
hexo deploy

然后去访问自己的网站 https://xqtbox.github.io 吧，哈哈，漂亮

注意，这个评论系统部署在国外，不翻墙是看不到评论的…不过程序员肯定都翻墙，也没关系。

3.开通网站内搜索

image

Insight Search是一个插件，用于搜索你的网站内的文字。下面是配置方法：

  1. install hexo-generator-json-content
sudo npm install -S hexo-generator-json-content
  1. 更改配置文件：
insight: true

同时可以开启Baidu搜索，但是不推荐。 (Not Recommended)

baidu: true

4.开通站内统计

使用LeanCloud平台为Hexo博客添加文章浏览量统计组件：
http://crescentmoon.info/2014/12/11/popular-widget/

注册LeanCloud(Xu4…)
1. 首先到『控制台』创建一个应用，名字随便取。
2. 点击新建应用的『数据』选项，选择『创建Class』，取名为”Counter“。
3. 点击新建应用右上角的齿轮，在『应用Key』选项里得到APP ID 和 APP Key，在后面会用到。

修改hexo页面生成文件
1. 新建popular_posts.ejs

首先在theme/你的主题/layout/_widget目录下新建popular_posts.ejs文件,其内容为

<% if (site.posts.length){ %><div class="widget-wrap"><h3 class="widget-title">浏览数目</h3><div class="widget"><ul class="popularlist"></ul></div></div>
<% } %>
  1. 修改head.ejs

修改theme/你的主题/layout/_partial/head.ejs文件,在head标签的最后插入：

<script src="https://cdn1.lncld.net/static/js/av-min-1.2.1.js"></script>
<script>AV.initialize("你的APP ID", "你的APP Key");</script>
  1. 修改after-footer.ejs

修改theme/你的主题/layout/_partial/after-footer.ejs文件,在最后插入：

<!--page counter part-->
<script>
function addCount (Counter) {url=$('.article-date').attr('href').trim();title = $('.article-title').text().trim();var query=new AV.Query(Counter);//use url as unique idnetficationquery.equalTo("url",url);query.find({success: function(results){if(results.length>0){var counter=results[0];counter.fetchWhenSave(true); //get recent resultcounter.increment("time");counter.save();}else{var newcounter=new Counter();newcounter.set("title",title);newcounter.set("url",url);newcounter.set("time",1);newcounter.save(null,{success: function(newcounter){//alert('New object created');},error: function(newcounter,error){alert('Failed to create');}});}},error: function(error){//find null is not a erroralert('Error:'+error.code+" "+error.message);}});
}
$(function(){var Counter=AV.Object.extend("Counter");//only increse visit counting when intering a pageif ($('.article-title').length == 1)addCount(Counter);var query=new AV.Query(Counter);query.descending("time");// the sum of popular postsquery.limit(10); query.find({success: function(results){for(var i=0;i<results.length;i++)    {var counter=results[i];title=counter.get("title");url=counter.get("url");time=counter.get("time");// add to the popularlist widgetshowcontent=title+" ("+time+")";//notice the "" in href$('.popularlist').append('<li><a href="'+url+'">'+showcontent+'</a></li>');}},error: function(error){alert("Error:"+error.code+" "+error.message);}})});
</script>

这段代码的核心逻辑就是对Counter对象的增加和查询，每一篇文章都会有一个time字段来记录访问次数。这里查询的时候我用的是文章通过Hexo生成的URL作为主键的，所以post文件夹目录下的文件名一旦取好就不要轻易修改了，要不然访问次数会重新计算的:)。

  1. 修改config.yml

最后，修改theme/你的主题/config.yml文件,在widgets:选项找个位置下添加- popular_posts即可。

还可以参考：https://notes.wanghao.work/2015-10-21-%E4%B8%BANexT%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E6%96%87%E7%AB%A0%E9%98%85%E8%AF%BB%E9%87%8F%E7%BB%9F%E8%AE%A1%E5%8A%9F%E8%83%BD.html#%E9%85%8D%E7%BD%AELeanCloud

5.小技巧：

5.1 设置favicon：

favicon的全称Favorites Icon，即地址栏左侧的图标：

image

有个在线工具可以上传自己的图片去生成指定规格的favicon.ico文件： http://www.atool.org/ico.php 。打开主题配置文件_config.yml可以看到favicon的配置信息：

# Put your favicon.ico into `hexo-site/source/` directory.
favicon: css/images/favicon.png

根据说明，我们将图标取名为favicon.ico然后放到当前工程的hexo\source目录下，重启博客即可生效。

5.2 主页显示摘要

要实现摘要，只需要在文章开头写好摘要后，另起一行键入

---
这是摘要
<!-- more -->
这是正文

也就是想显示多少就显示多少。

如果不想显示“Read More”而显示别的文字比如“”，打开主题的配置文件，定位到如下位置：

_config.yml

excerpt_link: Read More

改为：

excerpt_link:

5.3 文章预览图片

如何设置preview 中的文章标题都是在图片下面。

在头文件的里面添加：

banner: http://blog.zhangruipeng.me/hexo-theme-icarus/gallery/salt-lake.jpg

这样文章又漂亮，在主页上还能显示小图片。

5.4支持数学公式

为了支持MathJax数学公式，只需要在主题的_config.yml文件中加上：plugins.mathjax = true

# Plugins
plugins:...mathjax: true # options: true, false

同时还要设置/layout/plugin/scripts.ejs:：

<% if (theme.plugins.mathjax) { %><!-- Edit here --><script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$'], ['\\(','\\)']] } });</script><%- js('https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML') %>
<% } %>

发现第二步已经做好了，不用我们写，更新发布一下看效果。

这篇关于零基础学习GitHub桌面版-8配置你的Hexo的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1084640。

相关文章

51单片机学习记录———定时器

51单片机学习记录———定时器

文章目录 前言一、定时器介绍二、STC89C52定时器资源三、定时器框图四、定时器模式五、定时器相关寄存器六、定时器练习 前言 一个学习嵌入式的小白~ 有问题评论区或私信指出~ 提示：以下是本篇文章正文内容，下面案例可供参考 一、定时器介绍 定时器介绍：51单片机的定时器属于单片机的内部资源，其电路的连接和运转均在单片机内部完成。 定时器作用： 1.用于计数系统，可
阅读更多...
问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 #其他#学习方法#微信

问题：第一次世界大战的起止时间是 A.1913 ~1918 年 B.1913 ~1918 年 C.1914 ~1918 年 D.1914 ~1919 年 参考答案如图所示
阅读更多...
[word] word设置上标快捷键 #学习方法#其他#媒体

[word] word设置上标快捷键 #学习方法#其他#媒体

word设置上标快捷键 办公中，少不了使用word，这个是大家必备的软件，今天给大家分享word设置上标快捷键，希望在办公中能帮到您！ 1、添加上标 在录入一些公式，或者是化学产品时，需要添加上标内容，按下快捷键Ctrl+shift++就能将需要的内容设置为上标符号。 word设置上标快捷键的方法就是以上内容了，需要的小伙伴都可以试一试呢！
阅读更多...
Linux 安装、配置Tomcat 的HTTPS

Linux 安装、配置Tomcat 的HTTPS

Linux 安装 、配置Tomcat的HTTPS 安装Tomcat 这里选择的是 tomcat 10.X ,需要Java 11及更高版本 Binary Distributions ->Core->选择 tar.gz包 下载、上传到内网服务器 /opt 目录tar -xzf 解压将解压的根目录改名为 tomat-10 并移动到 /opt 下, 形成个人习惯的路径 /opt/tomcat-10
阅读更多...
AssetBundle学习笔记

AssetBundle学习笔记

AssetBundle是unity自定义的资源格式，通过调用引擎的资源打包接口对资源进行打包成.assetbundle格式的资源包。本文介绍了AssetBundle的生成，使用，加载，卸载以及Unity资源更新的一个基本步骤。 目录 1.定义： 2.AssetBundle的生成： 1）设置AssetBundle包的属性——通过编辑器界面 补充：分组策略 2）调用引擎接口API
阅读更多...
RedHat运维-Linux文本操作基础-AWK进阶

RedHat运维-Linux文本操作基础-AWK进阶

你不用整理，跟着敲一遍，有个印象，然后把它保存到本地，以后要用再去看，如果有了新东西，你自个再添加。这是我参考牛客上的shell编程专项题，只不过换成了问答的方式而已。不用背，就算是我自己亲自敲，我现在好多也记不住。 1. 输出nowcoder.txt文件第5行的内容 2. 输出nowcoder.txt文件第6行的内容 3. 输出nowcoder.txt文件第7行的内容 4. 输出nowcode
阅读更多...
Javascript高级程序设计(第四版)--学习记录之变量、内存

Javascript高级程序设计(第四版)--学习记录之变量、内存

原始值与引用值 原始值：简单的数据即基础数据类型，按值访问。 引用值：由多个值构成的对象即复杂数据类型，按引用访问。 动态属性 对于引用值而言，可以随时添加、修改和删除其属性和方法。 let person = new Object();person.name = 'Jason';person.age = 42;console.log(person.name,person.age);//'J
阅读更多...
大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

大学湖北中医药大学法医学试题及答案，分享几个实用搜题和学习工具 #微信#学习方法#职场发展

今天分享拥有拍照搜题、文字搜题、语音搜题、多重搜题等搜题模式，可以快速查找问题解析，加深对题目答案的理解。 1.快练题 这是一个网站 找题的网站海量题库,在线搜题,快速刷题~为您提供百万优质题库,直接搜索题库名称,支持多种刷题模式:顺序练习、语音听题、本地搜题、顺序阅读、模拟考试、组卷考试、赶快下载吧! 2.彩虹搜题 这是个老公众号了 支持手写输入，截图搜题，详细步骤，解题必备
阅读更多...
uniapp接入微信小程序原生代码配置方案（优化版）

uniapp接入微信小程序原生代码配置方案（优化版）

uniapp项目需要把微信小程序原生语法的功能代码嵌套过来，无需把原生代码转换为uniapp，可以配置拷贝的方式集成过来 1、拷贝代码包到src目录 2、vue.config.js中配置原生代码包直接拷贝到编译目录中 3、pages.json中配置分包目录，原生入口组件的路径 4、manifest.json中配置分包，使用原生组件 5、需要把原生代码包里的页面修改成组件的方
阅读更多...
Vim使用基础篇

Vim使用基础篇

本文内容大部分来自 vimtutor，自带的教程的总结。在终端输入vimtutor 即可进入教程。 先总结一下，然后再分别介绍正常模式，插入模式，和可视模式三种模式下的命令。 目录 看完以后的汇总 1.正常模式（Normal模式） 1.移动光标 2.删除 3.【:】输入符 4.撤销 5.替换 6.重复命令【. ; ,】 7.复制粘贴 8.缩进 2.插入模式 INSERT
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2