Hexo的Butterfly侧边栏博主自己的基金组合估值展示插件

这年头基金已经成为90后的社交工具了，今天涨了跌了，从一无所有到家破人亡（误。给朋友展示自己的基金组合是非常有趣的事情。（但不应该劝他人购买基金，如果一直跌就是感情破裂的开始，特别是新入场的一般都拿不住，跌了10个点就要卖了。

在这个背景下写了一个能够看自己的基金组合估值的小组件，作为交流的入口。感谢doctorxiong提供的API。

样式预览

使用教程

放入组件

在themes/butterfly/layout/includes/widget文件夹新建card_funds.pug。

if theme.aside.card_funds.enable
  .card-widget#card-funds
    .item-headline
      i.fas.fa-bolt
      span= _p('aside.card_funds.headline')
    .funds-list
      span= _p('aside.card_funds.loading_text')
    .funs-tips
      span= _p('aside.card_funds.tips')
  script.
    var fundslist = {funds: '!{theme.aside.card_funds.funds_list}'}
	script(type='text/javascript', src='//cdn.jsdelivr.net/gh/zhheo/hexo-butterfly-widget-Funds@1.0/funds.js', data-pjax='')

这个就是包含了基本的元素，和里面的文案、基本html的结构。

引入js和css

将代码文件插入到配置项目中themes/butterfly/_config.yml

1
2
3

inject:
  head:
+	  - <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/zhheo/hexo-butterfly-widget-Funds@1.0/funds.css">

配置组件内容

配置主题配置文件themes/butterfly/_config.yml

 card_webinfo:
    enable: true
    post_count: true
    last_push_date: false
    sort_order: # Don't modify the setting unless you know how it works
+  card_funds:
+    enable: true
+    funds_list: 003834,005827,110011,004997,005918,166002 #你的基金组合代码，逗号分开

配置语言文件

编辑themes/butterfly/languages文件夹中你所采用的语言文件，添加以下内容

aside:
 card_newest_comments:
	headline: 最新评论
	loading_text: 正在加载中...
	error: 无法获取评论，请确认相关配置是否正确
	zero: 没有评论
	image: 图片
	link: 链接
	code: 代码
	card_toc: 目录
+card_funds:
+	headline: 基金
+	zero: 没有基金
+	loading_text: 正在加载中...
+	tips: 博主的自选估值变动，不构成投资建议

插入到侧边栏

编辑文件themes/butterfly/layout/includes/widget/index.pug

#aside-content.aside-content
  //- post
  if is_post()
    if showToc && theme.toc.style_simple
      .sticky_layout
        include ./card_post_toc.pug
    else
      !=partial('includes/widget/card_author', {}, {cache: true})
      !=partial('includes/widget/card_announcement', {}, {cache: true})
+      !=partial('includes/widget/card_funds', {}, {cache: true})
      .sticky_layout
        if showToc
          include ./card_post_toc.pug
        !=partial('includes/widget/card_recent_post', {}, {cache: true})
        !=partial('includes/widget/card_ad', {}, {cache: true})
  else
    //- page
    !=partial('includes/widget/card_author', {}, {cache: true})
    !=partial('includes/widget/card_announcement', {}, {cache: true})
+    !=partial('includes/widget/card_funds', {}, {cache: true})
    .sticky_layout
      //- !=partial('includes/widget/card_recent_post', {}, {cache: true})
      !=partial('includes/widget/card_ad', {}, {cache: true})
      !=partial('includes/widget/card_newest_comment', {}, {cache: true})
      !=partial('includes/widget/card_categories', {}, {cache: true})
      !=partial('includes/widget/card_tags', {}, {cache: true})
      !=partial('includes/widget/card_archives', {}, {cache: true})
      !=partial('includes/widget/card_webinfo', {}, {cache: true})
      !=partial('includes/widget/card_self', {}, {cache: true})