Hexo-theme-yilia简单配置

本文说明介绍hexo-theme-yilia的简单配置

本文简单配置yilia主题

1、作者注释的说明

2、添加tag栏

3、添加多说评论

4、其它的注意事项

作者注释的说明

作者github上的文档说明

# Header

menu:
  主页: /
  随笔: /tags/随笔/

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #qq: "#"
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #mail: "mailto:litten225@qq.com"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

rss: /atom.xml

# 是否需要修改 root 路径
# 如果您的网站存放在子目录中,例如 http://yoursite.com/blog,
# 请将您的 url 设为 http://yoursite.com/blog 并把 root 设为 /blog/。
root:

# Content

# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false

# 打赏
# 请在需要打赏的文章的md文件头部,设置属性reward: true

# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay:
# 微信二维码图片地址
weixin:

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png

#你的头像url
avatar:

#是否开启分享
share_jia: true

#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: false

# 样式定制 - 一般不需要修改,除非有很强的定制欲望…
style:
  # 头像上面的背景颜色
  header: '#4d4d4d'
  # 右滑板块背景
  slider: 'linear-gradient(200deg,#a0cfe4,#e8c37e)'

# slider的设置
slider:
  # 是否默认展开tags板块
  showTags: false

# 智能菜单
# 如不需要,将该对应项置为false
# 比如
#smart_menu:
#  friends: false
smart_menu:
  innerArchive: '所有文章'
  friends: '友链'
  aboutme: '关于我'

friends:
  友情链接1: http://localhost:4000/
  友情链接2: http://localhost:4000/
  友情链接3: http://localhost:4000/
  友情链接4: http://localhost:4000/
  友情链接5: http://localhost:4000/
  友情链接6: http://localhost:4000/

aboutme: 很惭愧<br><br>只做了一点微小的工作<br>谢谢大家


模块分析

menu模块,可以随意添加,里面的内容是在创建之后,生成在tags文件夹下的,发布在github过后可以在浏览器中查看
menu:
  主页: /
  随笔: /tags/随笔/


subnav模块,添加社交页面,把“#”更换为自己的账号链接即可
subnav:
github: "#"
weibo: "#"


Content模块,这里数学公式保持false就好
# Content

# 文章太长,截断按钮文字
excerpt_link: more
# 文章卡片右下角常驻链接,不需要请设置为false
show_all_link: '展开全文'
# 数学公式
mathjax: false
# 是否在新窗口打开链接
open_in_new: false


打赏模块,这个图片地址是在 source 目录下的,所以要在source下创建文件夹,然后把资源放进去,这样在启动服务在浏览器中的位置才是正确的,所以我们在编辑之后看效果要在部署以后看,本地可能是不同步的
# 打赏
# 请在需要打赏的文章的md文件头部,设置属性reward: true

# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 2
# 打赏wording
reward_wording: '谢谢你请我吃糖果'
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay:
# 微信二维码图片地址
weixin:


Miscellaneous模块,前两个是设置百度和谷歌搜索的,favicon设置标签页图标的
# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /favicon.png



其它的就没有什么难度了们自己改改看就好


添加tag栏

这个就是tag栏


tag样式

一开始不是这么显示的,会提示错误,要加一段代码在根目录的_config.yml中

jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: true
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

现在再打开看一下,是不是就好了~~~


添加多说评论

1、注册多说账号——多说官网

2、多说的设置信息

多说设置

我们接下来会用到——

域名
密钥

3、修改文件

修改文件是

themes-->yilia文件夹-->_config.yml

修改内容为——

#是否开启多说评论,填写你在多说申请的项目名称 duoshuo: duoshuo-key
#若使用disqus,请在博客config文件中填写disqus_shortname,并关闭多说评论
duoshuo: 密钥


themes-->yilia-->layout-->_partial-->post-->duoshuo.ejs

修改内容为——在多说设置内复制,然后更改<%%>包住内容

<!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%=key%>" data-title="<%=title%>" data-url="<%=url%>" style="margin:40px;border:4px solid #CCCCCC;padding:15px;border-radius:15px;"></div>
<!-- 多说评论框 end -->
<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"个人域名短名字"};
    (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0]
         || document.getElementsByTagName('body')[0]).appendChild(ds);
    })();
    </script>
<!-- 多说公共JS代码 end -->

OK,目前为止,在本地上的操作到一段落,下面就要部署到github,并且关联域名咯~

部署GitHub-域名

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,628评论 19 139
  • 1. 设置主题风格 打开 themes/next/_config.yml 文件,搜索 scheme 关键字,将你...
    迟道阅读 21,357评论 10 47
  • 内容简介此篇文章介绍的是个人博客的一些配置内容,包含博客项目的介绍、主题配置、图床配置以及各种第三方功能插件的使用...
    Little_Dragon_阅读 1,805评论 0 9
  • 不知道为什么部分图片上传失败,一直上传不成功,如果有需要大家可以去我的小站观看 背景 作为一个开发者不能没有博客,...
    茉莉儿阅读 2,104评论 3 10
  • 昨天晚上,对门的阿姨在门口送别即将远渡重洋的女儿,和女儿以及外孙的临别拥抱该是多么不舍,本来家在河南,为了免去女儿...
    大龙蛋儿阅读 422评论 0 4

友情链接更多精彩内容