Fluid主题的个性化拓展

目前博客个性化进度

1. 完成了配色修改，了解了一下配置项写法和CSS的修改方式
2. 标签云并没有达到理想的状态，但也足矣

目标功能玩法

添加网站运行时间

• 已完成，按照相关教程即可

归档页面—-TimeLine

echart实现数据统计可视化

在线实验项目

• 机器学习
  • 模型部署到云端
  • 制作API调用
  • 通过实验室的某一功能指定实现，以下方式可行？
    • 上传文件
    • 表单输入，传递参数，点击发送

修改Markdown样式，优化视觉效果

• 根据配置模拟为Typora的主题Mo dark
• 公式使用问题

$$t即为输出，b为偏置单元，w_i为权重，x_i为输入单元\\ t=f(\sum_{i=1}^nw_ix_i+b)=f(\mathbf{w}^T\mathbf{x})\\ \sum_{i=1}^nw_ix_i+b 正是'分界线'\\ 其数值大小无非以下，直接带入激活函数便能得到判断结果\\ \sum_{i=1}^nw_ix_i+b \begin{cases} \geq 0 \\[2ex] <0 \end{cases} \\ \mathbf{w}^T\mathbf{x} ，是上一公式的简化写法，在计算机中使用向量的计算（矩阵点积）$$

• 测试Latex语法的支持效果，以及检测BUG，hexo的LaTeX效果不如Typora，多行公式需要用 \begin{aligned} ... \end{aligned}，换行符 \\ 和定位符 &。添加了这些代码内容后，渲染正常如下

• 代码块折叠实现

  • 打开文章默认代码折叠

  • 通过折叠代码按钮可以实现代码的折叠与打开

实现步骤：

1. 找到copy-btn所在位置，看能否通过js添加折叠代码块按钮
2. 写脚本

使用Echarts制图

• [x] 完成

制作仿造GitHub的日历图

1️⃣制图

• 先使用hexo-tag-echarts 插件写入md文件中制作简单的图表（制图）

2️⃣绑定数据

1. 先将数据获取并渲染到about页面中

• 通过ejs注入的方式，插入到about的html样式中，通过site.posts变量获取所有文章的信息

1. 在.md中直接插入JavaScript脚本，通过获取页面指定DOM元素形成数据集合，然后自定义function方法对图标的数据进行初始化和更新

//echart_make.js
/*
var dom = document.getElementById("container")
var myChart = echarts.init(dom)
var app = {}
*/
//获取今年年份
var thisYear = new Date().getFullYear()
var option

//计算是今年的第几天
function parseDate(year, month, day) {
    var feb = 0
    if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
        feb = 29
    } else {
        feb = 28
    }
    var sum = day
    var months = [0, 31, feb, 31, 30, 31, 30, 31, 31, 30, 31, 30]

    for (var i = 1; i <= month; i++) {
        sum += months[i - 1]
    }
    console.log(sum)
    return sum
}

//解决如何填入年份作为数据以及该日提交文章数
function getVirtualData(year) {
    year = year;
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate(+year + 1 + '-01-01');
    var dayTime = 3600 * 24 * 1000;
    var dateMap = [];
    for (var time = date; time < end; time += dayTime) {
        dateMap.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            0
        ]);
    }
    //对日历图进行更新
    var dates = document.getElementsByClassName("date-map");
    for (var i = 0; i < dates.length; i++) { //循环获取每个input表单元素值
        var text = dates[i].innerText //通过innerText或者innerHTML获取元素的文本值
        var year = Number(text.slice(0, 4))
        var month = Number(text.slice(5, 7))
        var day = Number(text.slice(8, 10))
        console.log(year, month, day)
        if (year == thisYear) {
            var date = parseDate(year, month, day)
            dateMap[date - 1][1] += 1
        }
    }
    return dateMap
};


//------------about/index.md----------

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript" src="/js/echart_make.js" ></script>

{% echarts 300 '85%' %}
option = {
        title: {
            top: 20,
            left: 'center',
            text: 'Publish'
        },
        tooltip: {},
        visualMap: {
            type: 'piecewise',
            orient: 'horizontal',
            pieces: [
                { gte: 31 },
                { gte: 21, lt: 31 },
                { gte: 11, lt: 21 },
                { gte: 1, lt: 11 },
                { value: 0, color: '#fff' }
            ],
            showLabel: false,
            left: 'center',
            top: 65,
            inRange: {
                color: ['rgb(220,233,200)', 'rgb(123,201,111)', 'rgb(25,98,35)']
            }
        },
        calendar: {
            //获取今年年份
            range: thisYear,
            top: 120,
            left: 30,
            right: 30,
            cellSize: ['auto', 15], //width:auto,height:15
            itemStyle: {
                borderWidth: 2,
                borderColor: '#d0d0d0',
                borderType: 'solid',
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 1
            },

            yearLabel: {
                show: true,
                margin: 11,
                position: 'bottom'
            },
            splitLine: {
                show: true,
                //分割线样式
                lineStyle: {
                    width: 3,
                    color: '#264653'
                }
            },
            //使用自定义纵坐标标签
            dayLabel: {
                position: 'start',
                margin: 8,
                firstDay: 1,
                show: true,
                //nameMap: 'ZH',
                nameMap: ['Sun', 'Mon', 'Tue', 'Wed', 'Thur', 'Fir', 'Sat'],
                color: '#E9C46A',
                fontStyle: 'normal',
                fontWeight: 'bold',
                fontFamily: 'Arial',
                align: 'left'
            },
            monthLabel: {
                show: true,
                margin: 12,
                nameMap: 'EN',
                color: "#fff"

            }
        },
        series: {
            type: 'heatmap',
            coordinateSystem: 'calendar',
            //series的data只接受数组数据，不接受键值对
            data: getVirtualData(thisYear)
        }
    };

{% endecharts %}

不足

1. 是一种间接的途径获取的数据集合，因为通过EJS注入元素后我将这些直接渲染的数据设置了隐藏，然后再通过document.getElementsByClassName()来存储

但这是一种取巧的办法，因为对于fluid主题的开发我并不完全明白其完整的工作机制，只通过一些时间摸索出以下结论

• EJS是为了更快捷方便的在模板中生成HTML代码，可以通过简单的标签来引用变量
• HEXO博客中的一些变量只能通过EJS语句来调用和访问，不能通过JavaScript代码来获取

1. 生成的echarts图并不能即时适配屏幕大小，不够毕竟热点图在电脑这样的设备下选择横向展示，移动设备上可以采取纵向显示（待完善）

改进优化

1️⃣使用iframe嵌入写好的图表页面，但需要调整好页面的大小，适应主题模板的样式

<iframe src="/html/...." width="100%" height="600" name="topFrame" scrolling="yes" noresize="noresize" frameborder="0" id="topFrame">
</iframe>

• 缺陷

1. 不能借助ejs引用全局变量，在html中不能这样，因为自定义的html都设置了跳过渲染，也就不会启用EJS语法

2. 因此这种方法只能用于引入一些静态页面，不能访问网站内部的变量

2️⃣绘制的图表并不具备自适应界面的大小而随之变化，需要添加如下代码

网站数据统计制图

1️⃣方案

• 使用旭日图，这种相当于饼状图和柱状图的结合，能够更加形象的体现父类与子类的层级关系，以及各父类之间的统计量上的差别
• 使用饼状图，将各分类文章数、文章数量、各标签对应的文章数、文章的访问量、网站访问量都统计下来【南丁格尔图，比较形象】

2️⃣思路

• 需要单独建立一个页面，专门设置为统计数据的展示
• 如何打通这个流程，一个新的页面渲染，要获取到后台的数据，并且是注册在导航栏中的页面

3️⃣具体操作

1. 需要注册一个analyzer模板，建立文件有analyzer.ejs，在全局变量_pages/variables中添加对应要设置的一些样式信息（可忽略），然后在config.fluid.yml中增加一栏专门设置这些信息，也可以不这样做，直接沿用博客中其他相似的模板配置
2. 在generator/pages.js中添加渲染生成analyzer页面的代码
3. 在analyzer.ejs引入博客全局变量site.categories、site.tags等快速渲染至模板中，然后在analyzer/index.md中仿造我的关于页面那样，进行echarts的制图

问题

1. 经过研究，在generator/pages.js中添加生成指定页面的代码能够正常实现其功能的前提是：

   ​ 该页面是不需要渲染Markdown文件内容的页面，由于我需要创建的数据统计页面和about本质上是一种，需要通过创建自定义页面的方法来渲染

   ​ 因此在这一步我走了弯路，没有弄清机制，导致思考方向错误。

2. 自定义页面的生成很简单，只需要执行以下代码

hexo new page analyzer
//会生成/source/analyzer/index.md文件
//编写index.md的内容即可
hexo clean&&hexo g&&hexo s
//重新渲染启动,就可以看到analyzer的出现，当然不要忘了在config.fluid,yml中

1. 使用指定页面生成与否的方式如下写法，需要加载数据和布局，并指定生成index.html

//------------custom by sherlock--------
// generate about page
hexo.extend.generator.register('about', function(locals) {
  if (this.theme.config.about.enable !== false) {
    return {
      path  : 'about/index.html',
      data  : locals.theme,//读取配置文件的数据
      layout: 'about'
    };
  }
});

• 我本想通过上述代码尝试能否控制about页面的显示，但通过测试，这串代码丝毫不起作用，不过方法还是有的，要想取消about的显示，在主题配置文件中修改导航栏菜单的配置选项、去掉about的字段，让我们无法通过导航栏打开（但这丝毫不影响我们通过URL直接访问）

menu:
  - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
  - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
  - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
  - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
  #去掉此处
  # - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }
  - { key: "labs", link: "/labs/", icon: "iconfont icon-exp-fill" }
  - { key: "analyzer", link: "/analyzer/", icon: "iconfont icon-code" }

---

默认配置信息

• CSS样式

(color.link_hover_color", "#30a9de")
$link-hover-color-dark = theme-config("color.link_hover_color_dark", "#30a9de")