diff --git a/docs/smartchart/404.html b/docs/404.html similarity index 95% rename from docs/smartchart/404.html rename to docs/404.html index 4542223..be93afe 100644 --- a/docs/smartchart/404.html +++ b/docs/404.html @@ -9,7 +9,7 @@ - + 404 Page not found | Smartchart开发手册 diff --git a/docs/archetypes/default.md b/docs/archetypes/default.md deleted file mode 100644 index 00e77bd..0000000 --- a/docs/archetypes/default.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "{{ replace .Name "-" " " | title }}" -date: {{ .Date }} -draft: true ---- - diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss deleted file mode 100644 index 9be7a1d..0000000 --- a/docs/assets/_custom.scss +++ /dev/null @@ -1,4 +0,0 @@ -/* You can add custom styles here. */ - -// @import "plugins/numbered"; -// @import "plugins/scrollbars"; diff --git a/docs/assets/_variables.scss b/docs/assets/_variables.scss deleted file mode 100644 index 98b4d4e..0000000 --- a/docs/assets/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -/* You can override SASS variables here. */ diff --git a/docs/smartchart/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css b/docs/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css similarity index 100% rename from docs/smartchart/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css rename to docs/book.min.c58292d36b18b675680ab9baea2029204537b839ea72f258746ec0f32ce8d6c8.css diff --git a/docs/smartchart/categories/index.html b/docs/categories/index.html similarity index 99% rename from docs/smartchart/categories/index.html rename to docs/categories/index.html index b8835cc..cc75991 100644 --- a/docs/smartchart/categories/index.html +++ b/docs/categories/index.html @@ -8,7 +8,7 @@ - + Categories | Smartchart开发手册 @@ -18,7 +18,7 @@ - + 点击上传图标, 将这个python文件上传即可 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0412/173154_8362828e_5500438.png "屏幕截图.png") - -- 新建数据源, 驱动填写之前上传过的文件名, 比如我们这个是diy_conn, 其它参数按照你自定义的需求填写, 会自动传入你的自定义函数 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0412/173434_dfe99697_5500438.png "屏幕截图.png") - -之后你可以正常使用这个自定义数据源了 - -如果你对python不熟悉, 也可按需定制, 你只需上传即可使用 - - diff --git a/docs/content/docs/3.图形开发/.keep b/docs/content/docs/3.图形开发/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/3.图形开发/Echarts组件.md b/docs/content/docs/3.图形开发/Echarts组件.md deleted file mode 100644 index dde5608..0000000 --- a/docs/content/docs/3.图形开发/Echarts组件.md +++ /dev/null @@ -1,119 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- - -### 应用场景 -Smartchart提供了很多通用的图形,你可以在商店中直接使用 -如果要个性化需要你进行自定义, 比如你可能需要在同一个图上展示柱形图和线性图 - -开发前建意先观看视屏, 了解基础说明, 视屏有点老和现在界面不一样, - **目前很多功能已经做成可视化配置, 理解过程即可, 具体以文档为准** - -- [Smartchart数据库与图形的对话](https://www.ixigua.com/6910413586208653837?id=6910373199603565063 "图形开发") -- [Smartchart图形开发一](https://www.bilibili.com/video/BV1X3411t7DQ/ "图形开发") -- [Smartchart图形开发二](https://www.bilibili.com/video/BV1t34y1R7Z8/ "图形开发") - - -### 获取原生echarts图形 -首先我们在ECHART官网可能找一个你喜欢的图形, 如下简单柱形图链接: -[![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/144039_824e0d48_5500438.png "屏幕截图.png")](https://echarts.apache.org/examples/zh/editor.html?c=bar-simple) - -打开我们可以看对应的option: -```javascript -option = { - xAxis: { - type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] - }, - yAxis: { - type: 'value' - }, - series: [{ - data: [120, 200, 150, 80, 70, 110, 130], - type: 'bar' - }] -}; -``` - -### 转化为smartchart图形 -复制到Smartchart图形编辑器， 点击"刀叉“ 图标(目前是魔法梆)， 会自动进行初步转化 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/144446_3f9cbf1e_5500438.png "屏幕截图.png") - -接下来我们就进行下改造, 请注意对比, 你只需照着复制即可 -```javascript -let dataset = __dataset__ //传入dataset -let legend_label = ds_rowname(dataset) //可选, 自动获取legend -let xlabel = dataset[0].splice(1) //x轴的标签列 -dataset = ds_createMap(dataset) //转化成KV格式 - -//初始化series -var series=[]; -series.push({ - data: dataset[legend_label[0]], //对应的第一个图列 - type: 'bar' - }); -series.push({ - data: dataset[legend_label[1]], //对应的第二个图列 - type: 'line' - }); - -option__name__ = { - xAxis: { - type: 'category', - data: xlabel //X轴的标签 - }, - yAxis: { - type: 'value' - }, - series:series, -}; -charts.push(myChart__name__); -``` -这样一个柱形+线性图就出来了 -[![线柱混合图](https://www.smartchart.cn/media/media/photo/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20191110144542.png "线柱混合图")](https://www.smartchart.cn/echart/editor_min/?chartid=61 "线柱混合图") - -当然一个图形还有很多其它的元素, 比如标题, legend, 等等 更多option的配置项, 可以点击”！“号图标查看，你可以直接参考echarts的设定， **完全一样！！** - -以下我们做了些简单的修改 -```javascript -option__name__ = { - title: { - text: '自定义图示例', - left: 'center' - }, //定义标题的显示 - tooltip: { - trigger: 'item', - formatter: '{a}
{b} : {c}' //鼠标移动提示的格式 - }, - legend: { - left: 'left', - data: legend_label - }, //定义图例的显示 - xAxis: { - type: 'category', - data: xlabel - }, //定义X轴的显示 - yAxis: { - type: 'value' - }, - //图例定义 - series:series, -}; -``` - -```javascript -//关于自动化series, 可以参考以下代码 -var series =[]; -for (var i=1;i TIPS: -> - 如果你在图形编辑器中可以显示图形， 但是保存后在dashboard中无法， 首先检查下所有的mychart, option是否都有转化成带__name__, 如果都有，可能原因是你的代码中有mychart.setoption， 这样你可以在代码下方加上myChart__name__.setOption(option__name__);即可 -> - 如果你在开发界面的仪表盘能看到图形显示，但预览仪表盘时，不显示图形，一般都是因为你图形代码中js结束需加分号的地方没有添加导致的 \ No newline at end of file diff --git a/docs/content/docs/3.图形开发/ElementUI组件/.keep b/docs/content/docs/3.图形开发/ElementUI组件/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/3.图形开发/ElementUI组件/_index.md b/docs/content/docs/3.图形开发/ElementUI组件/_index.md deleted file mode 100644 index 3129875..0000000 --- a/docs/content/docs/3.图形开发/ElementUI组件/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 330 ---- diff --git a/docs/content/docs/3.图形开发/ElementUI组件/带分页的表格.md b/docs/content/docs/3.图形开发/ElementUI组件/带分页的表格.md deleted file mode 100644 index 7096c19..0000000 --- a/docs/content/docs/3.图形开发/ElementUI组件/带分页的表格.md +++ /dev/null @@ -1,94 +0,0 @@ - -### 模式开启 -需要开启模板开发模式, 并开启basevue模板 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0624/155210_520fad81_5500438.png "屏幕截图.png") - - -### 在Body加入组件 -```html - -
- - - - - - - - -
- -``` - -### 在JS区域加入 -``` -var vapp = new Vue({el: '#vue_app', delimiters: ['{[', ']}'], - data: { - tableData:[], //表数据 - tableHead:[], //表头 - currentPage:1, - total:20, - pageSize:10 - - }, - methods: { - //处理分页数量 - handlerSizeChange(val){ - this.currentPage = 1; - this.pageSize=val; - }, - //处理页选择 - handlerCurrentChange(val){ - this.currentPage = val; - } - } - - }); - - -``` - -### 新增一个数据集 -``` -select * from smartdemo2 -limit /* $limit -- */ 100 - -``` -### 图形开发中修改 - -```js -let df0 = __dataset__; -//处理表头 -let columnsDict = {'c1':'渠道','qty':'数量'}; -let tableHead = []; -let tableHeadLabel; -for (let i=0;i smartchart内置了这个查询模板, 你可以通过[本地模板恢复快速应用](https://gitee.com/smartchart/smartchart/wikis/1.%E5%9F%BA%E7%A1%80%E6%93%8D%E4%BD%9C/%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF) diff --git a/docs/content/docs/3.图形开发/HTML组件.md b/docs/content/docs/3.图形开发/HTML组件.md deleted file mode 100644 index e39285f..0000000 --- a/docs/content/docs/3.图形开发/HTML组件.md +++ /dev/null @@ -1,53 +0,0 @@ ---- -weight: 4 -type : docs -bookFlatSection : false ---- - -### 应用场景 -- 输入控件,如输入框,筛选器,多选,按钮... -- 显示组件, 文本, 图片, 视屏... -- 表格组件 -> 如果你还不熟悉html, 建意先花几分钟看下文档, 推荐 [HTML基础](https://www.runoob.com/html/html-tutorial.html) -> 实际应用中有不熟悉的组件, 你都可以通过baidu搜索到, 如时间选择器 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0731/211441_f3eb7ce4_5500438.png "屏幕截图.png") - -### 如何将html组件转化为smartchart组件 -比如我们要实现一个有多选项和按钮的网页元素 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/150141_1e0ba921_5500438.png "屏幕截图.png") - -从各大搜索平台上我们可以找到html的代码是： -```html - -..... - -``` -那么我们可以直接在图形编辑器写上 -```js -let dataset=__dataset__; -let table = ''; -table = ` - - ` -table = table + "" - -dom__name__.innerHTML=table; -``` -但是由于我们是要通过传入的数据动态变化的，所以只需要做简单修改 -```js -let dataset=__dataset__; -let table = ''; -for (let i=1;i${dataset[i][0]} ` -} -table = table + "" - -dom__name__.innerHTML=table; -``` -所有html你都可以进行转化成smartchart组件， -你可以通过学习”万能表格系列视屏“ 来了解通用组件开发 -[第一波](https://www.bilibili.com/video/BV1Ma41187oZ) -[第二波](https://www.bilibili.com/video/BV1SR4y1F7Pp) -[第三波](https://www.bilibili.com/video/BV11P4y1T7gX) - - diff --git a/docs/content/docs/3.图形开发/_index.md b/docs/content/docs/3.图形开发/_index.md deleted file mode 100644 index 6fcc2e9..0000000 --- a/docs/content/docs/3.图形开发/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 300 ---- diff --git a/docs/content/docs/3.图形开发/函数方法/.keep b/docs/content/docs/3.图形开发/函数方法/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/3.图形开发/函数方法/Jquery遍历方法.md b/docs/content/docs/3.图形开发/函数方法/Jquery遍历方法.md deleted file mode 100644 index 9a2d9a2..0000000 --- a/docs/content/docs/3.图形开发/函数方法/Jquery遍历方法.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- - -在做自定义html组件的时候你可能需要用得上： - -一、向上遍历 - -1. parent() 获取元素的直接父元素 -``` -$("span").parent().css({ - "color":"red", - "border":"1px solid red" -}) -``` - -2. parents() 获取元素的祖先元素，直到根元素html -``` -$("span").parents().css({ - "color":"red", - "border":"1px solid red" -}) -``` -3. parentsUntil() 向上查找直到遇见某个祖先元素为止 -``` - $("span").parentsUntil("div").css({ //向上查找直到遇见div元素为止 - "color":"red", - "border":"1px solid red" -}) -``` -二、向下遍历 -``` -1. children() 查找子元素[按照从属关系] - -$("ul").children("li:first-child") - -2. find() 按照指定的条件向下查找 - -$("ul").find("span") - -``` -三、水平遍历 - -``` -1. siblings() 获取元素的所有兄弟元素 - -$(".start").siblings().css({color:"red",border:"2px solid red"}) - -2. next() 获取元素的下一个兄弟元素 - -$(".start").next().css({color:"red",border:"2px solid red"}) - -3. nextAll() 获取其后的所有兄弟元素 - -$(".start").nextAll().css({color:"red",border:"2px solid red"}) - -4. nextUntil() 查找后面所有的兄弟元素，直到遇见某个元素为止 - -$(".start").nextUntil("li:last-child").css({color:"red",border:"2px solid red"}) - -5. prev() 查找上一个兄弟元素 - -$("li.start").prev().css({color:"red",border:"2px solid red"}) - -6. prevAll() 查找上面所有的兄弟元素 - -$("li.start").prevAll().css({color:"red",border:"2px solid red"}) - -prevUntil() 查找上面所有的兄弟元素，直到遇见某个元素为止 -$(".start").prevUntil("li:first").css({"color":"red","border":"2px solid red"}) - -``` - -四、过滤 - -``` -1. first() 获取第一个元素 - -$("li").first().css("color","red"); - -2. last() 获取最后一个元素 - -$("li").last().css("color","red"); - -3. not() 获取不是…的元素 - -$("li").not(":eq(2)").css("font-size","26px"); - -4. eq(n) 获取索引为n的元素 - -$("li").eq(3).css("background","green"); - -5. has() 检测某个子元素是否存在 - -$("li").eq(1).has("span").length) - -6. filter() 筛选出与符合条件的DOM元素 - -$("div")..filter(".middle") - -7. is() 用来判断是否符合条件 - -$("p").parent().is("div") //判断p的父元素是不是div,是就返回true,不是就返回false - -``` - -五、each遍历 - -``` -1. each() 方法为每个匹配元素规定要运行的函数。 - -$(selector).each(function(index,element){ - ..... -}) -//index 表示当前遍历元素的索引 - element 当前的元素（也可使用 "this" 选择器） - -2. $.each(obj,function( index,value){}) -``` diff --git a/docs/content/docs/3.图形开发/函数方法/_index.md b/docs/content/docs/3.图形开发/函数方法/_index.md deleted file mode 100644 index 88f78c4..0000000 --- a/docs/content/docs/3.图形开发/函数方法/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 310 ---- diff --git a/docs/content/docs/3.图形开发/函数方法/图形端数据函数.md b/docs/content/docs/3.图形开发/函数方法/图形端数据函数.md deleted file mode 100644 index 0658b9a..0000000 --- a/docs/content/docs/3.图形开发/函数方法/图形端数据函数.md +++ /dev/null @@ -1,155 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- -### 应用场景 -在图形开发中，我们可能需要使用js对传递过来的数据进行处理 - -### 原始数据格式 -假设dataset的格式是, SQL = Select 维度1,维度2,数据 from xxxx, 生成的数据集如下 -```javascript -dataset = [['category','C1','C2'], - ['R1', 12, 18], - ['R2', 10, 17] ] -``` - -### 转化函数 -#### 生成字典表示为key->[], 常用于定制化高的图形 -``` -result = ds_createMap(dataset) -结果 = {"category":['C1','C2'], - "R1" : [12, 10], - "R2" : [18, 17]} -``` - -#### 生成非常多前端组件要求的格式 -``` -result = ds_createMap_all(dataset) -结果 = [{"category":"R1", "C1": 12, "C2": 18}, - {"category":"R2", "C1": 10, "C2": 17}] - -``` - -#### 获取列名list, 用于获取系列名 -``` -result = ds_rowname(dataset) -结果 = ['R1','R2'] -``` - -#### 将数据集行列转化, 一般用于坐标轴翻转 -``` -result = ds_transform(dataset) -结果 = [['category','R1','R2'], - ['C1', 12, 10], - ['C2', 18, 17]] -``` - - -#### 两个数据集左关联, 常用于将两段查询数据合并 -``` -假设需要关联的数据集格式： -dataset2 = [['category','C3'], - ['R1', 38], - ['R6', 13]] -处理后的结果： -result = ds_leftjoin(dataset, dataset2) -结果 = [['category','C1','C2','C3'], - ['R1', 12, 18, 38], - ['R2', 10, 17, 0] ] - -``` - -#### 数据集旋转，在excel中叫透视表 -``` -比如需要将dataset3的户型变成指标 -dataset3 = [['城市','户型','数量'], - ['长沙','A',35], - ['上海','B',19]] -处理后的结果： -result = ds_pivot(dataset3) -结果 = [["城市","A","B"], - ["长沙",35,0], - ["上海",0,19]] -``` - -#### 移除数据集中的某几列 -``` -比如移除第1列（序号0） -result=ds_remove_column(dataset,remove_list=[0]) - 结果 = [['R1','R2'], - [12, 10], - [18, 17] ] -``` - -### smartchart图形中可用的转化函数 -| 函数名| 函数说明 | 样列 | -| :-----| :----: | :----: | -| ds_transform(dataset) | 行列替换 | | -| ds_split(data,sep=',',head_add=[]) | 将第一列拆分成多个字段,默认逗号分隔, 如果不传表头,取SQL中的字段名拆分 | | -| ds_createMap(data) | data表示传入的二位数组,生成结果表示为key->[], 常用于echarts指定数据| | -| ds_createMap_all(data) | data表示传入的二维数组,生成结果表示为[{A:A1,B:B1,C:C1},{A:A2,B:B2,C:C2}...] | | -| ds_mapToList(data) | 将createMap_all的格式还原成二维数组, 常用于将nosql(mongodb,es..)数据源数据处理 | | -| ds_fontSize(rem) | 基于分辨率自动转字体大小, 参数rem | | -| ds_rowname(dataset,start_row=1,column=0) | 获取指定列的数据, 默认取第一列从第二行(序号1)开始的数据,常用于获取维度 | | -| ds_remove_column(dataset,remove_list=[0]) | 默认移除第一列, 也要移除指定的多个列 | | -| ds_toThousands(num) | 转逗号分隔的千分位 | | -| ds_distinct(a, b=[]) | 对单个或多个二维数组去重 | | -| ds_leftjoin(a,b,withhead=true,type=1) | 两个数组join [[1,2,3,4],[2,3,4,5]] ,[[2,3,4]], 如果带头,合并头 | | -| ds_crossjoin(a,b,withhead=true) | | | -| ds_fulljoin(a,b,withhead=true) | | | -| ds_union(a,b,withhead=true) | 合并两个数据集, 可选是否带头, 取第一个数据集的头, 去除第二个头 | | -| ds_pivot(arr) | 传入一下二维数组(维度, 维度, 值), 进行透视 | | -| ds_sort(arr, index=0, asc=true)|指定二维数组列序号排序,默认升序,index参数也可以是函数,如(a,b)=>{return a.qty - b.qty}|| -| getUndefined(param,defaultValue) | 获取value值,如果为空,null,undefined给默认值 | | -| ds_round(num,qty=2) | 小数点处理, 默认保留两位小数 | | -| ds_param(name) | 传入参数名,获取图形点击时传递来的参数值 | | -| ds_setParam('参数名', 参数值) | 设定全局参数, 此方法将自动判断当参数值为空时, 删除参数回到初始未传参状态 | | -| ds_refresh(id, param=filter_param) | 刷新图形, id为图形序号,默认采取全局参数刷新,也可指定param,参数为字典{"参数名":"值",...} | | - -#### 多维度的数据透视 -```sql -常规数据集中提到 A类数据源的情况, 格式都是: -维度A 维度B 数据 -但还有情况比如你有一个数据格式是: -维度A 维度B 维度C 数据 -你需要在表格中将 A,B维度做维度, 但C做透视为指标名进行展示 -由于我们的数据透视只支持"字符, 字符, 数值"的SQL写法, -所以如果要多维, 我们需要做下转变, 可以写成: -select concat_ws(',',维度A,维度B) AS 维度,维度C,SUM(数据) AS 度量 - from tablename group by 维度, 维度C -得到的数据样式 -dataset=[['维度','C1','C2'....] - ,['A1,B1',1,1...] - ,['A2,B2',2,2...]] -最终在图形数据集处理中, 我们可以使用如下函数进行转化: -dataset = ds_split(dataset,',',['维度A','维度B']) -',' : 参数为分隔符 -['维度A','维度B'] : 指第一个字段需要拆分的表头名称 - -最终得到的数据就是多维度透视 -[['维度A','维度B','C1','C2'....] -,['A1','B1',1,1...] -,['A2','B2',2,2...]] - -``` - -### 常用JS原生函数 -```javascript -//数组追加 -dataset.push(item) -//数组前方插入 -dataset.unshit(item) -//切片 -dataset = dataset.slice(1) 从序号1个开始到最最后一个 -dataset = dataset.slice(5, 10) 从第序号5开始截取到第10个 -dataset = dataset.slice(-3) 截取最后三个元素 -//循环遍历 -for最快，但可读性比较差(smartchart推荐) -forEach比较快，能够控制内容 -for...in比较慢，不方便 -for(let i=0; i注意: ->对于一些特殊图形如地图js在图形编辑中需要进行动态加载, 如果你使用了非常规图形, ->你可在图形编辑器使用ds_loadjs('smt_china’)加载中国地图, 同理我们有 'smt_wordcloud', 'smt_world', 'smt_ecStat', ‘smt_liquidfill’ ->![输入图片说明](https://images.gitee.com/uploads/images/2022/0114/173407_210747ca_5500438.png "屏幕截图.png") -有些图形可能同时需要在模板中加载, 更多特殊图形加载说明参考 [特殊图形模板加载](https://gitee.com/smartchart/smartchart/wikis/3.%E5%9B%BE%E5%BD%A2%E5%BC%80%E5%8F%91/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2/%E7%89%B9%E6%AE%8A%E5%9B%BE%E5%BD%A2%E5%8A%A0%E8%BD%BD) \ No newline at end of file diff --git a/docs/content/docs/3.图形开发/特殊图形/.keep b/docs/content/docs/3.图形开发/特殊图形/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/3.图形开发/特殊图形/LineUp图形.md b/docs/content/docs/3.图形开发/特殊图形/LineUp图形.md deleted file mode 100644 index b20b192..0000000 --- a/docs/content/docs/3.图形开发/特殊图形/LineUp图形.md +++ /dev/null @@ -1,39 +0,0 @@ -Smartchart内置了LineUp图形 -LineUp is an interactive technique designed to create, visualize and explore rankings of items based on a set of heterogeneous attributes. -![输入图片说明](https://images.gitee.com/uploads/images/2022/0514/121520_5108b6aa_5500438.png "屏幕截图.png") - -LineUp图形参考 -``` -ds_loadcss('smt_LineUp'); -ds_loadjs('smt_LineUp'); -let dataset = __dataset__; -dataset = ds_createMap_all(dataset); -try{Ljs__name__.destroy()}catch{} -Ljs__name__ = LineUpJS.asTaggle(dom__name__, dataset); - -// 点击选中行响应动作 -Ljs__name__.on(LineUpJS.LineUp.EVENT_SELECTION_CHANGED, (selection) => { - console.log(Ljs__name__.data._data[selection]); - //通过以上log可以查看到数据格式， 以下就是标准的联动写法 - filter_param['LineupParam'] = Ljs__name__.data._data[selection].xx - ds_refresh(2); -}); - -//更多响应动作 -Ljs__name__.on(LineUpJS.LineUp.EVENT_HIGHLIGHT_CHANGED, (highlight) => { -}); - -// document.querySelector('button#select').addEventListener('click', () => { -// Ljs__name__.setSelection([1, 2, 3]); -// }); - -// document.querySelector('button#highlight').addEventListener('click', () => { -// Ljs__name__.setHighlight(50); -// }); - -// 获取筛选后的数据并下载(来源与"路阳" 赞助开发) -outputStr=Ljs__name__.data.exportTable(Ljs__name__.data.getRankings()[0], {}); -outputStr = outputStr.replace(/\t/g, ','); -ds_download('abc.csv', outputStr); - -``` \ No newline at end of file diff --git a/docs/content/docs/3.图形开发/特殊图形/_index.md b/docs/content/docs/3.图形开发/特殊图形/_index.md deleted file mode 100644 index af824b9..0000000 --- a/docs/content/docs/3.图形开发/特殊图形/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 320 ---- diff --git a/docs/content/docs/3.图形开发/特殊图形/使用图标.md b/docs/content/docs/3.图形开发/特殊图形/使用图标.md deleted file mode 100644 index c685e04..0000000 --- a/docs/content/docs/3.图形开发/特殊图形/使用图标.md +++ /dev/null @@ -1,11 +0,0 @@ -在"模板"中加载图标资源 -![输入图片说明](https://foruda.gitee.com/images/1666771377756298544/5284c8b2_5500438.png "屏幕截图") -使用方法, 可参考[font-awesome菜鸟教程](https://www.runoob.com/font-awesome/) -V5图标名称参考, 也可以[图标样列查询](https://fontawesome.com/v5/search?m=free) -![输入图片说明](https://foruda.gitee.com/images/1666771225555399207/7297f070_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1666771254760961161/c7969b9c_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1666771286618942574/077cccc5_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1666771299178448204/f451e770_5500438.png "屏幕截图") \ No newline at end of file diff --git a/docs/content/docs/3.图形开发/特殊图形/无缝滚动.md b/docs/content/docs/3.图形开发/特殊图形/无缝滚动.md deleted file mode 100644 index 0abbccf..0000000 --- a/docs/content/docs/3.图形开发/特殊图形/无缝滚动.md +++ /dev/null @@ -1,102 +0,0 @@ -### 通用滚动 -例如你的html如下 -``` -
-
    -
  • smartchart
    • -
  • bigdata
    • -
  • echarts
    • -
  • make it great
    • -
-
-``` -你只需要使用以下函数, 即可实现在无缝滚动 -由于smtid是ID, 则使用 ds_liMarquee('#smtid') 即可开启自动滚动 -如果 class="smtclass", 那么也可以使用类选择器 ds_liMarquee('.smtclass') - -我们也可以使用更多的配置方法 - -``` - marconfig={ - playtime: 3000, //滚动3秒 - pausetime: 3000, //停3秒 - config:{ - direction: 'up',//向上滚动 - runshort: false,//内容不足时不滚动 - scrollamount: 20//速度 - } - } -``` -可以使用 ds_liMarquee('#smtid', marconfig) 传入配置 - -更多config说明: -| 名称 | 类型 | 默认值 |说明 | -| :-----| :----: | :----: | :----: | -|direction|字符串|left|滚动方向，可选 left / right / up / down| -|loop|整数|-1|循环次数，-1 为无限循环| -|scrolldelay|整数|0|每次重复之前的延迟| -|scrollamount|整数|50|滚动速度，越大越快| -|circular|布尔值|true|无缝滚动，如果为 false，则和 marquee 效果一样| -|drag|布尔值|true|鼠标可拖动| -|runshort|布尔值|true|内容不足是否滚动| -|hoverstop|布尔值|true|鼠标悬停暂停| -|xml|布尔值|false|加载xml 文件| -|inverthover|布尔值|false|反向，即默认不滚动，鼠标悬停滚动| - - -### 内置滚动表格 -smartchart内置了滚动表格, 可以一键生成 -如果你需要修改表格的样式, 如字体,颜色等, 你可以在模板中重定义样式 -具体样式的写法, 参考 [样式快速入门](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A0%B7%E5%BC%8F%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B) -``` -如下例修改表头高度为5rem, 内容单元格高度3rem 及背景字体等 -/*表头样式*/ -.smtlisthead{ - background: #fff2cc; - color: red; - height: 5rem; -} - -.smtlisthead span{ - height: 5rem; -} - -/*表格本体样式*/ -.smtlistnav{ - height: calc(100% - 5rem); - color: red; - overflow: auto; -} - -.smtlistnav li span{ - height: 3rem; -} - - -/*修改奇数行背景*/ -.smtlistnav ul li:nth-child(odd){ background: rgba(100,100,100,.1);} -偶数行将odd改为even - -/*指定某单独格宽度对齐*/ - - - - -/*单元格点击响应*/ -let lastClickDom; -let lastDomColor; -$('#smtlist__name__, li').click(function(params){ - try{lastClickDom.css('background', lastDomColor)}catch{} - lastDomColor = $(this).css('background'); - $(this).css('background', 'yellow'); - lastClickDom = $(this); - let myparam = $(this).children('span').eq(0).text(); //获取点击的参数 - //以下加入你的action - -}); - -``` - - - - diff --git a/docs/content/docs/3.图形开发/特殊图形/特殊图形加载.md b/docs/content/docs/3.图形开发/特殊图形/特殊图形加载.md deleted file mode 100644 index 060bdea..0000000 --- a/docs/content/docs/3.图形开发/特殊图形/特殊图形加载.md +++ /dev/null @@ -1,17 +0,0 @@ -smartchart默认只会引echarts的基础图形 -如果你需要使用到更多图形, 你可以自行引用,可以写在模板的javascript标签中 -```html -中国地图 - -世界地图 - -统计图 - -水球图 - -词云 - -百度地图 - -``` -![输入图片说明](https://foruda.gitee.com/images/1660102429603844013/屏幕截图.png "屏幕截图.png") diff --git a/docs/content/docs/3.图形开发/管理图形.md b/docs/content/docs/3.图形开发/管理图形.md deleted file mode 100644 index 09e988c..0000000 --- a/docs/content/docs/3.图形开发/管理图形.md +++ /dev/null @@ -1,16 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### 应用场景 -如何快速复用已开发好的组件 - -### 本地管理自定义组件 -如下图,点击图形编辑器中的菜单,即可管理和查看自定义图形列表 -点击"加入样列"即可把当前图形加入到样列清单, 点击"取消样列"即可将所选样列移除样列清单 -![输入图片说明](https://foruda.gitee.com/images/1660268106972088891/屏幕截图.png "屏幕截图.png") - -### 云管理,在图形商店中保存你的图形 -这样你就可以在图形商店看到你的图形进行重复利用 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/183846_748d993e_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/3.图形开发/调试日志.md b/docs/content/docs/3.图形开发/调试日志.md deleted file mode 100644 index 2b6a580..0000000 --- a/docs/content/docs/3.图形开发/调试日志.md +++ /dev/null @@ -1,29 +0,0 @@ ---- -weight: 5 -type : docs -bookFlatSection : false ---- - -### 关于页面日志查看 -大家可能比较熟悉使用F12来查看网页日志, 但有的同学会觉得这不够方便, 所以 -在5.1.11后, smartchart加入了可以页面直接显示日志的功能 -#### 在仪表盘中显示 -你只需要点击如下菜单, 即可切换是否显示日志 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0121/125624_db39bf19_5500438.png "屏幕截图.png") -当在刷新页面或执行时, 日志将直接显示在右上角中, 而且还能显示出对应出错的图表序号 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0121/125833_52cd65a6_5500438.png "屏幕截图.png") - -### 在图形中显示 -smartchart基于python的使用习惯, 重定义的专用的日志打印函数print -你可以在图形编辑器中使用些函数即可打印日志 -比如看看鼠标放在echarts图上params, 在编辑界面和console中都能看到日志, 方便你进行调试 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0121/131443_4ad386fd_5500438.png "屏幕截图.png") - -不仅仅这些, 你可能会想写太多打印日志, 上线了不好 -smartchart已为你想到这些, 如果你在仪表盘中没有开启日志显示, print函数是不会打印任何日志 - -有了仪表盘日志显示, 我们还能做更多的事情, 比如实时显示你拖拽的坐标, 让你精确定位 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0121/131920_7bccafcb_5500438.png "屏幕截图.png") - - - diff --git a/docs/content/docs/4.布局说明/.keep b/docs/content/docs/4.布局说明/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/4.布局说明/_index.md b/docs/content/docs/4.布局说明/_index.md deleted file mode 100644 index 57fe94e..0000000 --- a/docs/content/docs/4.布局说明/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 400 ---- diff --git a/docs/content/docs/4.布局说明/不常用/.keep b/docs/content/docs/4.布局说明/不常用/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/4.布局说明/不常用/_index.md b/docs/content/docs/4.布局说明/不常用/_index.md deleted file mode 100644 index 75e0fbf..0000000 --- a/docs/content/docs/4.布局说明/不常用/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 410 ---- diff --git a/docs/content/docs/4.布局说明/不常用/代码转化布局.md b/docs/content/docs/4.布局说明/不常用/代码转化布局.md deleted file mode 100644 index 8fc6b96..0000000 --- a/docs/content/docs/4.布局说明/不常用/代码转化布局.md +++ /dev/null @@ -1,26 +0,0 @@ - **由于我们移除了boostrap的布局方式, 此布局不再做推荐!** -初次学习的同学, 可能会需要一个拖拉拽的布局方式(3.9.9.13以上才支持), 所以下面介绍的是smartchart的辅助布局方法 -- 你可以在"布局" 中找到入口 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/175555_73e10028_5500438.png "屏幕截图.png") - -- 进入编辑器后, 你可以拖拉拽的方式进行布局, 注意我们建意你一个column(C)容器只放一个smartchart的图形便于标准化 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/175407_42027a6e_5500438.png "屏幕截图.png") - -- 点击"生成", 复制相关代码 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180334_b08207c4_5500438.png "屏幕截图.png") - -- 回到仪表盘"布局", 粘贴到编辑器, 点击 "闪电" 图标, 进行转化, 可能会提示你数据集不够,这样你需要新增足够数量的数据集后再点转化 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180631_676fc8b9_5500438.png "屏幕截图.png") - -注: 代码转化布局你可以不用可视化辅助, 可以用其它任意每三方布局工具生成代码后粘过来生成, 需要注意的格式是: - 在你需要数据集的地方使用以下代码即可: -```html -
- -``` - - -- 转化完成后, 点击保存即可应用布局 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/180911_ca30e40a_5500438.png "屏幕截图.png") - -![输入图片说明](https://images.gitee.com/uploads/images/2021/0708/181014_ecdc7504_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/4.布局说明/不常用/容器管理界面.md b/docs/content/docs/4.布局说明/不常用/容器管理界面.md deleted file mode 100644 index ac84cda..0000000 --- a/docs/content/docs/4.布局说明/不常用/容器管理界面.md +++ /dev/null @@ -1,18 +0,0 @@ -### 容器管理 -- 你可以单独对一个容器进行编辑，或者在全局进行编辑 - -![输入图片说明](https://images.gitee.com/uploads/images/2021/0702/083203_7d6ec135_5500438.png "屏幕截图.png") - - -- 全局编辑器 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0702/083830_5234ea26_5500438.png "屏幕截图.png") - - -- 移动图形 -1. 你有两种方法移动数据集 -可以在“报表” 中直接暴力修改序号 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0702/084200_f799dec1_5500438.png "屏幕截图.png") - -2. 也可以在数据集编辑器中移动， -可选择插入（带着容器一起动），替换（容器不动，就是整体布局不变化， 只移动数据和图形） -![输入图片说明](https://images.gitee.com/uploads/images/2021/0702/084354_8902c980_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/4.布局说明/删除容器.md b/docs/content/docs/4.布局说明/删除容器.md deleted file mode 100644 index 061bb28..0000000 --- a/docs/content/docs/4.布局说明/删除容器.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- - -对于仪表盘中不再使用的数据集，你可能会考虑删除 -首先smartchart推荐你不做删除，因为你可以保留他， 当你下次有新增数据集的需求时再拿出来 -所以优先推荐使用隐藏的方法,你可以在数据集编辑界面找到他 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0731/204219_407d1b14_5500438.png "屏幕截图.png") -如果你实在需要删除，可以在“报表”界面先中不需要容器后，选中删除，后保存 - -![输入图片说明](https://images.gitee.com/uploads/images/2021/0702/085254_1a4d0ead_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/4.布局说明/布局指引.md b/docs/content/docs/4.布局说明/布局指引.md deleted file mode 100644 index bae082c..0000000 --- a/docs/content/docs/4.布局说明/布局指引.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- -### 整理一份完整的SmartChart布局说明 -推荐先观看视屏了解[smartchart布局方式](https://b23.tv/2YwZfCi) - -### 容器说明 - - -| 容器 | 说明 | -| :-----| :----: | -| 定位容器 | 用于图形定位, 有拖拽和栅格两种. 在界面上新增时会自带;在模板编辑中新增图形时需自行加入容器| -| 图形容器 | 用于图形选择, 使用id选择器, 如序号为2的容器, 选择器为#container_2 | -| 图形 | 可视化的实际单位, 如选择图形中的table标签, 可使用#container_2 table| - - -### 响应式布局 -一般移动端报表推荐使用响应式布局, 一次布局可以同时满足电脑端/移动端的需求 -当你新增一个数据集时, smartchart会给你一段默认的代码 -```html -
-
-
- -el-col-md-24 : 电脑端宽度设定 -控制图形父容器的宽度, 整行分成24个栅格, 如果你想让图形占一半, 就可以改成el-col-md-12 -el-col-xs-24 ：移动端宽度设定 -padding:0.5% 0.5%: -控制图形的上下, 左右内边距, padding: 上 右 下 左 -比如你想要图形在容器中往下走一点, 你可写成 padding: 1% 0 0 0 -height:50%; -盒子的高度, 相对于父容器的高度， 最外层即浏览器高度 -``` - -### 大屏开发推荐使用拖拽布局（PRO) -大家如果开发大屏, 只是用响应式布局可能对于复杂的布局不是很方便, 你也可以采用拖拽绝对定位的方法, 这样你可以随意指定图形的所在位置. -方法可参考视屏 [拖拽说明](https://www.bilibili.com/video/BV1PD4y1c7uz/) -你可以配合使用 ”模板开发“ 来实现高度定制化的效果， 参考 [模板开发指引](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91/%E6%A8%A1%E6%9D%BF%E5%BC%80%E5%8F%91%E7%95%8C%E9%9D%A2) - -### 混合布局(PRO) -你可以考虑先用响应式布局把整体框架画出来, 如果要加一下装饰的情况, 可以用绝对定位(拖拽布局)来实现 diff --git a/docs/content/docs/4.布局说明/拖拽自动对齐.md b/docs/content/docs/4.布局说明/拖拽自动对齐.md deleted file mode 100644 index 86ed33c..0000000 --- a/docs/content/docs/4.布局说明/拖拽自动对齐.md +++ /dev/null @@ -1,13 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -拖拽很方便, 但是精确对齐还是有些手抖, 所以smartchart增加了自动对齐的功能 -你可以在"模板" --> "转化" 中找到这个功能 -首先我们随意拖拽了一些组件 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0228/092103_b34d6921_5500438.png "屏幕截图.png") -然后选中拖拽代码段, 点"拖拽对齐" 后 点"保存" -![拖拽对齐](https://images.gitee.com/uploads/images/2022/0228/092808_786834d5_5500438.png "屏幕截图.png") -就可以查看对齐后的效果了, 再进行下拖拽微调, 重复以上动作到满意 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0228/093116_c5154e1f_5500438.png "屏幕截图.png") diff --git a/docs/content/docs/5.参数及联动钻取/.keep b/docs/content/docs/5.参数及联动钻取/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/5.参数及联动钻取/_index.md b/docs/content/docs/5.参数及联动钻取/_index.md deleted file mode 100644 index 4e2e897..0000000 --- a/docs/content/docs/5.参数及联动钻取/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 500 ---- diff --git a/docs/content/docs/5.参数及联动钻取/参数编写方法.md b/docs/content/docs/5.参数及联动钻取/参数编写方法.md deleted file mode 100644 index 9317069..0000000 --- a/docs/content/docs/5.参数及联动钻取/参数编写方法.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- - -### 使用场景 -- 需要使用图表联动效果 -- 数据服务接口开发 - -### 使用魔法方法(smartchart独创,拒绝抄袭) -#### 基础原理 -```sql -- $参数名, 当有传递参数时将替换相关的值 -- /* ... $参数 ... */, 当参数写在这个区间时, 如果外部没有传入参数, 会自动忽略这一段代码 -- -- 标识之后单行的代码会被忽略 -``` -#### 常见组合应用 -理解以下样列后, 可录活使用组合出各种可能的需求 -- 默认参数: 实现在不传参数时默认参数是当前月份 -``` -select xx from tablename where -calmonth =/*'$calmonth' -- */ to_char(sysdate,'YYYYMM') -``` -- 多个参数: 注意使用1=1及and的位置 -``` -select xx from tablename where 1=1 /* and city = '$city' */ -/* and calmonth ='$calmonth'*/ -``` -- 维度变化: 将字段当成参数 -``` -select /*$calmonth,*/ city, count(1) as qty from tablename -group by /*$calmonth,*/ city -``` -- 维度变化: 当传入月份条件时, 按城市,月份的数据, 不传参数时只看按城市的总数 -``` -select /*月份, -- $Month */ -城市, sum(度量) from tablename -where 1=1 -/* and 月份 > '$Month' */ -group by 城市 -/*,月份 -- $Month*/ -``` -#### 高级开关应用 -以上应用可以通过参数是否有传递来实现开关代码段的效果, 有些场景可能还希望通过参数值来进行代码段的开关 -如下代码可以实现当传递参数type=1 或 type=2 时执行不同的代码段 -使用 "$参数__值" 的方式做为开关 -``` -/* select count(1) as qty from tablename1 $type__1*/ -/* select count(1) as qty from tablename2 $type__2*/ - -``` -再比如 -当参数D传值为"月份"时是统计2022年按月的统计, -传"日期"时统计的是2022年10月按天的统计 -``` -select $D, count(1) as qty from tablename -where 1 = 1 -/* and year='2022' -- $D__日期 $D__月份 */ -/* and month='10' $D__日期 */ -group by -$D -``` -> 加了"--"是为了避免语法错误 - -### 数据集开发调试参数方法 - -```sql -对于开发人员来说, 带参数的SQL调试不方便, 所以支持你在sql中写入默认参数 -方法如下格式, 你可以在sql编辑器的最上方写上 /* {xxxxxx} */, -会默认在开发调试模式下取这些参数, 在用户模式下会忽略 -/* {"月份":"202009","城市":"中山"} */ -select xxx from table xxx - -``` - -### 数据权限行级别控制 -- 当你在sql查询中加上'$username', 会自动替换成登录用户的用户名 -- 如果你是嵌入到第三方系统, 你可以通过url传递参数id, 在后台会转化为参数_id, 在sql中配置$_id即可控制数据权限 -- 可以采用此做数据权限关联后台权限mapping表进行数据权限控制实现不同人看不同的数据 - -### 参数的传递方式 -- 你可以从url传入参数, 在url上加入 ¶m={"参数名":"参数值"} -- 在图形联动的点击过程中会自动传递参数， 具体参考联动相关文档 - -> TIPS -> 当设定参数后, 联动过程dataset的缓存功能失效, 所以不要让带参数的查询设计得太慢 -> 参数如果存在一些非法字符可能会有问题, 比如参数中不可以有#号 diff --git a/docs/content/docs/5.参数及联动钻取/图形联动钻取.md b/docs/content/docs/5.参数及联动钻取/图形联动钻取.md deleted file mode 100644 index 9fe389d..0000000 --- a/docs/content/docs/5.参数及联动钻取/图形联动钻取.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### 数据集准备 -首先在需要进行联动的数据集中SQL的写法如下, 比如对应2号图形: -```sql -注意 /* ... */的写法, 当参数写在这个区间时, 如果外部没有传入参数, -会自动忽略这一段代码, 这样对于联动来说非常重要, -初始时全部显示, 点击其它图形时传入参数进行动态联动 - -select xxx,xxx,xxx from tablename /* where xxxx = '$参数名' */ .... -``` -建意观看视屏比较容易理解: -[数据联动说明](https://www.bilibili.com/video/BV1ra411X7RM) - -### 常规方法 -比如你需要点击0号图形, 指定其它图形联动 -你只需要打开0号图形的数据集编辑页面, 点击标题的位置 -![输入图片说明](https://images.gitee.com/uploads/images/2021/1221/172146_4e75a674_5500438.png "屏幕截图.png") -然后输入相关的参数即可, 以下为sample -![输入图片说明](https://images.gitee.com/uploads/images/2021/1221/172502_167e5e1f_5500438.png "屏幕截图.png") -参数值设定的方法, 你可以先留空, 然后保存, F12打浏览器调试方法 -点击0号图形你需要点击的动作, 你可以右调试窗口的console看到输入的log -比如我们需要传递的参数值是"廉颇", 那么取数据的方法就是data.name, 你把这个填入即可 -![输入图片说明](https://images.gitee.com/uploads/images/2021/1221/173008_8e564751_5500438.png "屏幕截图.png") - -这样就实现按所选数据或所选系列钻取/联动了, **重新点击当前所选**, 恢复原来的 -**如何在图形开发中获取参数值** -``` -图形编辑器中, -你可以使用函数 ds_param('参数名') 来获取传入的参数值 - -``` - -### 高级定制方法 -如果有更多个性化需求,可以在需要点击的图形的编辑器中加入以下代码,你仅仅需要修改的是**序号**和**参数名** -```javascript -//比如传入多个参数进行联动 -myChart__name__.on('click', function(params){ - let myparam = params.seriesName; //获取点击的值 - filter_param['参数名'] = myparam; //填写你的数据集的SQL设定中对应的参数名 - filter_param['参数名2'] = myparam2; //你可以赋值给多个参数 - ds_refresh(3); //3 为你要刷新图形序号 -}); - -``` -你也可以使用更方便的参数赋值方法(5.6以上) -```javascript -//使用方法 -ds_setParam('参数名', 参数值) -此方法将自动判断当参数值为空时, 删除参数回到初始未传参状态 - -``` - -你还可以实现钻取到另外一个报表 -``` -myChart__name__.on('click', function (params) { - let myparam = `¶m={"参数名": "${params.seriesName}"}`; - //拼成url并传参，具体参考数据集说明中的数据联动url传参的方法 - let myurl='http://localhost:8000/echart/?type=目标报表名'+ myparam; - window.open(myurl,'_blank','toolbar=no,scrollbar=no,top=100,left=100,width=800,height=500'); -}); - -``` -> TIPS -> 如果你的参数中存在非法字符如&=, 你可以使用encodeURIComponent函数进行转义后赋值 \ No newline at end of file diff --git a/docs/content/docs/5.参数及联动钻取/筛选器指南.md b/docs/content/docs/5.参数及联动钻取/筛选器指南.md deleted file mode 100644 index 32596d5..0000000 --- a/docs/content/docs/5.参数及联动钻取/筛选器指南.md +++ /dev/null @@ -1,43 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- -### 通用实现方式 -SMARTCHART实现筛选最简单的方法只需要配一个控件即可: -建立一个筛选清单数据集, 自动获取筛选的列表,那么可以这么写 -```sql - Select xxxx as city from tablename..... - 则会生成一个如下的数据集: - [['city'],[选项1],[选项2],..] -``` -良好的习惯, 先保存在数据集 -然后在筛选器数据集中的js编辑器(图形编辑器),填下如下代码: -```js -//如要要美化, 自已加样式, 只要保证id="id_select__name__" -let dataset=__dataset__; -let table ='标题' - -dom__name__.innerHTML=table; - -``` -这个时候你已经可以看到筛选器了 -![输入图片说明](https://images.gitee.com/uploads/images/2021/1222/160420_fd513632_5500438.png "屏幕截图.png") - -现在我们来设定联动效果 - -假设需要被筛选的数据集的SQL这样写,数据集的序号是0 -```sql -//那么在需要被联动的数据集中,如使用pcity做为参数写查询, 比如: -select xx, xx, xx from tablename /* where xx = '$pcity' */ -``` - -现在回到我们筛选器数据集,点击标题的位置, 我们需要使0号图形被筛选器联动, 设置如下即可: -![输入图片说明](https://images.gitee.com/uploads/images/2021/1222/160156_363aa5a2_5500438.png "屏幕截图.png") - -然后你就可以看到筛选效果了, 非常的简单方便, 需要多个图形被联动, 只需用逗号分隔即可 比如: 0, 2, 4 \ No newline at end of file diff --git a/docs/content/docs/5.参数及联动钻取/组件自定义联动.md b/docs/content/docs/5.参数及联动钻取/组件自定义联动.md deleted file mode 100644 index 1f4bce6..0000000 --- a/docs/content/docs/5.参数及联动钻取/组件自定义联动.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -weight: 4 -type : docs -bookFlatSection : false ---- -### 应用场景 -Smartchart对于单项筛选有通用的组件， 可以直接配置即可，但对于个性化的筛选，需要你进行一些简单的定制化，以下就针对多项筛选联动的需求来介绍如何定制化你的筛选联动效果 -通过此例,你可以了解如何自定义任意的联动效果 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/182910_c2b7f3ac_5500438.png "屏幕截图.png") - -### 样列参考 -以我们内置的仪表盘为例， - -第一步，新建一个数据集 - -第二步，在新的数据集中编写查询 -```sql -select distinct H1 as heroname from smartdemo2 limit 10 -``` -第三步，编辑此数据集的图形，可复制以下代码 -```js -//select distinct xx from tablename -let dataset=__dataset__; -let table = ''; -for (let i=1;i${dataset[i][0]} `; -} -table = table + ""; - -dom__name__.innerHTML=table; - -$('#id_select__name__').click( - function(){ - let res = []; - $("input[name='select__name__']:checked").each(function(i){ - res.push("'" + $(this).val() + "'"); - }); - - filter_param['H1'] = res.toString(); //参数赋值 - ds_refresh(1); //刷新1号图形 - - } -) -``` - - -第四步，在你要联动刷新数据集中增加代码 -```sql -select H1 as heroname, sum(qty) as 出场数 from smartdemo2 -where 1=1 -/* and H1 in ($H1) */ --此处来新增 -group by H1 -order by sum(qty) desc -``` - -这样就完成了，任何其他需求，都可以采用类似方法自定义 - -> TIPS -> 如果你这个点击的图形又可能被其它图形来点击联动, 你需要加入如下unbind否则会触发多次刷新 -> $('#id_select__name__').unbind('click').click(..... - -> 如果你想取消联动,恢复到初始效果, 你需要删除参数, 如: -> delete filter_param['H1'] diff --git a/docs/content/docs/6.Jupyter应用/.keep b/docs/content/docs/6.Jupyter应用/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/6.Jupyter应用/Jupyter中使用指引.md b/docs/content/docs/6.Jupyter应用/Jupyter中使用指引.md deleted file mode 100644 index f312fce..0000000 --- a/docs/content/docs/6.Jupyter应用/Jupyter中使用指引.md +++ /dev/null @@ -1,138 +0,0 @@ -### 应用场景 -> 你需要在jupyter中通过smartchart分享的数据集获取数据进行分析 -> 你有很多线下数据需要进行个性化分析, 然后制做仪表盘 -> 在Jupyter的数据分析过程中, 你需要快速生成图形 -> 大屏或报表有部分数据集是需要能过复杂的分析生成的 - - -Smartchart支持像pyecharts, Matplotlib 等python绘图工具一样在Jupyter中使用, -但她更加方便, 更加炫酷 和 通用化, -不仅仅是一个绘图工具, 而且是一个平台 - -我们有什么特色: -> 使用上手非常简单, 仅仅只有两个命令, get and set, 配置项采用原生的Echarts配置, 无重复学习成本, 使用顺滑 -> 支持Echarts所有功能, 可定制化程度高, 显示效果好, 可嵌入也可以弹出窗口显示, 也可以dashboard中显示 -> 数据可以固化存储, 采用smartchart Portal可以直接拼接炫酷大屏 - - -[Smartchart与Pandas](https://www.ixigua.com/6910413586208653837?id=6918162479646245389 "smartchart") -[Smartchart与Jupyter](https://www.ixigua.com/6910413586208653837?id=6917989046132310535 "smartchart") -[SmartChart大屏新思路](https://www.ixigua.com/6921133676189352456 "smartchart") - -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/114301_76f82bab_5500438.png "屏幕截图.png") - - -### 安装使用方法 -``` -你需要在jupyter相同的python环境中安装smartchart客户端 -pip install smartchart -或pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple smartchart - -如果你只是需要连接已部署好的smartchart服务端, 本地无需启动smartchart -``` -### 快速开始 - -初始化认证: -第一次使用时, 打开jupyter后, 需要设定默认用户和smartchart服务端url -同一个环境, 只需初始化一次, 后面无需再设定 -```python -from smart_chart import Smart -Smart().set_auth('用户名', '密码',url = 'http://xxxxx') -``` -如果smartchart服务端在本地, 可以省略url -```python -Smart().set_auth('用户名', '密码') -``` - -使用方法: -```python -from smart_chart import Smart -mysmart = Smart() -dataset = [['A','B','C'],[12,34,23],[22,33,37]] -#把数据写入临时数据集并显示图形 -mysmart.set(1,dataset) -#随意命名临时数据集, 不一定需要smartchart中数据集已有的 -mysmart.set('DD', dataset) - -#从已有的数据集中获取数据(格式参考smartchart数据集) -ds1 = mysmart.get(1) -ds2 = mysmart.get('DD') -``` - -### 修改图形显示 -方法一: 你可以在图形菜单中选择内置图形或主题 -方法二: set默认是表格显示,你也可通过名称加前缀 bar, line, pie进行修改 - -```python -mysmart.set('barxxx', dataset) #显示柱形图, 另外还有linexxx, piexxx -``` -方法三: 简单图形,可能无法满足你的个性化要求, 你可以采用实例化数据集的方式后做出炫酷的自定义图形 - -```python -mysmart.set('myds_1', dataset, push=1) #参数push=1, 将实例化数据集 -``` -实例化的数据集, 在图形编辑区点击, 可以进入定制化图形开发, 可使用原生的Echarts配置和实时调试,或直接使用社区图形(第一次使用,有一个登记的过程, 按提示进行) -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/114330_fa9da6af_5500438.png "屏幕截图.png") - -方法四: 如何在非实例化的数据集中使用自定义图形进行临时显示 -假如你已经实例化并自定义了图形, 比如 'myds_1', 你可以直接用它的名称来set -```python -#不加push, 将使用新的数据采用myds_1的图形临时显示, 而不会改变原myds_1的数据 -mysmart.set('myds_1', dataset) -``` - -### 显示设定参数 -你可以通过参数来设定图形的高宽, 是否嵌入等个性化要求 -```python -# width, height指定图形嵌入显示的宽高 -# embed 默认不嵌入, embed=1 嵌入, embed=0 不嵌入 -# editor 是否显示图形菜单, 1显示, 0不显示 -# push 是否持久化数据集 push=1, 无则新建有则保存数据 -# url 报表访问的url,默认是localhost - -#可以全局初始化设定 -mysmart = Smart(width=xx, height=xx, embed=1, editor='') -#也可以全局单独进行设定 -mysmart.url = 'http://ip:8000' -mysmart.embed = 1 - -#也可以针对单独的一个图形设定 -mysmart.set(1,dataset,embed=1,height=200,editor=0) -``` - -### SmartChart与Pandas -Smartchart的set支持直接set Pandas的dataframe对象 -```python -from smart_chart import Smart -import pandas as pd -mysmart = Smart() -df = pd.read_excel('manual_smartdemo.xlsx', 'sheet1') -mysmart.set('excelsample', df.sample(10)) - - -df1 = df.groupby('province').agg({'qty':'sum'}).reset_index() -mysmart.set('ec_df1', df1, push=1) - -df2 = df.groupby('c1').agg({'qty':'sum'}).reset_index() -mysmart.set('ec_df2', df2, push=1) - -df4 = df.groupby('province').agg({'qty':'count'}).reset_index() -mysmart.set('ec_df4', df1, push=1) - - -df3 = df.groupby('c3').agg({'qty':'sum'}).reset_index() -print(df3) -df3.loc[1, 'qty'] = df3.loc[1, 'qty'] * 100 -print(df3) - -mysmart.set('ec_df3', df3, push=1) - -#mysmart.set('pie0', df1) -#df2 = df.groupby(['province','c3']).agg({'qty':'sum'}).reset_index() -#print(df2) -#mysmart.set('ssss', df2) -#print(mysmart.get(15)) - -``` - -![输入图片说明](https://images.gitee.com/uploads/images/2021/0701/114403_9ec1ed28_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/6.Jupyter应用/_index.md b/docs/content/docs/6.Jupyter应用/_index.md deleted file mode 100644 index 466922a..0000000 --- a/docs/content/docs/6.Jupyter应用/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 600 ---- diff --git a/docs/content/docs/7.报表嵌入/.keep b/docs/content/docs/7.报表嵌入/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/7.报表嵌入/_index.md b/docs/content/docs/7.报表嵌入/_index.md deleted file mode 100644 index 40f1c1c..0000000 --- a/docs/content/docs/7.报表嵌入/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 700 ---- diff --git a/docs/content/docs/7.报表嵌入/单点登录.md b/docs/content/docs/7.报表嵌入/单点登录.md deleted file mode 100644 index 0a53326..0000000 --- a/docs/content/docs/7.报表嵌入/单点登录.md +++ /dev/null @@ -1,57 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### 单点登录的方式与smartchart进行对接嵌入 - -``` -'/echart/smart_login?id=xxx&stamp=xxx&token=xxx&url=/' -''' -参数说明： -id: 用户名（在smartchart平台中管理） -stamp: 时间戳(1970年1月1日到生成时间的毫秒数) -token: 采用sha1加密, token=SHA1(链接秘钥+stamp+id) - 请在安装smartchart的这台机器上设定环境变量SMART_KEY = 链接秘钥 -url: 登录成功后跳转链接 -''' - - -``` - -### Python后台样列: -```python -import time -import hashlib -import os - -""" -参数说明： -id: 用户名（在smartchart平台中管理） -stamp: 时间戳(1970年1月1日到生成时间的毫秒数) -token: 采用sha1加密, token=SHA1(链接秘钥+stamp+id) -url: 登录成功后跳转链接 -""" - -SMART_CHART_URL = 'http://127.0.0.1:8000' -LOGIN_URL = SMART_CHART_URL + '/echart/smart_login?id={id}&stamp={stamp}&token={token}&url={url}' -SMART_KEY = 链接秘钥 - - -def get_smarturl(username, url='/'): - stamp = int(time.time() * 1000) - id = username - res = SMART_KEY + str(stamp) + id - token = hashlib.sha1(res.encode('utf-8')).hexdigest() - LOGIN_DICT = { - "id": id, - "stamp": stamp, - "token": token, - "url": url - } - - # 拼接好的url,直接访问 - visit_url = LOGIN_URL.format(**LOGIN_DICT) - return visit_url - -``` \ No newline at end of file diff --git a/docs/content/docs/7.报表嵌入/单页面嵌入.md b/docs/content/docs/7.报表嵌入/单页面嵌入.md deleted file mode 100644 index f6584fb..0000000 --- a/docs/content/docs/7.报表嵌入/单页面嵌入.md +++ /dev/null @@ -1,69 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- -### 嵌入报表 -与单点登录类似, 单点登录用于直接登录到平台访问报表 -但对于只嵌入报表, 用此方法更合适(需升级到5.3.11以上) -``` -嵌入的url: '/echart/?type={reportName}&visitor={visitor}&token={token}&stamp={stamp}' -参数说明： -reportName： 报表名或报表ID -visitor: 用户名（在smartchart平台中管理） -stamp: 时间戳(1970年1月1日到生成时间的毫秒数) -token: 采用sha1加密, token=SHA1(链接秘钥+stamp+visitor+reportName) - -``` -用户名和秘钥设定参考 [数据服务API的config文件](https://gitee.com/smartchart/smartchart/wikis/9.%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91PRO/%E6%95%B0%E6%8D%AE%E6%9C%8D%E5%8A%A1API) - -同时你需要将visitor加入到对应的报表权限查看访问 - -### python样列 -以下为python版的url生成样列，你可以转化成你对应的开发语言 -```python -import time -import hashlib -import os - -SMART_CHART_URL = 'http://127.0.0.1:8000' -reportID = '报表ID' -LOGIN_URL = SMART_CHART_URL + '/echart/?type={reportID}&visitor={visitor}&token={token}&stamp={stamp}' -TOKEN = 链接秘钥 - - -def get_smarturl(username, reportName): - stamp = int(time.time() * 1000) - visitor = username - res = TOKEN + str(stamp) + visitor + reportID - token = hashlib.sha1(res.encode('utf-8')).hexdigest() - VISIT_DICT = { - "visitor": id, - "stamp": stamp, - "token": token, - "reportID": reportName - } - - # 拼接好的url,直接访问 - visit_url = LOGIN_URL.format(** VISIT_DICT) - return visit_url -``` - - -### 数据权限加密方法 -``` -如果你需要对用户进行一些数据权限控制, 可以避免用户越权访问 -可以通过传入参数"id", 如/echart/?type=xxx&visitor=xx&token=xx&stamp=xxxxx&id=xxx -后台会把这个id转化为参数名"_id"给对应的查询来进行数据权限控制 -加密参数需把id加入, 例如id=john -那么 token=SHA1(链接秘钥+stamp+visitor+reportName+id) -``` - -### 全参数加密方法 -``` -如果需要将参数也加入认证中, 为保持兼容性, 我们把param这个参数改为params(具体参考参数文档中param的写法) -'/echart/?type={reportName}&visitor={visitor}&token={token}&stamp={stamp}¶ms=xxxx' -加密参数把params加入, 例如params为 {"a":"1","b":2"} -res = TOKEN + str(stamp) + visitor + reportName + '{"a":"1","b":2"}' - -``` \ No newline at end of file diff --git a/docs/content/docs/7.报表嵌入/简单嵌入.md b/docs/content/docs/7.报表嵌入/简单嵌入.md deleted file mode 100644 index c7816f5..0000000 --- a/docs/content/docs/7.报表嵌入/简单嵌入.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- - -你可能需要把Smartchart生成的图形嵌入到其它系统 -首先，所有smartchart设计出来的仪表盘都有一个访问url -你可以直接访问： -``` -http://localhost:8000/echart?type=仪表盘名称 - -如：http://localhost:8000/echart?type=demo -``` - -但是smartchart默认是有权限管理的，所以如果你需要嵌入你自已的系统又不考虑权限，你可以在“设定” --> 公开 -![输入图片说明](https://images.gitee.com/uploads/images/2021/0705/084301_6490e812_5500438.png "屏幕截图.png") - -然后在你的网页就可以直接iframe了 -```html - -``` - diff --git a/docs/content/docs/8.Django应用/.keep b/docs/content/docs/8.Django应用/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/8.Django应用/FAQ.md b/docs/content/docs/8.Django应用/FAQ.md deleted file mode 100644 index 764ff2b..0000000 --- a/docs/content/docs/8.Django应用/FAQ.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### FAQ ---------------------------------------------------- -如果你想对smartchart前端二次开发或关闭debug模式后找不到资源 -在settings中加入 -``` -STATIC_ROOT = os.path.join(BASE_DIR, "static") -``` -执行以下命令将静态文件静态文件克隆到根目录 -```shell -python3 manage.py collectstatic -``` ----------------------------------------------------- - - diff --git a/docs/content/docs/8.Django应用/_index.md b/docs/content/docs/8.Django应用/_index.md deleted file mode 100644 index ead0baf..0000000 --- a/docs/content/docs/8.Django应用/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 800 ---- diff --git a/docs/content/docs/8.Django应用/嵌入Django Apps.md b/docs/content/docs/8.Django应用/嵌入Django Apps.md deleted file mode 100644 index 1e8d8d4..0000000 --- a/docs/content/docs/8.Django应用/嵌入Django Apps.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- -### 应用场景 -你可以在你的django项目中直接使用smartchart做为插件的方式 - [你可以查看相关视屏](https://www.bilibili.com/video/BV1wr4y1i7rM) - -### 使用方法 -1. 在你的setting.py的INSTALL_APPS中加入'smart_chart.echart' - 如果你需要simpleui, **你可以在最上行加入我们适配好的'smart_chart.smartui'** -``` -INSTALLED_APPS = [ - 'smart_chart.smartui', - .... - .... - 'smart_chart.echart' -] -``` - -2. MIDDLEWARE 中注释掉XFrameOptionsMiddleware - -3. 检查确保在Templates的设定处有DIRS的相关设定 -``` -TEMPLATES = [ - { - 'BACKEND': 'django.template.backends.django.DjangoTemplates', - 'DIRS': [BASE_DIR / 'templates'], #此处需要有 - 'APP_DIRS': True, #也要有 - ..... - }, -] -``` - -4. setting.py中设定为中国时区, 支持中文基础平台建设! -``` - LANGUAGE_CODE = 'zh-hans' - TIME_ZONE = 'Asia/Shanghai' - USE_I18N = True - USE_L10N = True - USE_TZ = False # 此处必须为False -``` -5. 在你的url.py中加入引用 -``` - from django.conf.urls import include - from django.views.generic import RedirectView -``` -6. url.py的urlpatterns中加入路由 -``` - path('echart/', include('smart_chart.echart.urls')), - path('', RedirectView.as_view(url='echart/index/')), #首页,可自定义路由 -``` - - -7. 初始化DB, 命令行输入: -``` - python manage.py makemigrations - python manage.py migrate -``` -8. 建立管理员帐号, 如果已有可忽略 -``` - python manage.py createsuperuser -``` - -9. 启动服务 -``` - python manage.py runserver -``` - - **10. 点击首页的组件升级进行初始化** :cupid: !!!! 重要！！！ - - -### 注意 -一般来说如果你使用django遇到的问题，都不是smartchart导致的， -作者也很难给你解答， 建议你可以进行有偿问答 \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/.keep b/docs/content/docs/9.进阶开发PRO/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/9.进阶开发PRO/_index.md b/docs/content/docs/9.进阶开发PRO/_index.md deleted file mode 100644 index 2caa6cc..0000000 --- a/docs/content/docs/9.进阶开发PRO/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 900 ---- diff --git a/docs/content/docs/9.进阶开发PRO/webSocket方式.md b/docs/content/docs/9.进阶开发PRO/webSocket方式.md deleted file mode 100644 index 92d75a1..0000000 --- a/docs/content/docs/9.进阶开发PRO/webSocket方式.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -weight: 7 -type : docs -bookFlatSection : false ---- -### 应用场景 -对于实时程度要求比较高的情况下, 如果你后端已有实现websocket的接口, smartchart也可以很方便的接入 -参考以下步骤即可 -1. 在"模板"中定义一个全局变量, 如ws_data -2. 编写连接和接收代码段逻辑 -3. 在接收代码段加入ds_refresh, 如要刷新0号图形, 则加入ds_refresh(0) -4. 在"高级"设定中加入共享数据集设定, 把ws_data映射到0号图形即可 - -![输入图片说明](https://images.gitee.com/uploads/images/2022/0331/095209_3dde4cd3_5500438.png "屏幕截图.png") - -### 代码段参考 -```js - let ws_data = [['初始化','V'],['A','2']]; - let ws = null; - - if('webSocket' in window){ - print('支持webSocket'); - ws = new webSocket('ws://127.0.0.1:2222/abc'); - //连接成功 - ws.onopen = function(){ - print('ws连接成功'); - } - //接收消息 - ws.onmessage = function(evt){ - ws_data = evt.data; - ds_refresh(0); - } - } - else{ - print('浏览器不支持ws') - } - -``` \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/后台API刷新.md b/docs/content/docs/9.进阶开发PRO/后台API刷新.md deleted file mode 100644 index b87dad5..0000000 --- a/docs/content/docs/9.进阶开发PRO/后台API刷新.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -weight: 6 -type : docs -bookFlatSection : false ---- - -### 应用场景 -- 有ETL流程，需要等待后台数据刷新完成后，再触发仪表盘的刷新，数据未完成刷新，仪表盘不刷新 -- 针对有一些耗时的查询, 虽然smartchart有缓存加速, 但是在第一次刷新时可能不能达到极速 -- 用户需要随时都能体验到极速的打开效果 -> 使用后台API刷新，建意将仪表盘中数据集的缓存时间设置长一些，比如2天（2880分钟） - -### 后台数据主动刷新接口 -(购买专业版本后支持) -1. 你需要在setting.py中设定API_TOKEN -``` -API_TOKEN = 'xxxxxxxx' -``` -2. 找到你要刷新的仪表盘编码, 你可以在打开的仪表盘url上面找到这个type id - -3. 后台访问如下api url即可 -``` -http://ip:端口/echart/refresh_ds/?type=你的报表ID&token=你设定的API_TOKEN - -``` - -### 关于定时刷新 -为保持产品的轻量化及坚持专业的产品做专业的事情, 归一化统一化的架构设计, 我们不会集成相关调度系统, -一般我们推荐使用您自有的调度工具或平台, 如airflow, 我们也有相关的配套产品 - -如果您仅仅是简单应用, 也无需使用专用调度来增加运维复杂度, 可以使用linux自带的即可 -- 新建一个sh文件, 假设目录在/data/smartchart -``` -vim refresh_smartchart.sh -``` -- 写入需要刷新的脚本 -``` -echo start refresh $(date "+%Y-%m-%d %H:%M:%S") -curl http://ip:端口/echart/?type=你的报表ID1&token=你设定的API_TOKEN -curl http://ip:端口/echart/?type=你的报表ID2&token=你设定的API_TOKEN -echo end refresh $(date "+%Y-%m-%d %H:%M:%S") - -``` -> 如果你的网址是https, 可如下方法使用curl -``` -curl -k --insecure "https://www.baidu.com” -``` - -- 修改为可执行文件 -``` -chmod 775 refresh_smartchart.sh -``` - -- 使用crontab来定时执行 - -``` -# 编辑crontab -crontab -e -# 比如需要每天晚上5点10分执行 -10 5 * * * /data/smartchart/refresh_smartchart.sh >>/data/smartchart/log.txt 2>&1 - -# 定时参数说明 -* * * * * -- - - - - -| | | | | -| | | | +----- 星期中星期几 (0 - 6) (星期天 为0) -| | | +---------- 月份 (1 - 12) -| | +--------------- 一个月中的第几天 (1 - 31) -| +-------------------- 小时 (0 - 23) -+------------------------- 分钟 (0 - 59) -``` - diff --git a/docs/content/docs/9.进阶开发PRO/备份恢复及版本.md b/docs/content/docs/9.进阶开发PRO/备份恢复及版本.md deleted file mode 100644 index 8a3e12a..0000000 --- a/docs/content/docs/9.进阶开发PRO/备份恢复及版本.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- -### 应用场景 -- 本地仪表盘的备份恢复，版本管理 -- 开发测试生产机之间的同步 - -具体使用方法请观看视屏 [版本控制使用说明视屏](https://www.bilibili.com/video/BV19q4y1F7uP/) - -### 使用方法 -#### 快速备份 -可以在模板->点击如下图标， 完成快速备份（注意会覆盖历史）， 备份号统一为：SNAPSHOT -![输入图片说明](https://images.gitee.com/uploads/images/2022/0414/095114_bc29d69a_5500438.png "屏幕截图.png") -#### 指定备份 -你也可以在设定->备份恢复 中进行按版本备份 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0414/095722_0683a557_5500438.png "屏幕截图.png") -#### 查询备份 -当不输入KEY值， 点击 本地备份时，可以查询此仪表盘已有的备份 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0414/100025_068a2ce7_5500438.png "屏幕截图.png") -#### 备份恢复 -备份可以在任意的仪表盘中进行恢复，如果是当前仪表盘， 仅输入KEY即可，比如：V01, -如果是跨仪表盘恢复， KEY需要带上仪表盘的编号如13_V01 -#### 备份恢复参数说明 -可以支持多种恢复模式, 只需要在KEY前面加上前缀即可， 如FORCEV01, FORCE13_V01.. -FORCE: 删除自身所有数据集及高级设定，模板等，完全恢复备份 -DATASET：只更新数据集及图形,模板，适用于测试上线正式 -CHART: 只更新图形及模板，适用于前端变更上线 - -#### 跨服务器间同步 -具体方法购买专业版本后提供 - -### 使用以下流程, 可以使企业在使用最少资源做出最专业的可视化项目 -#### 前提条件: -1. 公司内部有技术人员(熟悉数据, 会写SQL) -2. 服务器安装smartchart专业版 - -#### 开发流程: -由于公司内部人员是对业务最熟悉, 一般也都是后台数据管理相关的人员, 一般不太会有专职的前端开发和UI -所以数据开发人员可以使用smartchart开发仪表盘数据集, 并使用拖拽功能完成一个粗糙一点的框架和图形设计 -一般情况下已经可以满足数据可视化的需求 - -如果需要达到更专业的可视化效果, 可以外包前端/UI或在smartchart社区咨询, 由于需求变得非常简单 -而前端开发又是一个通用技能, 可以使用非常廉价的费用获得最大的效果 -> 专业的事情专业来做, 才能达到效益最大化, 这是smartchart的设计理念 -> 不管用什么工具, 在同等资源的投入下, 数据分析人员开发的可视化效果很难达到专业前端UI的效果 -> 另外BI/数据开发人员的费用可是比前端高的, 也更稀缺 - -- 前端开发只需本地安装smartchart, 而无需接触到公司数据库或数据接口, 开发完全解耦, 数据安全保障 -- smartchart可以将数据开发人员开发的仪表盘直接同步到前端开发的本地smartchart(仅会保留demo数据) -- 前端进行一些简单的美化工作即可, 无需对业务和数据进行理解, **花费的时间非常之少** -- 前端开发完成后可以一键同步到smartchart服务端, 且可以只同步可视化部分 -- 由于数据和展示是分离的, 所以数据开发和前端美化是可以同步进行 -- 由于smartchart是一个平台化产品, 数据开发人员不熟悉前端也能在前端开发完成的基础上进行样式和图形的修改 \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/实战大屏模板转化.md b/docs/content/docs/9.进阶开发PRO/实战大屏模板转化.md deleted file mode 100644 index 61e3b5a..0000000 --- a/docs/content/docs/9.进阶开发PRO/实战大屏模板转化.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- -### 应用场景 -- 已有开发好的非smartchart静态大屏模板(这种模板非常多, 不要上当) -- 对js, css及smartchart已有初始了解 -- 业务需求展示有合适的模板, 变化不大 - -### 如何使用 -请观看系列视屏, 相信人人都会 -[头条视屏: 大屏模板转化系列](https://www.ixigua.com/7097428776610759172) -[B站视屏: 大屏模板转化系列](https://www.bilibili.com/video/BV1XY411F7Qc/) \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/数据下载.md b/docs/content/docs/9.进阶开发PRO/数据下载.md deleted file mode 100644 index 9b7b5b9..0000000 --- a/docs/content/docs/9.进阶开发PRO/数据下载.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -weight: 4 -type : docs -bookFlatSection : false ---- - -### 应用场景: -需要要下载数据集的数据到本地 - -### 样例: -1. 可在"模板" 中新建一个下载按钮, 并指定一个ID,如id_down1, 拖拽到你需要的位置 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0514/115118_22dec9a3_5500438.png "屏幕截图.png") - -2. 在任意一个图形开发或js代码段中加入以下代码即可 -``` -$('#id_down1').click(()=>{ - ds_download('报表数据.csv', dataset); -}); - -``` -这样就可以实现点击按钮下载数据了 - -仅需要录活使用ds_download这个函数, 你可以开发出非常个性化的下载功能 -``` -ds_download(name, dataset) -参数说明: -name: 文件名称 -dataset: 可以是二维数组也可以是字符串 - -``` - - diff --git a/docs/content/docs/9.进阶开发PRO/数据填报.md b/docs/content/docs/9.进阶开发PRO/数据填报.md deleted file mode 100644 index 4212c15..0000000 --- a/docs/content/docs/9.进阶开发PRO/数据填报.md +++ /dev/null @@ -1,70 +0,0 @@ ---- -weight: 5 -type : docs -bookFlatSection : false ---- - -### 应用场景 -- 收集用户端录入的数据 -- 前端处理好的数据回写到任意系统 -- 制做问卷系统 -- 埋点应用 - -### 使用方法 -- 新建数据集设定,格式如下: -``` -只用指定表名 -dataset={ - "table":"表名" -} -你也可以指定字段, 比如 -dataset={ - "table":"表名(字段1, 字段2)" -} - -``` -- 在"容器"管理, 取消这个数据集激活, 并记录下来此数据集的ID, 比如132 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0402/204327_974ae584_5500438.png "屏幕截图.png") - -- 在"模板"中编写录入组件代码, [具体可参考视屏](https://www.ixigua.com/7081979465198207500) -``` -

数据填报

- -
- -
-
- -
-
- -
- -``` -![输入图片说明](https://images.gitee.com/uploads/images/2022/0402/211149_67f80d32_5500438.png "屏幕截图.png") -- 在"模板" 中编写JS代码 -``` - $('#idbtn01').click(function(){ - let visitor = $('#id_visitor').val(); - let action = $('#id_action').val(); - let dataset = [visitor, action]; - print(ds_save(132, dataset)); //132数据集ID, dataset要写入的数据 - }) - -``` - -#### 更多关于写入数据库的数据集格式说明 -``` -只写入一行数据, 样列如下: -dataset = ['a','b'] -同时写入多行数据: -dataset = [[], ['a1','b1'],['a2', 'b2]] -如果需要自动记录写入者用户名: -dataset = ['$username', 'b'] - -``` -mongodb写入方式 -``` -ds_save(419, {"h1":123, "h2":"bb"}); -ds_save(419, [[],{"h1":123, "h2":"aa"},{"h1":1234, "h2":"dd"}]); -``` diff --git a/docs/content/docs/9.进阶开发PRO/数据服务API.md b/docs/content/docs/9.进阶开发PRO/数据服务API.md deleted file mode 100644 index e7d405b..0000000 --- a/docs/content/docs/9.进阶开发PRO/数据服务API.md +++ /dev/null @@ -1,146 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### SmartChart的数据集功能, 可以非常方便的实现数据对外微服务 - -### 权限设定 -- 如果你使用的是自已搭建的django项目, 你需要在项目的根目录下新建一个JSON文件, - 如果是使用smartchart启动的, 配置文件在项目的安装目录下可以找到 - 名为apiconfig.json, -- 比如需要调用API的用户名为test 和 test2，用户名需要是在你的用户设定中存在的,内容如下: -```json -{ - "test": { - "token": "smartchart" - }, - "test2": { - "token": "smartchartxxx", - "host": ["10.10.10.10","10.10.10.23"], - "limit': 60, - "log":1, - "cors": 1 - } -} -``` -> 可选设定参考test2 -> host:API白名单配置，limit:一分钟内可调用次数, log:日志记录方式. -> cors:永许跨域访问 - -- 然后你只需要将你的数据集中的权限设定给对应的用户即可 - -### 请求方式 -#### 加密接口请求方式（推荐） -#### GET 请求 -```python -#接口请求格式: -url: /echart/dataset_api/?visitor=xxx&token=xxx&type=xxx&stamp=xxxxx¶m={"xx":"xxx","xx":"xxxx"} -# 参数说明 -visitor: 用户名 -type: 接口数据集ID -stamp: 时间戳(1970年1月1日到生成时间的毫秒数) -token: 采用sha1加密, token=SHA1(秘钥 + stamp + Visitor + Type) -param: 传入的参数值(可选)，格式json字符串，如多个参数: '{"参数A":"xxxx", "参数B":"xxxx"}' -# 接口返回格式 -Json: -{ -"data":[[]], -"result":"success", -"maxpg":1, -"pg":1 -} -返回值说明： -data : 二维数组，第一行为表头， 样列数据 -[["heroname", "qty"],["镜",658],["猪八戒",591]] -result : success 或 error -maxpg/pg : GET请求固定为1不分页 - -``` - -#### POST请求(适用于后台定时同步数据，查询请用GET请求方法) -```python -#接口请求格式: -url: /echart/dataset_api/ -# 请求参数说明 -data: -{ -"visitor":"xxx", -"token":"xxx", -"stamp":xxxxx, -"type":"xxx", -"pagesize":"xxx", -"pg":"xxx", -"param":'{"xxx":"xxxx"}' -} -# 参数说明 -visitor: 用户名 -type: 接口数据集ID -stamp: 时间戳(1970年1月1日到生成时间的毫秒数) -token: 采用sha1加密, token=SHA1(秘钥 + stamp + Visitor + Type) -Pagesize: 采用分页，每页的数据量大小 -pg: 返回第几页 -param: 传入的参数值，格式json字符串，如多个参数 -'{"参数A":"xxxx", "参数B":"xxxx"}' - - -#接口返回格式 -Json: -{ -"data":[[]], -"result":"success", -"maxpg":xxx, #最大页数 -"pg":xx, #当前页数 -"casheflag": xx, #如果是999说明命中缓存 -"total":xx, #总条数 -} - -``` ->注意： ->只有post是分页的, 第一页是带标题的， 后面页不带标题 ->由于post方式会使用缓存进行分页,如命中缓存传参不会生效，小数据量请使用get方式请求 ->不要请求大数据量，大量数据请采用limit, offset传参方式进行分页 - -#### 不加密请求方式(简单但不安全） -``` -GET 请求 -#接口请求格式: -url: /echart/dataset_api/?visitor=xxx&token=xxx&type=xxx 数据集名或id名 -#接口返回格式 -Json: -{ -"data":[[]], -"result":"success", -"maxpg":1, -"pg":1 -} - -POST请求 -#接口请求格式: -url: /echart/dataset_api/ -data: -{ -"visitor":"xxx", -"token":"xxx", -"type":"xxx", #数据集名或id名 -"pagesize":"xxx", #每页数据条数 -"pg":"xxx", #返回第几页 -"param":'{"xxx":"xxxx"}' #参数可选 -} -#接口返回格式 -Json: -{ -"data":[[]], -"result":"success", -"maxpg":xxx, #最大页数 -"pg":xx, #当前页数 -"casheflag": xx, #如果是999说明命中缓存 -"total":xx, #总条数 -} - -注意： -只有post是分页的, 第一页是带标题的， 后面页不带标题 -由于post方式会使用缓存, 小数据量建议你使用get方式请求 - - -``` \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/.keep b/docs/content/docs/9.进阶开发PRO/模板开发/.keep deleted file mode 100644 index e69de29..0000000 diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/IDE开发模式.md b/docs/content/docs/9.进阶开发PRO/模板开发/IDE开发模式.md deleted file mode 100644 index df05320..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/IDE开发模式.md +++ /dev/null @@ -1,63 +0,0 @@ ---- -weight: 6 -type : docs -bookFlatSection : false ---- - -### 应用场景 -- 如果您是一个资深的前端开发者 -- 可能不需要使用smartchart组件,仅需使用到数据集 -- 你希望在IDE(如VS code)中开发然后打包发布 -- 非专用人士,请不要尝试这种方式 - -### 开发方式 -在模板中使用basesimple -![输入图片说明](https://images.gitee.com/uploads/images/2022/0726/082844_51c28fab_5500438.png "屏幕截图.png") - **此时smartchart不会引用任何echarts, vue组件, 完全由您自已控制引入** , 你可以直接采用以下代码替换模板中的代码 -```html -{% extends "echart/basesimple.html" %}{% block head %} - - - -{% endblock %}{% block body %} - - - -{% endblock %}{% block javascript %} - - - -{% endblock %}{% block footer %}{% endblock %} - -``` - -### 如何使用数据集接口 -按照自由开发模式中, 新增一个图形, 然后修改数据集为通用且懒加载数据集 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0726/083916_7e8a92b9_5500438.png "屏幕截图.png") -修改对应图形编辑器, 使数据赋值给一个全局变量或vue -![](https://images.gitee.com/uploads/images/2022/0726/084154_bf4b4bb4_5500438.png "屏幕截图.png") -![](https://images.gitee.com/uploads/images/2022/0726/084420_53727f88_5500438.png "屏幕截图.png") - -### 在IDE中开发 -由于你在开发中仅需要用到filter_param及ds_refresh, 建意新建一个js文件, 文件内容: -```js -//下面定义全局变量, 发布时需放入smartchart模板的script标签中 -var mypublicdata1 = xxxx; -..... - -//以下为辅助方法, 发布时, 无需放入smartchart模板中 -var filter_param = {}; -function ds_refresh(num){ - if(num === 0){你对应的图形中赋值代码,调试代码} - if(num === 1){....} - ...... -} - -``` -然后将这个js文件在你的项目中引用调试使用 - -### 如何部署到smartchart -打包完成后会有相应的css, js 和index.html文件, 将index.html中的代码复制贴粘到对应的模板区域中即可 -- 上传css,js -- 修改css, js 相关引用路径 -- 去除之前定义的js辅助开发文件引用, 如果有定义全局变量, 将全局变量定义复制到模板js区域 diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/_index.md b/docs/content/docs/9.进阶开发PRO/模板开发/_index.md deleted file mode 100644 index ac05326..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 1 ---- diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/上传资源文件.md b/docs/content/docs/9.进阶开发PRO/模板开发/上传资源文件.md deleted file mode 100644 index 5b25377..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/上传资源文件.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -weight: 3 -type : docs -bookFlatSection : false ---- -点击 模板开发 中的菜单即可上传你的资源文件, 如css, js, 图片等 -[视屏介绍说明](https://www.bilibili.com/video/BV1Sr4y1h71e) -![输入图片说明](https://foruda.gitee.com/images/1663234850278250341/a1663615_5500438.png "屏幕截图") - -### 常规上传 -可直接上传单个文件或zip包上传, 注意zip包中不可以有中文文件名 -上传后会提示引用路径为/static/custom/仪表盘ID/... - -### 上传为共享资源 -可把资源打包为zip文件, 上传名以usr_开头, 如usr_tp.zip -上传完后不会有路径提示, 引用路径为/static/custom/usr_tp/.... - -### 上传自定义数据源或jar包 -上传后不会有路径提示 \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/动画效果.md b/docs/content/docs/9.进阶开发PRO/模板开发/动画效果.md deleted file mode 100644 index dd1b6b9..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/动画效果.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -weight: 7 -type : docs -bookFlatSection : false ---- -### 自动旋转效果 - -在"模板"的style中加入以下样式 -``` -@-webkit-keyframes spin { - from {-webkit-transform: rotate(0deg);} - to {-webkit-transform: rotate(360deg);} -} -@keyframes spin { - from {transform: rotate(0deg);} - to {transform: rotate(360deg);} -} - -.Rotate { - -webkit-animation: spin 3s linear 3s 5 alternate; - animation: spin 3s linear infinite; -} -``` -如需任意组件自动旋转, 只需将Rotate这个类给到这个组件即可, 比如图形 -``` - -``` - -### 组件变形 -常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法 -``` -#container_0{transform:skewY(10deg);} -#container_1{transform:skewY(-10deg);} - -``` - -效果如下: -![输入图片说明](https://images.gitee.com/uploads/images/2022/0407/161743_2664154b_5500438.png "屏幕截图.png") \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/快捷开发.md b/docs/content/docs/9.进阶开发PRO/模板开发/快捷开发.md deleted file mode 100644 index f80e324..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/快捷开发.md +++ /dev/null @@ -1,35 +0,0 @@ ---- -weight: 2 -type : docs -bookFlatSection : false ---- -### 应用场景 -- 专业化开发, 可将仪表盘显示和模板开发分屏开发 -- 当你熟悉smartchart的基础开发后, 你可能会喜欢上现在这种方式 - -把你的可视化页面移动的显示器上吧, 进入"模板" 开发页面(上节介绍如何进入) - -### 方式一: 自动化DIV -此方式当你新增数据集图形时会自动识别, 无需手动在模板在添加 -采用此方式请不要采用点击模板上方菜单的图形新增 -如需编辑图形或数据集可按如下方式: -![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/141339_fbe1d081_5500438.png "屏幕截图.png") -![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/141545_57483077_5500438.png "屏幕截图.png") - -### 方式二: 自由DIV -你可以模板中按照常规的H5页面编辑, 只是在需要插入图形的地方插入即可(建意通过模板上方的图形新增) -开始畅快的开发 -- 点击图形即可新增一个图形,你甚至可以指定图表的位置, 完全和写html一样, 使用{{div_list.图表顺序号}} -![输入图片说明](https://images.gitee.com/uploads/images/2022/0117/215618_27eccfd3_5500438.png "屏幕截图.png") - ->warning ->注意请尽量避免删除DIV, 如果你中途有删除过div, 序号会不一样, ->你可以在"布局"中重排序保持一致, 保持数据集编号从0开始 - ->如果使用自由布局, 请删除自动化DIV这一段代码 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0729/140057_7afad3bf_5500438.png "屏幕截图.png") - -- 选中生成的图形代码段, 点击菜单栏的 数据集, 图形, 布局开发， 即可进入开发界面, 如果没有数据集, 会自动帮你新建 - -可以观看视屏, 视屏比较老和现在不太一样, 仅参考即可 -[自由开发模式视屏](https://www.bilibili.com/video/BV1uQ4y1Q7Lf/) diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/样式快速上手.md b/docs/content/docs/9.进阶开发PRO/模板开发/样式快速上手.md deleted file mode 100644 index 37f0eea..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/样式快速上手.md +++ /dev/null @@ -1,439 +0,0 @@ ---- -weight: 5 -type : docs -bookFlatSection : false ---- -## 样式操作: -要想大屏做得好, 样式要写得好 -可是我们不是前端的同学也能写样式么 -当然可以, 相信你观看完以下视屏即可 - -[快速上手样式开发](https://www.bilibili.com/video/BV1KR4y1u741/) - -## 基础样式入门: - -### CSS介绍 -CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。 -当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 -### CSS语法 -CSS实例 -每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0329/163537_298c1890_5500438.png "屏幕截图.png") -CSS注释 -``` -/*这是注释*/ -``` -注释是代码之母, smartchart编辑中你可以使用CTRL+/快捷注释 - -CSS的几种引入方式 -行内样式 -行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。 -``` -

Hello world.

-``` -内部样式 -嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下： -``` - - - -``` -外部样式 -外部样式就是将css写在一个单独的文件中 -``` - -``` - -### CSS选择器 -基本选择器 -``` -元素选择器 -p {color: "red";} - -ID选择器 -#i1 { - background-color: red; -} - -类选择器 -.c1 { - font-size: 14px; -} -p .c1 { - color: red; -} -``` -注意： -样式类名不要用数字开头（有的浏览器不认）。 -标签中的class属性如果有多个，要用空格分隔。 - -通用选择器 -``` -* { - color: white; -} -``` -组合选择器 -``` -后代选择器 -/*li内部的a标签设置字体颜色*/ -li a { - color: green; -} -儿子选择器 -/*选择所有父级是
元素的

元素*/ -div>p { - font-family: "Arial Black", arial-black, cursive; -} -毗邻选择器 -/*选择所有紧接着

元素之后的

元素*/ -div+p { - margin: 5px; -} -弟弟选择器 -/*i1后面所有的兄弟p标签*/ -#i1~p { - border: 2px solid royalblue; -} -属性选择器 -/*用于选取带有指定属性的元素。*/ -p[title] { - color: red; -} -/*用于选取带有指定属性和值的元素。*/ -p[title="213"] { - color: green; -} -/*找到所有title属性以hello开头的元素*/ -[title^="hello"] { - color: red; -} -/*找到所有title属性以hello结尾的元素*/ -[title$="hello"] { - color: yellow; -} -/*找到所有title属性中包含（字符串包含）hello的元素*/ -[title*="hello"] { - color: red; -} -/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/ -[title~="hello"] { - color: green; -} - -``` -分组和嵌套 -``` -分组 -当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。 -例如： -div, p { - color: red; -} -上面的代码为div标签和p标签统一设置字体为红色。 - -嵌套 -多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。 -.c1 p { - color: red; -} - -``` - -伪类选择器 -``` -/* 未访问的链接 */ -a:link { - color: #FF0000 -} -/* 鼠标移动到链接上 */ -a:hover { - color: #FF00FF -} -/* 选定的链接 */ -a:active { - color: #0000FF -} -/* 已访问的链接 */ -a:visited { - color: #00FF00 -} -/*input输入框获取焦点时样式*/ -input:focus { - outline: none; - background-color: #eee; -} - -``` -伪元素选择器 - -``` -first-letter -常用的给首字母设置特殊样式： - -p:first-letter { - font-size: 48px; - color: red; -} -before - -/*在每个

元素之前插入内容*/ -p:before { - content:"*"; - color:red; -} -after - -/*在每个

元素之后插入内容*/ -p:after { - content:"[?]"; - color:blue; -} -before和after多用于清除浮动。 -``` - -### 选择器的优先级 -``` -CSS继承 -继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义了的字体颜色值也会应用到段落的文本中。 -body { - color: red; -} -此时页面上所有标签都会继承body的字体颜色。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。 -我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。 -p { - color: green; -} -``` - -选择器的优先级 -我们上面学了很多的选择器，也就是说在一个HTML页面中有很多种方式找到一个元素并且为其设置样式，那浏览器根据什么来决定应该应用哪个样式呢？ -其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图： -![](https://images.gitee.com/uploads/images/2022/0329/164541_b51f067f_5500438.png "屏幕截图.png") -除此之外还可以通过添加 !important方式来强制让样式生效，但并不推荐使用。 -因为如果过多的使用!important会使样式文件混乱不易维护。 -万不得已可以使用!important - - -### CSS属性相关 -宽和高 -``` -width属性可以为元素设置宽度。 -height属性可以为元素设置高度。 -块级标签才能设置宽度，内联标签的宽度由内容来决定。 -``` - -字体属性 -``` -文字字体 -font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 -简单实例： -body { - font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif -} -字体大小 -p { - font-size: 14px; -} -如果设置成inherit表示继承父元素的字体大小值。 - -字重（粗细） -font-weight用来设置字体的字重（粗细）。 -值描述normal默认值，标准粗细bold粗体bolder更粗lighter更细100~900设置具体粗细，400等同于normal，而700等同于boldinherit继承父元素字体的粗细值 - -文本颜色 -color -颜色是通过CSS最经常的指定： -十六进制值 - 如: ＃FF0000 -一个RGB值 - 如: RGB(255,0,0) -颜色的名称 - 如: red -还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。 -``` -文字属性 -``` -文字对齐 -text-align 属性规定元素中的文本的水平对齐方式。 -值描述left左边对齐 默认值right右对齐center居中对齐justify两端对齐 - -文字装饰 -text-decoration 属性用来给文字添加特殊效果。 -值描述none默认。定义标准的文本。underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。inherit继承父元素的text-decoration属性的值。 - -常用的为去掉a标签默认的自划线： -a { - text-decoration: none; -} -首行缩进 -将段落的第一行缩进 32像素： -p { - text-indent: 32px; -} - -``` - -背景属性 -``` -/*背景颜色*/ -background-color: red; -/*背景图片*/ -background-image: url('1.jpg'); -/* - 背景重复 - repeat(默认):背景图片平铺排满整个网页 - repeat-x：背景图片只在水平方向上平铺 - repeat-y：背景图片只在垂直方向上平铺 - no-repeat：背景图片不平铺 -*/ -background-repeat: no-repeat; -/*背景位置*/ -background-position: left top; -/*background-position: 200px 200px;*/ -支持简写： -background:#336699 url('1.png') no-repeat left top; -使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。 -``` - -边框 -``` -边框属性 -border-width -border-style -border-color -#i1 { - border-width: 2px; - border-style: solid; - border-color: red; -} -通常使用简写方式： -#i1 { - border: 2px solid red; -} -边框样式 -值描述none无边框。dotted点状虚线边框。dashed矩形虚线边框。solid实线边框。 - -除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示： -#i1 { - border-top-style:dotted; - border-top-color: red; - border-right-style:solid; - border-bottom-style:dotted; - border-left-style:none; -} -border-radius -用这个属性能实现圆角边框的效果。 -将border-radius设置为长或高的一半即可得到一个圆形。 -``` - -display属性 -``` -用于控制HTML元素的显示效果。 -值意义display:"none"HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。display:"block"默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。display:"inline"按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。display:"inline-block"使元素同时具有行内元素和块级元素的特点。 -display:"none"与visibility:hidden的区别： -visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。 -display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 -``` - -CSS盒子模型 -``` -margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。 -padding: 用于控制内容与边框之间的距离； -Border(边框): 围绕在内边距和内容外的边框。 -Content(内容): 盒子的内容，显示文本和图像。 -``` - -![输入图片说明](https://images.gitee.com/uploads/images/2022/0329/164748_7448d386_5500438.png "屏幕截图.png") - -``` -margin外边距 -.margin-test { - margin-top:5px; - margin-right:10px; - margin-bottom:15px; - margin-left:20px; -} -推荐使用简写： -.margin-test { - margin: 5px 10px 15px 20px; -} -顺序：上右下左 - -常见居中： -.mycenter { - margin: 0 auto; -} -padding内填充 -.padding-test { - padding-top: 5px; - padding-right: 10px; - padding-bottom: 15px; - padding-left: 20px; -} -推荐使用简写： -.padding-test { - padding: 5px 10px 15px 20px; -} -顺序：上右下左 - -补充padding的常用简写方式： -提供一个，用于四边； -提供两个，第一个用于上－下，第二个用于左－右； -如果提供三个，第一个用于上，第二个用于左－右，第三个用于下； -提供四个参数值，将按上－右－下－左的顺序作用于四边； -``` - -float -``` -在 CSS 中，任何元素都可以浮动。 -浮动元素会生成一个块级框，而不论它本身是何种元素。 -关于浮动的两个特点： -浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 -由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。 -三种取值 -left：向左浮动 -right：向右浮动 -none：默认值，不浮动 - -``` - -overflow溢出属性 -``` -值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。 -overflow（水平和垂直均设置） -overflow-x（设置水平方向） -overflow-y（设置垂直方向） -``` - -定位（position） -``` -static -static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。 -relative（相对定位） -相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。 -注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。 -absolute（绝对定位） -定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。 -重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。 -另外，对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。 -fixed（固定） -fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性 定义。 注意点： 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这 是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。 -在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。 -``` - -z-index -``` -#i2 { - z-index: 999; -} -设置对象的层叠顺序。 -z-index 值表示谁压着谁，数值大的压盖住数值小的， -只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index -z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。 -从父现象：父亲怂了，儿子再牛逼也没用 -``` - -opacity -用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。 \ No newline at end of file diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/模板开发界面.md b/docs/content/docs/9.进阶开发PRO/模板开发/模板开发界面.md deleted file mode 100644 index 7b5dc65..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/模板开发界面.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- - -### 低代码化开发 -smartchart的标准模板为了标准化的原因,对于引用JS,编写CSS等有一定不方便性, 但有时候你可能需要放飞自由, 随意定制 -你甚至可能想引用一些其它的UI组件, 所以smartchart给你一个原汗原味的开发空间 - -### 开启方式 -在高级中,设定template为diy -![输入图片说明](https://foruda.gitee.com/images/1663235345473586042/d5031c5c_5500438.png "屏幕截图") -主菜单中会多出来一个 模板 的功能 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0117/220058_4b68635e_5500438.png "屏幕截图.png") -进入模板编辑界面 -![输入图片说明](https://images.gitee.com/uploads/images/2022/0117/220356_ef7f4c4e_5500438.png "屏幕截图.png") diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/编辑器快捷键.md b/docs/content/docs/9.进阶开发PRO/模板开发/编辑器快捷键.md deleted file mode 100644 index 2c96339..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/编辑器快捷键.md +++ /dev/null @@ -1,20 +0,0 @@ ---- -weight: 8 -type : docs -bookFlatSection : false ---- - -| 功能 | WIN | MAC | 说明 | -| :-----| :----: | :----: | :----: | -| 显示菜单 | CTRL-, | Command-, | | -| 折叠其它 | Alt-0 | Command-Option-0 | | -| 查找替换 | Ctrl-F | Command-F | | -| 重复选中 | Ctrl-D | Command-D | 5.6以前的版本是删除所选 | -| 注释选中 | Ctrl-/ | Command-/ | | -| 取消修改 | Ctrl-z | Command-z | | -| 重新执行 | Ctrl-y | Command-y | | -| 选中大写 | Ctrl-U | Ctrl-U | | -| 选中小写 | SHIFT-Ctrl-U | SHIFT-Ctrl-U | | - - - diff --git a/docs/content/docs/9.进阶开发PRO/模板开发/边框与装饰.md b/docs/content/docs/9.进阶开发PRO/模板开发/边框与装饰.md deleted file mode 100644 index 560e28f..0000000 --- a/docs/content/docs/9.进阶开发PRO/模板开发/边框与装饰.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -weight: 4 -type : docs -bookFlatSection : false ---- -### 观看视屏 -[边框与装饰说明1](https://www.bilibili.com/video/BV1cr4y1z7qa) -[边框与背景说明2](https://www.bilibili.com/video/BV11G4y1s7zN) - -### 边框/装饰/背景(购买专业版提供使用方法) -![输入图片说明](https://foruda.gitee.com/images/1663574748413876879/b927750e_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663573736102705959/5c1c8d8a_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663573823836667860/8b3df565_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663573904784334437/5d0427f8_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663573977909058955/c7f9b03f_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663574059220205782/68222050_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663574216591673341/0ff22704_5500438.png "屏幕截图") - -![输入图片说明](https://foruda.gitee.com/images/1663574605745070840/c8b6aa26_5500438.png "屏幕截图") \ No newline at end of file diff --git a/docs/content/docs/关于我们.md b/docs/content/docs/关于我们.md deleted file mode 100644 index cb9a4c3..0000000 --- a/docs/content/docs/关于我们.md +++ /dev/null @@ -1,24 +0,0 @@ ---- -weight: 1 -type : docs -bookFlatSection : false ---- -### 我们的目标 -打造全生态的数据应用**数据管理的平台**，解决中小企业上中台难,上中台贵,见效慢的问题. 平台与时俱进，不断完善与优化中 -可以通过视屏了解我们的架构设计 [企业数字化与smartchart的一站式解决方案](https://www.bilibili.com/video/BV1AY41157Y7) - ------------- - -**我们不提供数据存储与计算引擎, ETL工具, BI工具. 因为已有更优秀的产品，我们只为数据开发人员提供更敏捷的工具与平台，致力于数据服务中台建设，边缘可视化与数据管道产品, 站在巨人的肩上, 让数据更有个性，更灵活与可定制化，由于他的通用性，功能的扩展变得也是非常的Smart** - -### 产品定位: -实现全生态的数据服务平台(数据收集, 数据加工, 数据分享，数据管理，数据应用) - -### 产品模块: -- 统一的数据处理调度平台、数据管道, 是基于Apache顶级项目Airflow上的二次开发产品,让数据处理的任务调度开发与管理微代码化，我们的设计理念是让开发者更方便的同时，不丧失灵活和高度可自定义，如果你使用过smartchat，你可以想象他会带来的便捷性， 产品名为smartpip, 为啥不叫smartpipe, 因为能省我们就要省... -- 统一的可视化管理平台, 为微信等第三方应用, 提供powerbi,tableau,finebi...的嵌入式及功能扩展服务，数据集即服务，一切为数据集 -- 统一的数据上传平台, 实现线下数据的收集需求, 并提供专业的手工上传数据产品, 支持excel本地(安装与免安装版本), 支持WEB端 -- 统一的数据分享平台与smartchart集成，可做为数据服务中台, 实现业务对数据下载的需要及为第三方提供获取数据的API接口 -- [SmartChart可视化平台](https://www.smartchart.cn/ "SmartChart可视化平台"), 新一代的数据可视化产品, 解决传统BI各种痛点问题,真正面向开发人员的平台产品 -- 元数据管理平台及数据治理，让数据的来源更清晰, 让数据应用更方便，具备自动化，可视化的数据血缘分析 -- 新一代极速数据仓库技术, 极简架构即可实现在大数据应用的全场景需求 diff --git a/docs/smartchart/docs/1.基础操作/VUE相关/DataV应用/index.html b/docs/docs/1.基础操作/VUE相关/DataV应用/index.html similarity index 99% rename from docs/smartchart/docs/1.基础操作/VUE相关/DataV应用/index.html rename to docs/docs/1.基础操作/VUE相关/DataV应用/index.html index 2d735ef..9e07053 100644 --- a/docs/smartchart/docs/1.基础操作/VUE相关/DataV应用/index.html +++ b/docs/docs/1.基础操作/VUE相关/DataV应用/index.html @@ -12,7 +12,7 @@ DataV配置方法文档: 图表"> 参考视屏 1. DataV基础应用 2. DataV翻盘器 DataV配置方法文档: 图表" /> - + diff --git a/docs/smartchart/docs/1.基础操作/VUE相关/ElementUI/index.html b/docs/docs/1.基础操作/VUE相关/ElementUI/index.html similarity index 99% rename from docs/smartchart/docs/1.基础操作/VUE相关/ElementUI/index.html rename to docs/docs/1.基础操作/VUE相关/ElementUI/index.html index 2250b66..0e55428 100644 --- a/docs/smartchart/docs/1.基础操作/VUE相关/ElementUI/index.html +++ b/docs/docs/1.基础操作/VUE相关/ElementUI/index.html @@ -18,7 +18,7 @@ select H1, H2, qty, rate from smartdemo2 limit 100 图形端 let dataset = __dataset__; let tableData = ds_createMap_all(dataset); vapp.d0={ tableData: tableData } 模板Body区端 <div class="smtdrag" id="id_1639824145817"> <template> <el-table stripe border height="100%" :data="d0.tableData" style="width: 100%"> <el-table-column label="hero"> <el-table-column prop="H1" label="H1" fixed :default-sort = "{prop: 'H2', order: 'descending'}" width="180"> </el-table-column> <el-table-column prop="H2" label="H2" sortable width="180"> </el-table-column> </el-table-column> <el-table-column sortable prop="qty" label="qty"> </el-table-column> <el-table-column prop="rate" label="rate"> </el-table-column> </el-table> </template> </div> " /> - + diff --git a/docs/smartchart/docs/1.基础操作/VUE相关/index.html b/docs/docs/1.基础操作/VUE相关/index.html similarity index 98% rename from docs/smartchart/docs/1.基础操作/VUE相关/index.html rename to docs/docs/1.基础操作/VUE相关/index.html index ab754ae..06d4b69 100644 --- a/docs/smartchart/docs/1.基础操作/VUE相关/index.html +++ b/docs/docs/1.基础操作/VUE相关/index.html @@ -8,7 +8,7 @@ - + Vue相关 | Smartchart开发手册 @@ -18,7 +18,7 @@ - + -``` - -## Shortcodes - -- [Buttons](https://hugo-book-demo.netlify.app/docs/shortcodes/buttons/) -- [Columns](https://hugo-book-demo.netlify.app/docs/shortcodes/columns/) -- [Details](https://hugo-book-demo.netlify.app/docs/shortcodes/details/) -- [Hints](https://hugo-book-demo.netlify.app/docs/shortcodes/hints/) -- [KaTeX](https://hugo-book-demo.netlify.app/docs/shortcodes/katex/) -- [Mermaid](https://hugo-book-demo.netlify.app/docs/shortcodes/mermaid/) -- [Tabs](https://hugo-book-demo.netlify.app/docs/shortcodes/tabs/) - -By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering. It is recommended to set `markup.goldmark.renderer.unsafe=true` if you encounter problems. - -```toml -[markup.goldmark.renderer] - unsafe = true -``` - -If you are using `config.yaml` or `config.json`, consult the [configuration markup](https://gohugo.io/getting-started/configuration-markup/) - -## Versioning - -This theme follows a simple incremental versioning. e.g. `v1`, `v2` and so on. There might be breaking changes between versions. - -If you want lower maintenance, use one of the released versions. If you want to live on the bleeding edge of changes, you can use the `master` branch and update your website when needed. - -## Contributing - -### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors) - -Contributions are welcome and I will review and consider pull requests. -Primary goals are: - -- Keep it simple. -- Keep minimal (or zero) default configuration. -- Avoid interference with user-defined layouts. -- Avoid using JS if it can be solved by CSS. - -Feel free to open issues if you find missing configuration or customisation options. diff --git a/docs/themes/hugo-book/archetypes/docs.md b/docs/themes/hugo-book/archetypes/docs.md deleted file mode 100644 index 17e014c..0000000 --- a/docs/themes/hugo-book/archetypes/docs.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: "{{ .Name | humanize | title }}" -weight: 1 -# bookFlatSection: false -# bookToc: true -# bookHidden: false -# bookCollapseSection: false -# bookComments: false -# bookSearchExclude: false ---- diff --git a/docs/themes/hugo-book/archetypes/posts.md b/docs/themes/hugo-book/archetypes/posts.md deleted file mode 100644 index f897e95..0000000 --- a/docs/themes/hugo-book/archetypes/posts.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: "{{ .Name | humanize | title }}" -date: {{ .Date }} -# bookComments: false -# bookSearchExclude: false ---- diff --git a/docs/themes/hugo-book/assets/_custom.scss b/docs/themes/hugo-book/assets/_custom.scss deleted file mode 100644 index 0de9ae1..0000000 --- a/docs/themes/hugo-book/assets/_custom.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* You can add custom styles here. */ - -// @import "plugins/numbered"; diff --git a/docs/themes/hugo-book/assets/_defaults.scss b/docs/themes/hugo-book/assets/_defaults.scss deleted file mode 100644 index 4c86697..0000000 --- a/docs/themes/hugo-book/assets/_defaults.scss +++ /dev/null @@ -1,66 +0,0 @@ -// Used in layout -$padding-1: 1px !default; -$padding-4: 0.25rem !default; -$padding-8: 0.5rem !default; -$padding-16: 1rem !default; - -$font-size-base: 16px !default; -$font-size-12: 0.75rem !default; -$font-size-14: 0.875rem !default; -$font-size-16: 1rem !default; - -$border-radius: $padding-4 !default; - -$body-font-weight: normal !default; - -$body-min-width: 20rem !default; -$container-max-width: 80rem !default; - -$header-height: 3.5rem !default; -$menu-width: 16rem !default; -$toc-width: 16rem !default; - -$mobile-breakpoint: $menu-width + $body-min-width * 1.2 + $toc-width !default; - -$hint-colors: ( - info: #6bf, - warning: #fd6, - danger: #f66, -) !default; - -// Themes -@mixin theme-light { - --gray-100: #f8f9fa; - --gray-200: #e9ecef; - --gray-500: #adb5bd; - - --color-link: #0055bb; - --color-visited-link: #8440f1; - - --body-background: white; - --body-font-color: black; - - --icon-filter: none; - - --hint-color-info: #6bf; - --hint-color-warning: #fd6; - --hint-color-danger: #f66; -} - -@mixin theme-dark { - --gray-100: rgba(255, 255, 255, 0.1); - --gray-200: rgba(255, 255, 255, 0.2); - --gray-500: rgba(255, 255, 255, 0.5); - - --color-link: #84b2ff; - --color-visited-link: #b88dff; - - --body-background: #343a40; - --body-font-color: #e9ecef; - - --icon-filter: brightness(0) invert(1); - - --hint-color-info: #6bf; - --hint-color-warning: #fd6; - --hint-color-danger: #f66; -} diff --git a/docs/themes/hugo-book/assets/_fonts.scss b/docs/themes/hugo-book/assets/_fonts.scss deleted file mode 100644 index c1ad300..0000000 --- a/docs/themes/hugo-book/assets/_fonts.scss +++ /dev/null @@ -1,39 +0,0 @@ -/* roboto-regular - latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local(''), - url('fonts/roboto-v27-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('fonts/roboto-v27-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} -/* roboto-700 - latin */ -@font-face { - font-family: 'Roboto'; - font-style: normal; - font-weight: 700; - font-display: swap; - src: local(''), - url('fonts/roboto-v27-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('fonts/roboto-v27-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -/* roboto-mono-regular - latin */ -@font-face { - font-family: 'Roboto Mono'; - font-style: normal; - font-weight: 400; - font-display: swap; - src: local(''), - url('fonts/roboto-mono-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ - url('fonts/roboto-mono-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ -} - -body { - font-family: 'Roboto', sans-serif; -} - -code { - font-family: 'Roboto Mono', monospace; -} diff --git a/docs/themes/hugo-book/assets/_main.scss b/docs/themes/hugo-book/assets/_main.scss deleted file mode 100644 index 7073e2b..0000000 --- a/docs/themes/hugo-book/assets/_main.scss +++ /dev/null @@ -1,364 +0,0 @@ -html { - font-size: $font-size-base; - scroll-behavior: smooth; - touch-action: manipulation; -} - -body { - min-width: $body-min-width; - color: var(--body-font-color); - background: var(--body-background); - - letter-spacing: 0.33px; - font-weight: $body-font-weight; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - - box-sizing: border-box; - * { - box-sizing: inherit; - } -} - -h1, -h2, -h3, -h4, -h5 { - font-weight: $body-font-weight; -} - -a { - text-decoration: none; - color: var(--color-link); -} - -img { - vertical-align: baseline; -} - -:focus { - @include outline; -} - -aside nav ul { - padding: 0; - margin: 0; - list-style: none; - - li { - margin: 1em 0; - position: relative; - } - - a { - display: block; - } - - a:hover { - opacity: 0.5; - } - - ul { - padding-inline-start: $padding-16; - } -} - -ul.pagination { - display: flex; - justify-content: center; - list-style-type: none; - padding-inline-start: 0px; - - .page-item a { - padding: $padding-16; - } -} - -.container { - max-width: $container-max-width; - margin: 0 auto; -} - -.book-icon { - filter: var(--icon-filter); -} - -.book-brand { - margin-top: 0; - margin-bottom: $padding-16; - - img { - height: 1.5em; - width: 1.5em; - margin-inline-end: $padding-8; - } -} - -.book-menu { - flex: 0 0 $menu-width; - font-size: $font-size-14; - - .book-menu-content { - width: $menu-width; - padding: $padding-16; - background: var(--body-background); - - @include fixed; - } - - a, - label { - color: inherit; - cursor: pointer; - word-wrap: break-word; - } - - a.active { - color: var(--color-link); - } - - input.toggle + label + ul { - display: none; - } - - input.toggle:checked + label + ul { - display: block; - } - - input.toggle + label::after { - content: "▸"; - } - - input.toggle:checked + label::after { - content: "▾"; - } -} - -// for RTL support -body[dir="rtl"] .book-menu { - input.toggle + label::after { - content: "◂"; - } - - input.toggle:checked + label::after { - content: "▾"; - } -} - -.book-section-flat { - margin: $padding-16 * 2 0; - - > a, - > span, - > label { - font-weight: bolder; - } - - > ul { - padding-inline-start: 0; - } -} - -.book-page { - min-width: $body-min-width; - flex-grow: 1; - padding: $padding-16; -} - -.book-post { - margin-bottom: $padding-16 * 3; -} - -.book-header { - display: none; - margin-bottom: $padding-16; - - label { - line-height: 0; - } - - img.book-icon { - height: 1.5em; - width: 1.5em; - } -} - -.book-search { - position: relative; - margin: $padding-16 0; - border-bottom: 1px solid transparent; - - input { - width: 100%; - padding: $padding-8; - - border: 0; - border-radius: $border-radius; - - background: var(--gray-100); - color: var(--body-font-color); - - &:required + .book-search-spinner { - display: block; - } - } - - .book-search-spinner { - position: absolute; - top: 0; - margin: $padding-8; - margin-inline-start: calc(100% - #{$padding-16 + $padding-8}); - - width: $padding-16; - height: $padding-16; - - border: $padding-1 solid transparent; - border-top-color: var(--body-font-color); - border-radius: 50%; - - @include spin(1s); - } - - small { - opacity: 0.5; - } -} - -.book-toc { - flex: 0 0 $toc-width; - font-size: $font-size-12; - - .book-toc-content { - width: $toc-width; - padding: $padding-16; - - @include fixed; - } - - img { - height: 1em; - width: 1em; - } - - nav > ul > li:first-child { - margin-top: 0; - } -} - -.book-footer { - padding-top: $padding-16; - font-size: $font-size-14; - - img { - height: 1em; - width: 1em; - margin-inline-end: $padding-8; - } -} - -.book-comments { - margin-top: $padding-16; -} - -.book-languages { - margin-block-end: $padding-16 * 2; - - .book-icon { - height: 1em; - width: 1em; - margin-inline-end: .5em; - } - - ul { - padding-inline-start: 1.5em; - } -} - -// Responsive styles -.book-menu-content, -.book-toc-content, -.book-page, -.book-header aside, -.markdown { - transition: 0.2s ease-in-out; - transition-property: transform, margin, opacity, visibility; - will-change: transform, margin, opacity; -} - -@media screen and (max-width: $mobile-breakpoint) { - #menu-control, - #toc-control { - display: inline; - } - - .book-menu { - visibility: hidden; - margin-inline-start: -$menu-width; - font-size: $font-size-base; - z-index: 1; - } - - .book-toc { - display: none; - } - - .book-header { - display: block; - } - - #menu-control:focus ~ main label[for="menu-control"] { - @include outline; - } - - #menu-control:checked ~ main { - .book-menu { - visibility: initial; - } - - .book-menu .book-menu-content { - transform: translateX($menu-width); - box-shadow: 0 0 $padding-8 rgba(0, 0, 0, 0.1); - } - - .book-page { - opacity: 0.25; - } - - .book-menu-overlay { - display: block; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - } - } - - #toc-control:focus ~ main label[for="toc-control"] { - @include outline; - } - - #toc-control:checked ~ main { - .book-header aside { - display: block; - } - } - - // for RTL support - body[dir="rtl"] #menu-control:checked ~ main { - .book-menu .book-menu-content { - transform: translateX(-$menu-width); - } - } -} - -// Extra space for big screens -@media screen and (min-width: $container-max-width) { - .book-page, - .book-menu .book-menu-content, - .book-toc .book-toc-content { - padding: $padding-16 * 2 $padding-16; - } -} diff --git a/docs/themes/hugo-book/assets/_markdown.scss b/docs/themes/hugo-book/assets/_markdown.scss deleted file mode 100644 index af9b86d..0000000 --- a/docs/themes/hugo-book/assets/_markdown.scss +++ /dev/null @@ -1,196 +0,0 @@ -@import "variables"; - -.markdown { - line-height: 1.6; - - // remove padding at the beginning of page - > :first-child { - margin-top: 0; - } - - h1, - h2, - h3, - h4, - h5, - h6 { - font-weight: normal; - line-height: 1; - margin-top: 1.5em; - margin-bottom: $padding-16; - - a.anchor { - opacity: 0; - font-size: 0.75em; - vertical-align: middle; - text-decoration: none; - } - - &:hover a.anchor, - a.anchor:focus { - opacity: initial; - } - } - - h4, - h5, - h6 { - font-weight: bolder; - } - - h5 { - font-size: 0.875em; - } - - h6 { - font-size: 0.75em; - } - - b, - optgroup, - strong { - font-weight: bolder; - } - - a { - text-decoration: none; - - &:hover { - text-decoration: underline; - } - &:visited { - color: var(--color-visited-link); - } - } - - img { - max-width: 100%; - height: auto; - } - - code { - padding: 0 $padding-4; - background: var(--gray-200); - border-radius: $border-radius; - font-size: 0.875em; - } - - pre { - padding: $padding-16; - background: var(--gray-100); - border-radius: $border-radius; - overflow-x: auto; - - code { - padding: 0; - background: none; - } - } - - p { - word-wrap:break-word; - } - - blockquote { - margin: $padding-16 0; - padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp - - border-inline-start: $padding-4 solid var(--gray-200); - border-radius: $border-radius; - - :first-child { - margin-top: 0; - } - :last-child { - margin-bottom: 0; - } - } - - table { - overflow: auto; - display: block; - border-spacing: 0; - border-collapse: collapse; - margin-top: $padding-16; - margin-bottom: $padding-16; - - tr th, - tr td { - padding: $padding-8 $padding-16; - border: $padding-1 solid var(--gray-200); - } - - tr:nth-child(2n) { - background: var(--gray-100); - } - } - - hr { - height: $padding-1; - border: none; - background: var(--gray-200); - } - - ul, - ol { - padding-inline-start: $padding-16 * 2; - } - - dl { - dt { - font-weight: bolder; - margin-top: $padding-16; - } - - dd { - margin-inline-start: 0; - margin-bottom: $padding-16; - } - } - - // Special case for highlighted code with line numbers - .highlight table tr { - td:nth-child(1) pre { - margin: 0; - padding-inline-end: 0; - } - td:nth-child(2) pre { - margin: 0; - padding-inline-start: 0; - } - } - - details { - padding: $padding-16; - border: $padding-1 solid var(--gray-200); - border-radius: $border-radius; - - summary { - line-height: 1; - padding: $padding-16; - margin: -$padding-16; - cursor: pointer; - } - - &[open] summary { - margin-bottom: 0; - } - } - - figure { - margin: $padding-16 0; - figcaption p { - margin-top: 0; - } - } -} - -.markdown-inner { - // Util class to remove extra margin in nested markdown content - > :first-child { - margin-top: 0; - } - > :last-child { - margin-bottom: 0; - } -} diff --git a/docs/themes/hugo-book/assets/_print.scss b/docs/themes/hugo-book/assets/_print.scss deleted file mode 100644 index 8ae2901..0000000 --- a/docs/themes/hugo-book/assets/_print.scss +++ /dev/null @@ -1,17 +0,0 @@ -@media print { - .book-menu, - .book-footer, - .book-toc { - display: none; - } - - .book-header, - .book-header aside { - display: block; - } - - main { - // Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897 - display: block !important; - } -} diff --git a/docs/themes/hugo-book/assets/_shortcodes.scss b/docs/themes/hugo-book/assets/_shortcodes.scss deleted file mode 100644 index 714de2a..0000000 --- a/docs/themes/hugo-book/assets/_shortcodes.scss +++ /dev/null @@ -1,104 +0,0 @@ -.markdown { - // {{< expand "Label" "icon" >}} - .book-expand { - margin-top: $padding-16; - margin-bottom: $padding-16; - - border: $padding-1 solid var(--gray-200); - border-radius: $border-radius; - - overflow: hidden; - - .book-expand-head { - background: var(--gray-100); - padding: $padding-8 $padding-16; - cursor: pointer; - } - - .book-expand-content { - display: none; - padding: $padding-16; - } - - input[type="checkbox"]:checked + .book-expand-content { - display: block; - } - } - - // {{< tabs >}} - .book-tabs { - margin-top: $padding-16; - margin-bottom: $padding-16; - - border: $padding-1 solid var(--gray-200); - border-radius: $border-radius; - - overflow: hidden; - - display: flex; - flex-wrap: wrap; - - label { - display: inline-block; - padding: $padding-8 $padding-16; - border-bottom: $padding-1 transparent; - cursor: pointer; - } - - .book-tabs-content { - order: 999; //Move content blocks to the end - width: 100%; - border-top: $padding-1 solid var(--gray-100); - padding: $padding-16; - display: none; - } - - input[type="radio"]:checked + label { - border-bottom: $padding-1 solid var(--color-link); - } - input[type="radio"]:checked + label + .book-tabs-content { - display: block; - } - input[type="radio"]:focus + label { - @include outline; - } - } - - // {{< columns >}} - .book-columns { - margin-left: -$padding-16; - margin-right: -$padding-16; - - > div { - margin: $padding-16 0; - min-width: $body-min-width / 2; - padding: 0 $padding-16; - } - } - - // {{< button >}} - a.book-btn { - display: inline-block; - font-size: $font-size-14; - color: var(--color-link); - line-height: $padding-16 * 2; - padding: 0 $padding-16; - border: $padding-1 solid var(--color-link); - border-radius: $border-radius; - cursor: pointer; - - &:hover { - text-decoration: none; - } - } - - // {{< hint >}} - .book-hint { - @each $name, $color in $hint-colors { - &.#{$name} { - border-color: $color; - background-color: rgba($color, 0.1); - } - } - } -} diff --git a/docs/themes/hugo-book/assets/_utils.scss b/docs/themes/hugo-book/assets/_utils.scss deleted file mode 100644 index 29ef1ca..0000000 --- a/docs/themes/hugo-book/assets/_utils.scss +++ /dev/null @@ -1,92 +0,0 @@ -.flex { - display: flex; -} - -.flex-auto { - flex: 1 1 auto; -} - -.flex-even { - flex: 1 1; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.justify-start { - justify-content: flex-start; -} - -.justify-end { - justify-content: flex-end; -} - -.justify-center { - justify-content: center; -} - -.justify-between { - justify-content: space-between; -} - -.align-center { - align-items: center; -} - -.mx-auto { - margin: 0 auto; -} - -.text-center { - text-align: center; -} - -.text-left { - text-align: left; -} - -.text-right { - text-align: right; -} - -.hidden { - display: none; -} - -input.toggle { - height: 0; - width: 0; - overflow: hidden; - opacity: 0; - position: absolute; -} - -.clearfix::after { - content: ""; - display: table; - clear: both; -} - -@mixin spin($duration) { - animation: spin $duration ease infinite; - @keyframes spin { - 100% { - transform: rotate(360deg); - } - } -} - -@mixin fixed { - position: fixed; - top: 0; - bottom: 0; - overflow-x: hidden; - overflow-y: auto; -} - -@mixin outline { - outline-style: auto; - outline-color: currentColor; - outline-color: -webkit-focus-ring-color; -} diff --git a/docs/themes/hugo-book/assets/_variables.scss b/docs/themes/hugo-book/assets/_variables.scss deleted file mode 100644 index 6e34d16..0000000 --- a/docs/themes/hugo-book/assets/_variables.scss +++ /dev/null @@ -1,3 +0,0 @@ -/* You can override SASS variables here. */ - -// @import "plugins/dark"; diff --git a/docs/themes/hugo-book/assets/book.scss b/docs/themes/hugo-book/assets/book.scss deleted file mode 100644 index 59369fa..0000000 --- a/docs/themes/hugo-book/assets/book.scss +++ /dev/null @@ -1,15 +0,0 @@ -@import "defaults"; -@import "variables"; -@import "themes/{{ default "light" .Site.Params.BookTheme }}"; - -@import "normalize"; -@import "utils"; -@import "main"; -@import "fonts"; -@import "print"; - -@import "markdown"; -@import "shortcodes"; - -// Custom defined styles -@import "custom"; diff --git a/docs/themes/hugo-book/assets/clipboard.js b/docs/themes/hugo-book/assets/clipboard.js deleted file mode 100644 index 2799f2f..0000000 --- a/docs/themes/hugo-book/assets/clipboard.js +++ /dev/null @@ -1,24 +0,0 @@ -(function () { - function select(element) { - const selection = window.getSelection(); - - const range = document.createRange(); - range.selectNodeContents(element); - - selection.removeAllRanges(); - selection.addRange(range); - } - - document.querySelectorAll("pre code").forEach(code => { - code.addEventListener("click", function (event) { - if (window.getSelection().toString()) { - return; - } - select(code.parentElement); - - if (navigator.clipboard) { - navigator.clipboard.writeText(code.parentElement.textContent); - } - }); - }); -})(); diff --git a/docs/themes/hugo-book/assets/manifest.json b/docs/themes/hugo-book/assets/manifest.json deleted file mode 100644 index 6a137ac..0000000 --- a/docs/themes/hugo-book/assets/manifest.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "name": "{{ .Site.Title }}", - "short_name": "{{ .Site.Title }}", - "start_url": "{{ "/" | relURL }}", - "scope": "{{ "/" | relURL }}", - "display": "standalone", - "background_color": "#000000", - "theme_color": "#000000", - "icons": [ - { - "src": "{{ "/favicon.svg" | relURL }}", - "sizes": "512x512" - } - ] -} diff --git a/docs/themes/hugo-book/assets/menu-reset.js b/docs/themes/hugo-book/assets/menu-reset.js deleted file mode 100644 index 37cb47b..0000000 --- a/docs/themes/hugo-book/assets/menu-reset.js +++ /dev/null @@ -1,7 +0,0 @@ -(function() { - var menu = document.querySelector("aside .book-menu-content"); - addEventListener("beforeunload", function(event) { - localStorage.setItem("menu.scrollTop", menu.scrollTop); - }); - menu.scrollTop = localStorage.getItem("menu.scrollTop"); -})(); diff --git a/docs/themes/hugo-book/assets/mermaid.json b/docs/themes/hugo-book/assets/mermaid.json deleted file mode 100644 index 0a3f4fb..0000000 --- a/docs/themes/hugo-book/assets/mermaid.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "flowchart": { - "useMaxWidth":true - }, - "theme": "default" -} diff --git a/docs/themes/hugo-book/assets/normalize.css b/docs/themes/hugo-book/assets/normalize.css deleted file mode 100644 index 192eb9c..0000000 --- a/docs/themes/hugo-book/assets/normalize.css +++ /dev/null @@ -1,349 +0,0 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - -/* Document - ========================================================================== */ - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; /* 1 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/* Sections - ========================================================================== */ - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/* Text-level semantics - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - -/* Forms - ========================================================================== */ - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ - margin: 0; /* 2 */ -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { /* 1 */ - overflow: visible; -} - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; /* 1 */ - outline-offset: -2px; /* 2 */ -} - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; /* 1 */ - font: inherit; /* 2 */ -} - -/* Interactive - ========================================================================== */ - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - -/* Misc - ========================================================================== */ - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} diff --git a/docs/themes/hugo-book/assets/plugins/_numbered.scss b/docs/themes/hugo-book/assets/plugins/_numbered.scss deleted file mode 100644 index 56cda5a..0000000 --- a/docs/themes/hugo-book/assets/plugins/_numbered.scss +++ /dev/null @@ -1,36 +0,0 @@ -$startLevel: 1; -$endLevel: 6; - -.book-page .markdown { - @for $currentLevel from $startLevel through $endLevel { - > h#{$currentLevel} { - counter-increment: h#{$currentLevel}; - counter-reset: h#{$currentLevel + 1}; - - $content: ""; - @for $n from $startLevel through $currentLevel { - $content: $content + 'counter(h#{$n})"."'; - } - - &::before { - content: unquote($content) " "; - } - } - } -} - -.book-toc nav ul { - li { - counter-increment: item; - - &:first-child { - counter-reset: item; - } - - &:before { - content: counters(item, ".") ". "; - float: left; - margin-inline-end: $padding-4; - } - } -} diff --git a/docs/themes/hugo-book/assets/plugins/_scrollbars.scss b/docs/themes/hugo-book/assets/plugins/_scrollbars.scss deleted file mode 100644 index 0062582..0000000 --- a/docs/themes/hugo-book/assets/plugins/_scrollbars.scss +++ /dev/null @@ -1,26 +0,0 @@ -@import "defaults"; -@import "variables"; - -// Webkit -::-webkit-scrollbar { - width: $padding-8; -} - -::-webkit-scrollbar-thumb { - background: transparent; - border-radius: $padding-8; -} - -:hover::-webkit-scrollbar-thumb { - background: var(--gray-500); -} - -// MS -body { - -ms-overflow-style: -ms-autohiding-scrollbar; -} - -// Future -.book-menu nav { - scrollbar-color: transparent var(--gray-500); -} diff --git a/docs/themes/hugo-book/assets/search-data.json b/docs/themes/hugo-book/assets/search-data.json deleted file mode 100644 index 9a137c3..0000000 --- a/docs/themes/hugo-book/assets/search-data.json +++ /dev/null @@ -1,15 +0,0 @@ -[ -{{- $pages := where .Site.Pages "Kind" "in" (slice "page" "section") -}} -{{- $pages = where $pages "Params.booksearchexclude" "!=" true -}} -{{- $pages = where $pages "Content" "not in" (slice nil "") -}} - -{{ range $index, $page := $pages }} -{{ if gt $index 0}},{{end}} { - "id": {{ $index }}, - "href": "{{ $page.RelPermalink }}", - "title": {{ (partial "docs/title" $page) | jsonify }}, - "section": {{ (partial "docs/title" $page.Parent) | jsonify }}, - "content": {{ $page.Plain | jsonify }} -} -{{- end -}} -] diff --git a/docs/themes/hugo-book/assets/search.js b/docs/themes/hugo-book/assets/search.js deleted file mode 100644 index 2d75fee..0000000 --- a/docs/themes/hugo-book/assets/search.js +++ /dev/null @@ -1,104 +0,0 @@ -'use strict'; - -{{ $searchDataFile := printf "%s.search-data.json" .Language.Lang }} -{{ $searchData := resources.Get "search-data.json" | resources.ExecuteAsTemplate $searchDataFile . | resources.Minify | resources.Fingerprint }} -{{ $searchConfig := i18n "bookSearchConfig" | default "{}" }} - -(function () { - const searchDataURL = '{{ $searchData.RelPermalink }}'; - const indexConfig = Object.assign({{ $searchConfig }}, { - doc: { - id: 'id', - field: ['title', 'content'], - store: ['title', 'href', 'section'] - } - }); - - const input = document.querySelector('#book-search-input'); - const results = document.querySelector('#book-search-results'); - - if (!input) { - return - } - - input.addEventListener('focus', init); - input.addEventListener('keyup', search); - - document.addEventListener('keypress', focusSearchFieldOnKeyPress); - - /** - * @param {Event} event - */ - function focusSearchFieldOnKeyPress(event) { - if (event.target.value !== undefined) { - return; - } - - if (input === document.activeElement) { - return; - } - - const characterPressed = String.fromCharCode(event.charCode); - if (!isHotkey(characterPressed)) { - return; - } - - input.focus(); - event.preventDefault(); - } - - /** - * @param {String} character - * @returns {Boolean} - */ - function isHotkey(character) { - const dataHotkeys = input.getAttribute('data-hotkeys') || ''; - return dataHotkeys.indexOf(character) >= 0; - } - - function init() { - input.removeEventListener('focus', init); // init once - input.required = true; - - fetch(searchDataURL) - .then(pages => pages.json()) - .then(pages => { - window.bookSearchIndex = FlexSearch.create('balance', indexConfig); - window.bookSearchIndex.add(pages); - }) - .then(() => input.required = false) - .then(search); - } - - function search() { - while (results.firstChild) { - results.removeChild(results.firstChild); - } - - if (!input.value) { - return; - } - - const searchHits = window.bookSearchIndex.search(input.value, 10); - searchHits.forEach(function (page) { - const li = element('

    • '); - const a = li.querySelector('a'), small = li.querySelector('small'); - - a.href = page.href; - a.textContent = page.title; - small.textContent = page.section; - - results.appendChild(li); - }); - } - - /** - * @param {String} content - * @returns {Node} - */ - function element(content) { - const div = document.createElement('div'); - div.innerHTML = content; - return div.firstChild; - } -})(); diff --git a/docs/themes/hugo-book/assets/sw-register.js b/docs/themes/hugo-book/assets/sw-register.js deleted file mode 100644 index b67dbfd..0000000 --- a/docs/themes/hugo-book/assets/sw-register.js +++ /dev/null @@ -1,7 +0,0 @@ -{{- $swJS := resources.Get "sw.js" | resources.ExecuteAsTemplate "sw.js" . -}} -if (navigator.serviceWorker) { - navigator.serviceWorker.register( - "{{ $swJS.RelPermalink }}", - { scope: "{{ "/" | relURL }}" } - ); -} diff --git a/docs/themes/hugo-book/assets/sw.js b/docs/themes/hugo-book/assets/sw.js deleted file mode 100644 index 2ff11fc..0000000 --- a/docs/themes/hugo-book/assets/sw.js +++ /dev/null @@ -1,55 +0,0 @@ -const cacheName = self.location.pathname -const pages = [ -{{ if eq .Site.Params.BookServiceWorker "precache" }} - {{ range .Site.AllPages -}} - "{{ .RelPermalink }}", - {{ end -}} -{{ end }} -]; - -self.addEventListener("install", function (event) { - self.skipWaiting(); - - caches.open(cacheName).then((cache) => { - return cache.addAll(pages); - }); -}); - -self.addEventListener("fetch", (event) => { - const request = event.request; - if (request.method !== "GET") { - return; - } - - /** - * @param {Response} response - * @returns {Promise} - */ - function saveToCache(response) { - if (cacheable(response)) { - return caches - .open(cacheName) - .then((cache) => cache.put(request, response.clone())) - .then(() => response); - } else { - return response; - } - } - - /** - * @param {Error} error - */ - function serveFromCache(error) { - return caches.open(cacheName).then((cache) => cache.match(request.url)); - } - - /** - * @param {Response} response - * @returns {Boolean} - */ - function cacheable(response) { - return response.type === "basic" && response.ok && !response.headers.has("Content-Disposition") - } - - event.respondWith(fetch(request).then(saveToCache).catch(serveFromCache)); -}); diff --git a/docs/themes/hugo-book/assets/themes/_auto.scss b/docs/themes/hugo-book/assets/themes/_auto.scss deleted file mode 100644 index 31d7f9a..0000000 --- a/docs/themes/hugo-book/assets/themes/_auto.scss +++ /dev/null @@ -1,9 +0,0 @@ -:root { - @include theme-light; -} - -@media (prefers-color-scheme: dark) { - :root { - @include theme-dark; - } -} diff --git a/docs/themes/hugo-book/assets/themes/_dark.scss b/docs/themes/hugo-book/assets/themes/_dark.scss deleted file mode 100644 index e00e38e..0000000 --- a/docs/themes/hugo-book/assets/themes/_dark.scss +++ /dev/null @@ -1,3 +0,0 @@ -:root { - @include theme-dark; -} diff --git a/docs/themes/hugo-book/assets/themes/_light.scss b/docs/themes/hugo-book/assets/themes/_light.scss deleted file mode 100644 index 8c0e346..0000000 --- a/docs/themes/hugo-book/assets/themes/_light.scss +++ /dev/null @@ -1,3 +0,0 @@ -:root { - @include theme-light; -} diff --git a/docs/themes/hugo-book/exampleSite/assets/_custom.scss b/docs/themes/hugo-book/exampleSite/assets/_custom.scss deleted file mode 100644 index 9be7a1d..0000000 --- a/docs/themes/hugo-book/exampleSite/assets/_custom.scss +++ /dev/null @@ -1,4 +0,0 @@ -/* You can add custom styles here. */ - -// @import "plugins/numbered"; -// @import "plugins/scrollbars"; diff --git a/docs/themes/hugo-book/exampleSite/assets/_variables.scss b/docs/themes/hugo-book/exampleSite/assets/_variables.scss deleted file mode 100644 index 98b4d4e..0000000 --- a/docs/themes/hugo-book/exampleSite/assets/_variables.scss +++ /dev/null @@ -1 +0,0 @@ -/* You can override SASS variables here. */ diff --git a/docs/themes/hugo-book/exampleSite/config.toml b/docs/themes/hugo-book/exampleSite/config.toml deleted file mode 100644 index da0b209..0000000 --- a/docs/themes/hugo-book/exampleSite/config.toml +++ /dev/null @@ -1,118 +0,0 @@ -# hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/ - -baseURL = 'https://example.com/' -title = 'Hugo Book' -theme = 'hugo-book' - -# Book configuration -disablePathToLower = true -enableGitInfo = true - -# Needed for mermaid/katex shortcodes -[markup] -[markup.goldmark.renderer] - unsafe = true - -[markup.tableOfContents] - startLevel = 1 - -# Multi-lingual mode config -# There are different options to translate files -# See https://gohugo.io/content-management/multilingual/#translation-by-filename -# And https://gohugo.io/content-management/multilingual/#translation-by-content-directory -[languages] -[languages.en] - languageName = 'English' - contentDir = 'content.en' - weight = 1 - -[languages.ru] - languageName = 'Russian' - contentDir = 'content.ru' - weight = 2 - -[languages.zh] - languageName = 'Chinese' - contentDir = 'content.zh' - weight = 3 - -[menu] -# [[menu.before]] -[[menu.after]] - name = "Github" - url = "https://github.com/alex-shpak/hugo-book" - weight = 10 - -[[menu.after]] - name = "Hugo Themes" - url = "https://themes.gohugo.io/hugo-book/" - weight = 20 - -[params] - # (Optional, default light) Sets color theme: light, dark or auto. - # Theme 'auto' switches between dark and light modes based on browser/os preferences - BookTheme = 'light' - - # (Optional, default true) Controls table of contents visibility on right side of pages. - # Start and end levels can be controlled with markup.tableOfContents setting. - # You can also specify this parameter per page in front matter. - BookToC = true - - # (Optional, default none) Set the path to a logo for the book. If the logo is - # /static/logo.png then the path would be logo.png - # BookLogo = 'logo.png' - - # (Optional, default none) Set leaf bundle to render as side menu - # When not specified file structure and weights will be used - # BookMenuBundle = '/menu' - - # (Optional, default docs) Specify root page to render child pages as menu. - # Page is resoled by .GetPage function: https://gohugo.io/functions/getpage/ - # For backward compatibility you can set '*' to render all sections to menu. Acts same as '/' - BookSection = 'docs' - - # Set source repository location. - # Used for 'Last Modified' and 'Edit this page' links. - BookRepo = 'https://github.com/alex-shpak/hugo-book' - - # (Optional, default 'commit') Specifies commit portion of the link to the page's last modified - # commit hash for 'doc' page type. - # Requires 'BookRepo' param. - # Value used to construct a URL consisting of BookRepo/BookCommitPath/ - # Github uses 'commit', Bitbucket uses 'commits' - # BookCommitPath = 'commit' - - # Enable "Edit this page" links for 'doc' page type. - # Disabled by default. Uncomment to enable. Requires 'BookRepo' param. - # Edit path must point to root directory of repo. - BookEditPath = 'edit/main/exampleSite' - - # Configure the date format used on the pages - # - In git information - # - In blog posts - BookDateFormat = 'January 2, 2006' - - # (Optional, default true) Enables search function with flexsearch, - # Index is built on fly, therefore it might slowdown your website. - # Configuration for indexing can be adjusted in i18n folder per language. - BookSearch = true - - # (Optional, default true) Enables comments template on pages - # By default partals/docs/comments.html includes Disqus template - # See https://gohugo.io/content-management/comments/#configure-disqus - # Can be overwritten by same param in page frontmatter - BookComments = true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables portable links and link checks in markdown pages. - # Portable links meant to work with text editors and let you write markdown without {{< relref >}} shortcode - # Theme will print warning if page referenced in markdown does not exists. - BookPortableLinks = true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables service worker that caches visited pages and resources for offline use. - BookServiceWorker = true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables a drop-down menu for translations only if a translation is present. - BookTranslatedOnly = false diff --git a/docs/themes/hugo-book/exampleSite/config.yaml b/docs/themes/hugo-book/exampleSite/config.yaml deleted file mode 100644 index de55039..0000000 --- a/docs/themes/hugo-book/exampleSite/config.yaml +++ /dev/null @@ -1,114 +0,0 @@ -# hugo server --minify --themesDir ... --baseURL=http://0.0.0.0:1313/theme/hugo-book/ - -baseURL: https://example.com/ -title: Hugo Book -theme: hugo-book - -# Book configuration -disablePathToLower: true -enableGitInfo: true - -# Needed for mermaid/katex shortcodes -markup: - goldmark: - renderer: - unsafe: true - tableOfContents: - startLevel: 1 - -# Multi-lingual mode config -# There are different options to translate files -# See https://gohugo.io/content-management/multilingual/#translation-by-filename -# And https://gohugo.io/content-management/multilingual/#translation-by-content-directory -languages: - en: - languageName: English - contentDir: content.en - weight: 1 - ru: - languageName: Russian - contentDir: content.ru - weight: 2 - zh: - languageName: Chinese - contentDir: content.zh - weight: 3 - -menu: - # before: [] - after: - - name: "Github" - url: "https://github.com/alex-shpak/hugo-book" - weight: 10 - - name: "Hugo Themes" - url: "https://themes.gohugo.io/hugo-book/" - weight: 20 - -params: - # (Optional, default light) Sets color theme: light, dark or auto. - # Theme 'auto' switches between dark and light modes based on browser/os preferences - BookTheme: "light" - - # (Optional, default true) Controls table of contents visibility on right side of pages. - # Start and end levels can be controlled with markup.tableOfContents setting. - # You can also specify this parameter per page in front matter. - BookToC: true - - # (Optional, default none) Set the path to a logo for the book. If the logo is - # /static/logo.png then the path would be logo.png - # BookLogo: /logo.png - - # (Optional, default none) Set leaf bundle to render as side menu - # When not specified file structure and weights will be used - # BookMenuBundle: /menu - - # (Optional, default docs) Specify root page to render child pages as menu. - # Page is resoled by .GetPage function: https://gohugo.io/functions/getpage/ - # For backward compatibility you can set '*' to render all sections to menu. Acts same as '/' - BookSection: docs - - # Set source repository location. - # Used for 'Last Modified' and 'Edit this page' links. - BookRepo: https://github.com/alex-shpak/hugo-book - - # (Optional, default 'commit') Specifies commit portion of the link to the page's last modified - # commit hash for 'doc' page type. - # Requires 'BookRepo' param. - # Value used to construct a URL consisting of BookRepo/BookCommitPath/ - # Github uses 'commit', Bitbucket uses 'commits' - # BookCommitPath: commit - - # Enable "Edit this page" links for 'doc' page type. - # Disabled by default. Uncomment to enable. Requires 'BookRepo' param. - # Edit path must point to root directory of repo. - BookEditPath: edit/main/exampleSite - - # Configure the date format used on the pages - # - In git information - # - In blog posts - BookDateFormat: "January 2, 2006" - - # (Optional, default true) Enables search function with flexsearch, - # Index is built on fly, therefore it might slowdown your website. - # Configuration for indexing can be adjusted in i18n folder per language. - BookSearch: true - - # (Optional, default true) Enables comments template on pages - # By default partals/docs/comments.html includes Disqus template - # See https://gohugo.io/content-management/comments/#configure-disqus - # Can be overwritten by same param in page frontmatter - BookComments: true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables portable links and link checks in markdown pages. - # Portable links meant to work with text editors and let you write markdown without {{< relref >}} shortcode - # Theme will print warning if page referenced in markdown does not exists. - BookPortableLinks: true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables service worker that caches visited pages and resources for offline use. - BookServiceWorker: true - - # /!\ This is an experimental feature, might be removed or changed at any time - # (Optional, experimental, default false) Enables a drop-down menu for translations only if a translation is present. - BookTranslatedOnly: false diff --git a/docs/themes/hugo-book/exampleSite/content.bn/_index.md b/docs/themes/hugo-book/exampleSite/content.bn/_index.md deleted file mode 100644 index 85c03e0..0000000 --- a/docs/themes/hugo-book/exampleSite/content.bn/_index.md +++ /dev/null @@ -1,79 +0,0 @@ ---- -title: ভূমিকা -type: docs ---- - -# বাংলা ভাষায় শুরু করুন - -{{< columns >}} -## অস্ট্রিস চিপসে ফুর্তিভা - -Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut -olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis, -modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies - -<---> - -## সুইস কোটা ভোটে - -Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat: -miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod -nunc! Fragosis suae dextra geruntur functus vulgata. -{{< /columns >}} - - -## টেম্পোরার নিশি - -Lorem **markdownum** emicat gestu. Cannis sol pressit ducta. **Est** Idaei, -tremens ausim se tutaeque, illi ulnis hausit, sed, lumina cutem. Quae avis -sequens! - - var panel = ram_design; - if (backup + system) { - file.readPoint = network_native; - sidebar_engine_device(cell_tftp_raster, - dual_login_paper.adf_vci.application_reader_design( - graphicsNvramCdma, lpi_footer_snmp, integer_model)); - } - public_keyboard_docking += error.controller_gibibyte_plug.ip(4, - asciiPetaflops, software(supercomputer_compatible_status + 4)); - dynamic_disk.indexModeLaptop = bufferTftpReality; - var export_vlog_sequence = trinitron_flowchart + supercomputer_cluster_rj( - -1, toolbar_powerpoint_query, -2 / multiprocessing_impression); - -## Locis suis novi cum suoque decidit eadem - -Idmoniae ripis, at aves, ali missa adest, ut _et autem_, et ab? Venit spes -versus finis sermonibus patefecit murum nec est sine oculis. _Ille_ inmota -macies domoque caelestia cadit tantummodo scelus procul, corde! - -1. Dolentem capi parte rostro alvum habentem pudor -2. Fulgentia sanguine paret -3. E punior consurgit lentus -4. Vox hasta eras micantes - -## Facibus pharetrae indetonsusque indulsit sic incurrite foliis - -Nefandam et prisci palmas! Blandita cutis flectitur montis macies, te _nati_ -Latiis; turbaque inferias. Virginis tibi peracta avidusque facies caper nec, e -at ademptae, mira. - - direct *= font(inputScareware(sliHome), crossplatform.byte( - ppl_encryption.excel_e_rte(integratedModelModifier), timeVirtual, - floating_speakers.media_printer(us, yahoo, primaryPhp))); - friendly_metal_flatbed(cd, isoPrimaryStorage(reader), dmaMirrored); - if (parse_flash_cron.metalGif(1, adServiceDevice, utility)) { - adf -= operation_cdma_samba; - imapGif.switch += torrent; - } else { - pmu.disk_captcha = digital_ppp_pci + recursionTransistor(5, dram); - ajax_service += grayscalePythonLock; - google_scroll_capacity = ftp + engine_dslam_sidebar / tape - 1; - } - drive_rw = zipTftp; - var suffix = software_router_extension.dimm_ddr(-5, - kernel_digital_minisite); - -Vocavit toto; alas **mitis** maestus in liquidarum ab legi finitimosque dominam -tibi subitus; Orionis vertitur nota. Currere alti etiam seroque cernitis -innumeris miraturus amplectique collo sustinet quemque! Litora ante turba? diff --git a/docs/themes/hugo-book/exampleSite/content.en/_index.md b/docs/themes/hugo-book/exampleSite/content.en/_index.md deleted file mode 100644 index 6123c28..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/_index.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Introduction -type: docs ---- - -# Acerbo datus maxime - -{{< columns >}} -## Astris ipse furtiva - -Est in vagis et Pittheus tu arge accipiter regia iram vocatur nurus. Omnes ut -olivae sensit **arma sorori** deducit, inesset **crudus**, ego vetuere aliis, -modo arsit? Utinam rapta fiducia valuere litora _adicit cursu_, ad facies - -<---> - -## Suis quot vota - -Ea _furtique_ risere fratres edidit terrae magis. Colla tam mihi tenebat: -miseram excita suadent es pecudes iam. Concilio _quam_ velatus posset ait quod -nunc! Fragosis suae dextra geruntur functus vulgata. -{{< /columns >}} - - -## Tempora nisi nunc - -Lorem **markdownum** emicat gestu. Cannis sol pressit ducta. **Est** Idaei, -tremens ausim se tutaeque, illi ulnis hausit, sed, lumina cutem. Quae avis -sequens! - - var panel = ram_design; - if (backup + system) { - file.readPoint = network_native; - sidebar_engine_device(cell_tftp_raster, - dual_login_paper.adf_vci.application_reader_design( - graphicsNvramCdma, lpi_footer_snmp, integer_model)); - } - -## Locis suis novi cum suoque decidit eadem - -Idmoniae ripis, at aves, ali missa adest, ut _et autem_, et ab? diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/_index.md deleted file mode 100644 index 4835b7c..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/_index.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -weight: 1 -bookFlatSection: true -title: "Example Site" ---- - -# Introduction - -## Ferre hinnitibus erat accipitrem dixi Troiae tollens - -Lorem markdownum, a quoque nutu est *quodcumque mandasset* veluti. Passim -inportuna totidemque nympha fert; repetens pendent, poenarum guttura sed vacet -non, mortali undas. Omnis pharetramque gramen portentificisque membris servatum -novabis fallit de nubibus atque silvas mihi. **Dixit repetitaque Quid**; verrit -longa; sententia [mandat](http://pastor-ad.io/questussilvas) quascumque nescio -solebat [litore](http://lacrimas-ab.net/); noctes. *Hostem haerentem* circuit -[plenaque tamen](http://www.sine.io/in). - -- Pedum ne indigenae finire invergens carpebat -- Velit posses summoque -- De fumos illa foret - -## Est simul fameque tauri qua ad - -Locum nullus nisi vomentes. Ab Persea sermone vela, miratur aratro; eandem -Argolicas gener. - -## Me sol - -Nec dis certa fuit socer, Nonacria **dies** manet tacitaque sibi? Sucis est -iactata Castrumque iudex, et iactato quoque terraeque es tandem et maternos -vittis. Lumina litus bene poenamque animos callem ne tuas in leones illam dea -cadunt genus, et pleno nunc in quod. Anumque crescentesque sanguinis -[progenies](http://www.late.net/alimentavirides) nuribus rustica tinguet. Pater -omnes liquido creditis noctem. - - if (mirrored(icmp_dvd_pim, 3, smbMirroredHard) != lion(clickImportQueue, - viralItunesBalancing, bankruptcy_file_pptp)) { - file += ip_cybercrime_suffix; - } - if (runtimeSmartRom == netMarketingWord) { - virusBalancingWin *= scriptPromptBespoke + raster(post_drive, - windowsSli); - cd = address_hertz_trojan; - soap_ccd.pcbServerGigahertz(asp_hardware_isa, offlinePeopleware, nui); - } else { - megabyte.api = modem_flowchart - web + syntaxHalftoneAddress; - } - if (3 < mebibyteNetworkAnimated) { - pharming_regular_error *= jsp_ribbon + algorithm * recycleMediaKindle( - dvrSyntax, cdma); - adf_sla *= hoverCropDrive; - templateNtfs = -1 - vertical; - } else { - expressionCompressionVariable.bootMulti = white_eup_javascript( - table_suffix); - guidPpiPram.tracerouteLinux += rtfTerabyteQuicktime(1, - managementRosetta(webcamActivex), 740874); - } - var virusTweetSsl = nullGigo; - -## Trepident sitimque - -Sentiet et ferali errorem fessam, coercet superbus, Ascaniumque in pennis -mediis; dolor? Vidit imi **Aeacon** perfida propositos adde, tua Somni Fluctibus -errante lustrat non. - -Tamen inde, vos videt e flammis Scythica parantem rupisque pectora umbras. Haec -ficta canistris repercusso simul ego aris Dixit! Esse Fama trepidare hunc -crescendo vigor ululasse vertice *exspatiantur* celer tepidique petita aversata -oculis iussa est me ferro. diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/4th-level.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/4th-level.md deleted file mode 100644 index aa451f1..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/4th-level.md +++ /dev/null @@ -1,12 +0,0 @@ -# 4th Level of Menu - -## Caesorum illa tu sentit micat vestes papyriferi - -Inde aderam facti; Theseus vis de tauri illa peream. Oculos **uberaque** non -regisque vobis cursuque, opus venit quam vulnera. Et maiora necemque, lege modo; -gestanda nitidi, vero? Dum ne pectoraque testantur. - -Venasque repulsa Samos qui, exspectatum eram animosque hinc, [aut -manes](http://www.creveratnon.net/apricaaetheriis), Assyrii. Cupiens auctoribus -pariter rubet, profana magni super nocens. Vos ius sibilat inpar turba visae -iusto! Sedes ante dum superest **extrema**. diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/_index.md deleted file mode 100644 index cc0100f..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/3rd-level/_index.md +++ /dev/null @@ -1,26 +0,0 @@ -# 3rd Level of Menu - -Nefas discordemque domino montes numen tum humili nexilibusque exit, Iove. Quae -miror esse, scelerisque Melaneus viribus. Miseri laurus. Hoc est proposita me -ante aliquid, aura inponere candidioribus quidque accendit bella, sumpta. -Intravit quam erat figentem hunc, motus de fontes parvo tempestate. - - iscsi_virus = pitch(json_in_on(eupViral), - northbridge_services_troubleshooting, personal( - firmware_rw.trash_rw_crm.device(interactive_gopher_personal, - software, -1), megabit, ergonomicsSoftware(cmyk_usb_panel, - mips_whitelist_duplex, cpa))); - if (5) { - managementNetwork += dma - boolean; - kilohertz_token = 2; - honeypot_affiliate_ergonomics = fiber; - } - mouseNorthbridge = byte(nybble_xmp_modem.horse_subnet( - analogThroughputService * graphicPoint, drop(daw_bit, dnsIntranet), - gateway_ospf), repository.domain_key.mouse(serverData(fileNetwork, - trim_duplex_file), cellTapeDirect, token_tooltip_mashup( - ripcordingMashup))); - module_it = honeypot_driver(client_cold_dvr(593902, ripping_frequency) + - coreLog.joystick(componentUdpLink), windows_expansion_touchscreen); - bashGigabit.external.reality(2, server_hardware_codec.flops.ebookSampling( - ciscNavigationBacklink, table + cleanDriver), indexProtocolIsp); diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/_index.md deleted file mode 100644 index e954f08..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/collapsed/_index.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -bookCollapseSection: true -weight: 20 ---- diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/hidden.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/hidden.md deleted file mode 100644 index df7cb9e..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/hidden.md +++ /dev/null @@ -1,52 +0,0 @@ ---- -bookHidden: true ---- - -# This page is hidden in menu - -# Quondam non pater est dignior ille Eurotas - -## Latent te facies - -Lorem markdownum arma ignoscas vocavit quoque ille texit mandata mentis ultimus, -frementes, qui in vel. Hippotades Peleus [pennas -conscia](http://gratia.net/tot-qua.php) cuiquam Caeneus quas. - -- Pater demittere evincitque reddunt -- Maxime adhuc pressit huc Danaas quid freta -- Soror ego -- Luctus linguam saxa ultroque prior Tatiumque inquit -- Saepe liquitur subita superata dederat Anius sudor - -## Cum honorum Latona - -O fallor [in sustinui -iussorum](http://www.spectataharundine.org/aquas-relinquit.html) equidem. -Nymphae operi oris alii fronde parens dumque, in auro ait mox ingenti proxima -iamdudum maius? - - reality(burnDocking(apache_nanometer), - pad.property_data_programming.sectorBrowserPpga(dataMask, 37, - recycleRup)); - intellectualVaporwareUser += -5 * 4; - traceroute_key_upnp /= lag_optical(android.smb(thyristorTftp)); - surge_host_golden = mca_compact_device(dual_dpi_opengl, 33, - commerce_add_ppc); - if (lun_ipv) { - verticalExtranet(1, thumbnail_ttl, 3); - bar_graphics_jpeg(chipset - sector_xmp_beta); - } - -## Fronde cetera dextrae sequens pennis voce muneris - -Acta cretus diem restet utque; move integer, oscula non inspirat, noctisque -scelus! Nantemque in suas vobis quamvis, et labori! - - var runtimeDiskCompiler = home - array_ad_software; - if (internic > disk) { - emoticonLockCron += 37 + bps - 4; - wan_ansi_honeypot.cardGigaflops = artificialStorageCgi; - simplex -= downloadAccess; - } - var volumeHardeningAndroid = pixel + tftp + onProcessorUnmount; - sector(memory(firewire + interlaced, wired)); \ No newline at end of file diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/_index.md deleted file mode 100644 index c7ee0d8..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/_index.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -weight: 10 ---- - -# Ubi loqui - -## Mentem genus facietque salire tempus bracchia - -Lorem markdownum partu paterno Achillem. Habent amne generosi aderant ad pellem -nec erat sustinet merces columque haec et, dixit minus nutrit accipiam subibis -subdidit. Temeraria servatum agros qui sed fulva facta. Primum ultima, dedit, -suo quisque linguae medentes fixo: tum petis. - -## Rapit vocant si hunc siste adspice - -Ora precari Patraeque Neptunia, dixit Danae [Cithaeron -armaque](http://mersis-an.org/litoristum) maxima in **nati Coniugis** templis -fluidove. Effugit usus nec ingreditur agmen *ac manus* conlato. Nullis vagis -nequiquam vultibus aliquos altera *suum venis* teneas fretum. Armos [remotis -hoc](http://tutum.io/me) sine ferrea iuncta quam! - -## Locus fuit caecis - -Nefas discordemque domino montes numen tum humili nexilibusque exit, Iove. Quae -miror esse, scelerisque Melaneus viribus. Miseri laurus. Hoc est proposita me -ante aliquid, aura inponere candidioribus quidque accendit bella, sumpta. -Intravit quam erat figentem hunc, motus de fontes parvo tempestate. - - iscsi_virus = pitch(json_in_on(eupViral), - northbridge_services_troubleshooting, personal( - firmware_rw.trash_rw_crm.device(interactive_gopher_personal, - software, -1), megabit, ergonomicsSoftware(cmyk_usb_panel, - mips_whitelist_duplex, cpa))); - if (5) { - managementNetwork += dma - boolean; - kilohertz_token = 2; - honeypot_affiliate_ergonomics = fiber; - } - mouseNorthbridge = byte(nybble_xmp_modem.horse_subnet( - analogThroughputService * graphicPoint, drop(daw_bit, dnsIntranet), - gateway_ospf), repository.domain_key.mouse(serverData(fileNetwork, - trim_duplex_file), cellTapeDirect, token_tooltip_mashup( - ripcordingMashup))); - module_it = honeypot_driver(client_cold_dvr(593902, ripping_frequency) + - coreLog.joystick(componentUdpLink), windows_expansion_touchscreen); - bashGigabit.external.reality(2, server_hardware_codec.flops.ebookSampling( - ciscNavigationBacklink, table + cleanDriver), indexProtocolIsp); - -## Placabilis coactis nega ingemuit ignoscat nimia non - -Frontis turba. Oculi gravis est Delphice; *inque praedaque* sanguine manu non. - - if (ad_api) { - zif += usb.tiffAvatarRate(subnet, digital_rt) + exploitDrive; - gigaflops(2 - bluetooth, edi_asp_memory.gopher(queryCursor, laptop), - panel_point_firmware); - spyware_bash.statePopApplet = express_netbios_digital( - insertion_troubleshooting.brouter(recordFolderUs), 65); - } - recursionCoreRay = -5; - if (hub == non) { - portBoxVirus = soundWeb(recursive_card(rwTechnologyLeopard), - font_radcab, guidCmsScalable + reciprocalMatrixPim); - left.bug = screenshot; - } else { - tooltipOpacity = raw_process_permalink(webcamFontUser, -1); - executable_router += tape; - } - if (tft) { - bandwidthWeb *= social_page; - } else { - regular += 611883; - thumbnail /= system_lag_keyboard; - } - -## Caesorum illa tu sentit micat vestes papyriferi - -Inde aderam facti; Theseus vis de tauri illa peream. Oculos **uberaque** non -regisque vobis cursuque, opus venit quam vulnera. Et maiora necemque, lege modo; -gestanda nitidi, vero? Dum ne pectoraque testantur. - -Venasque repulsa Samos qui, exspectatum eram animosque hinc, [aut -manes](http://www.creveratnon.net/apricaaetheriis), Assyrii. Cupiens auctoribus -pariter rubet, profana magni super nocens. Vos ius sibilat inpar turba visae -iusto! Sedes ante dum superest **extrema**. diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/with-toc.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/with-toc.md deleted file mode 100644 index 5345c66..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/with-toc.md +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: With ToC -weight: 1 ---- -# Caput vino delphine in tamen vias - -## Cognita laeva illo fracta - -Lorem markdownum pavent auras, surgit nunc cingentibus libet **Laomedonque que** -est. Pastor [An](http://est.org/ire.aspx) arbor filia foedat, ne [fugit -aliter](http://www.indiciumturbam.org/moramquid.php), per. Helicona illas et -callida neptem est *Oresitrophos* caput, dentibus est venit. Tenet reddite -[famuli](http://www.antro-et.net/) praesentem fortibus, quaeque vis foret si -frondes *gelidos* gravidae circumtulit [inpulit armenta -nativum](http://incurvasustulit.io/illi-virtute.html). - -1. Te at cruciabere vides rubentis manebo -2. Maturuit in praetemptat ruborem ignara postquam habitasse -3. Subitarum supplevit quoque fontesque venabula spretis modo -4. Montis tot est mali quasque gravis -5. Quinquennem domus arsit ipse -6. Pellem turis pugnabant locavit - -## Natus quaerere - -Pectora et sine mulcere, coniuge dum tincta incurvae. Quis iam; est dextra -Peneosque, metuis a verba, primo. Illa sed colloque suis: magno: gramen, aera -excutiunt concipit. - -> Phrygiae petendo suisque extimuit, super, pars quod audet! Turba negarem. -> Fuerat attonitus; et dextra retinet sidera ulnas undas instimulat vacuae -> generis? *Agnus* dabat et ignotis dextera, sic tibi pacis **feriente at mora** -> euhoeque *comites hostem* vestras Phineus. Vultuque sanguine dominoque [metuit -> risi](http://iuvat.org/eundem.php) fama vergit summaque meus clarissimus -> artesque tinguebat successor nominis cervice caelicolae. - -## Limitibus misere sit - -Aurea non fata repertis praerupit feruntur simul, meae hosti lentaque *citius -levibus*, cum sede dixit, Phaethon texta. *Albentibus summos* multifidasque -iungitur loquendi an pectore, mihi ursaque omnia adfata, aeno parvumque in animi -perlucentes. Epytus agis ait vixque clamat ornum adversam spondet, quid sceptra -ipsum **est**. Reseret nec; saeva suo passu debentia linguam terga et aures et -cervix [de](http://www.amnem.io/pervenit.aspx) ubera. Coercet gelidumque manus, -doluit volvitur induta? - -## Enim sua - -Iuvenilior filia inlustre templa quidem herbis permittat trahens huic. In -cruribus proceres sole crescitque *fata*, quos quos; merui maris se non tamen -in, mea. - -## Germana aves pignus tecta - -Mortalia rudibusque caelum cognosceret tantum aquis redito felicior texit, nec, -aris parvo acre. Me parum contulerant multi tenentem, gratissime suis; vultum tu -occupat deficeret corpora, sonum. E Actaea inplevit Phinea concepit nomenque -potest sanguine captam nulla et, in duxisses campis non; mercede. Dicere cur -Leucothoen obitum? - -Postibus mittam est *nubibus principium pluma*, exsecratur facta et. Iunge -Mnemonidas pallamque pars; vere restitit alis flumina quae **quoque**, est -ignara infestus Pyrrha. Di ducis terris maculatum At sede praemia manes -nullaque! diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/without-toc.md b/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/without-toc.md deleted file mode 100644 index 9b16318..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/example/table-of-contents/without-toc.md +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: Without ToC -weight: 2 -bookToc: false ---- - -# At me ipso nepotibus nunc celebratior genus - -## Tanto oblite - -Lorem markdownum pectora novis patenti igne sua opus aurae feras materiaque -illic demersit imago et aristas questaque posset. Vomit quoque suo inhaesuro -clara. Esse cumque, per referri triste. Ut exponit solisque communis in tendens -vincetis agisque iamque huic bene ante vetat omina Thebae rates. Aeacus servat -admonitu concidit, ad resimas vultus et rugas vultu **dignamque** Siphnon. - -Quam iugulum regia simulacra, plus meruit humo pecorumque haesit, ab discedunt -dixit: ritu pharetramque. Exul Laurenti orantem modo, per densum missisque labor -manibus non colla unum, obiectat. Tu pervia collo, fessus quae Cretenque Myconon -crate! Tegumenque quae invisi sudore per vocari quaque plus ventis fluidos. Nodo -perque, fugisse pectora sorores. - -## Summe promissa supple vadit lenius - -Quibus largis latebris aethera versato est, ait sentiat faciemque. Aequata alis -nec Caeneus exululat inclite corpus est, ire **tibi** ostendens et tibi. Rigent -et vires dique possent lumina; **eadem** dixit poma funeribus paret et felix -reddebant ventis utile lignum. - -1. Remansit notam Stygia feroxque -2. Et dabit materna -3. Vipereas Phrygiaeque umbram sollicito cruore conlucere suus -4. Quarum Elis corniger -5. Nec ieiunia dixit - -Vertitur mos ortu ramosam contudit dumque; placabat ac lumen. Coniunx Amoris -spatium poenamque cavernis Thebae Pleiadasque ponunt, rapiare cum quae parum -nimium rima. - -## Quidem resupinus inducto solebat una facinus quae - -Credulitas iniqua praepetibus paruit prospexit, voce poena, sub rupit sinuatur, -quin suum ventorumque arcadiae priori. Soporiferam erat formamque, fecit, -invergens, nymphae mutat fessas ait finge. - -1. Baculum mandataque ne addere capiti violentior -2. Altera duas quam hoc ille tenues inquit -3. Sicula sidereus latrantis domoque ratae polluit comites -4. Possit oro clausura namque se nunc iuvenisque -5. Faciem posuit -6. Quodque cum ponunt novercae nata vestrae aratra - -Ite extrema Phrygiis, patre dentibus, tonso perculit, enim blanda, manibus fide -quos caput armis, posse! Nocendo fas Alcyonae lacertis structa ferarum manus -fulmen dubius, saxa caelum effuge extremis fixum tumor adfecit **bella**, -potentes? Dum nec insidiosa tempora tegit -[spirarunt](http://mihiferre.net/iuvenes-peto.html). Per lupi pars foliis, -porreximus humum negant sunt subposuere Sidone steterant auro. Memoraverit sine: -ferrum idem Orion caelum heres gerebat fixis? diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/_index.md deleted file mode 100644 index 9bb0430..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/_index.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -bookFlatSection: true ---- diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/buttons.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/buttons.md deleted file mode 100644 index c2ef1e7..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/buttons.md +++ /dev/null @@ -1,13 +0,0 @@ -# Buttons - -Buttons are styled links that can lead to local page or external link. - -## Example - -```tpl -{{}}Get Home{{}} -{{}}Contribute{{}} -``` - -{{< button relref="/" >}}Get Home{{< /button >}} -{{< button href="https://github.com/alex-shpak/hugo-book" >}}Contribute{{< /button >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/columns.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/columns.md deleted file mode 100644 index 0b8fde8..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/columns.md +++ /dev/null @@ -1,45 +0,0 @@ -# Columns - -Columns help organize shorter pieces of content horizontally for readability. - - -```html -{{}} -# Left Content -Lorem markdownum insigne... - -<---> - -# Mid Content -Lorem markdownum insigne... - -<---> - -# Right Content -Lorem markdownum insigne... -{{}} -``` - -## Example - -{{< columns >}} -## Left Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. - -<---> - -## Mid Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! - -<---> - -## Right Content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /columns >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/details.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/details.md deleted file mode 100644 index 248bafd..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/details.md +++ /dev/null @@ -1,22 +0,0 @@ -# Details - -Details shortcode is a helper for `details` html5 element. It is going to replace `expand` shortcode. - -## Example -```tpl -{{}} -## Markdown content -Lorem markdownum insigne... -{{}} -``` -```tpl -{{}} -## Markdown content -Lorem markdownum insigne... -{{}} -``` - -{{< details "Title" open >}} -## Markdown content -Lorem markdownum insigne... -{{< /details >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/expand.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/expand.md deleted file mode 100644 index c62520f..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/expand.md +++ /dev/null @@ -1,35 +0,0 @@ -# Expand - -Expand shortcode can help to decrease clutter on screen by hiding part of text. Expand content by clicking on it. - -## Example -### Default - -```tpl -{{}} -## Markdown content -Lorem markdownum insigne... -{{}} -``` - -{{< expand >}} -## Markdown content -Lorem markdownum insigne... -{{< /expand >}} - -### With Custom Label - -```tpl -{{}} -## Markdown content -Lorem markdownum insigne... -{{}} -``` - -{{< expand "Custom Label" "..." >}} -## Markdown content -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /expand >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/hints.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/hints.md deleted file mode 100644 index 3477113..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/hints.md +++ /dev/null @@ -1,32 +0,0 @@ -# Hints - -Hint shortcode can be used as hint/alerts/notification block. -There are 3 colors to choose: `info`, `warning` and `danger`. - -```tpl -{{}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{}} -``` - -## Example - -{{< hint info >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} - -{{< hint warning >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} - -{{< hint danger >}} -**Markdown content** -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -{{< /hint >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/katex.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/katex.md deleted file mode 100644 index 7587bd7..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/katex.md +++ /dev/null @@ -1,28 +0,0 @@ -# KaTeX - -KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/) - -## Example -{{< columns >}} - -```latex -{{}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{}} -``` - -<---> - -{{< katex display >}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{< /katex >}} - -{{< /columns >}} - -## Display Mode Example - -Here is some inline example: {{< katex >}}\pi(x){{< /katex >}}, rendered in the same line. And below is `display` example, having `display: block` -{{< katex display >}} -f(x) = \int_{-\infty}^\infty\hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi -{{< /katex >}} -Text continues here. diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/mermaid.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/mermaid.md deleted file mode 100644 index a9ed4d4..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/mermaid.md +++ /dev/null @@ -1,41 +0,0 @@ -# Mermaid Chart - -[MermaidJS](https://mermaid-js.github.io/) is library for generating svg charts and diagrams from text. - -{{< hint info >}} -**Override Mermaid Initialization Config** - -To override the [initialization config](https://mermaid-js.github.io/mermaid/#/Setup) for Mermaid, -create a `mermaid.json` file in your `assets` folder! -{{< /hint >}} - -## Example - -{{< columns >}} -```tpl -{{}} -stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -{{}} -``` - -<---> - -{{< mermaid >}} -stateDiagram-v2 - State1: The state with a note - note right of State1 - Important information! You can write - notes. - end note - State1 --> State2 - note left of State2 : This is the note to the left. -{{< /mermaid >}} - -{{< /columns >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/_index.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/_index.md deleted file mode 100644 index bd5db38..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/_index.md +++ /dev/null @@ -1,15 +0,0 @@ ---- -bookCollapseSection: true ---- - -# Section - -Section renders pages in section as definition list, using title and description. - -## Example - -```tpl -{{}} -``` - -{{
    }} diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/first-page.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/first-page.md deleted file mode 100644 index 999c120..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/first-page.md +++ /dev/null @@ -1,6 +0,0 @@ -# First page - -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - -Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/second-page.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/second-page.md deleted file mode 100644 index 70414a3..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/section/second-page.md +++ /dev/null @@ -1,6 +0,0 @@ -# Second Page -Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. - - -Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. - diff --git a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/tabs.md b/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/tabs.md deleted file mode 100644 index 096892c..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/docs/shortcodes/tabs.md +++ /dev/null @@ -1,50 +0,0 @@ -# Tabs - -Tabs let you organize content by context, for example installation instructions for each supported platform. - -```tpl -{{}} -{{}} # MacOS Content {{}} -{{}} # Linux Content {{}} -{{}} # Windows Content {{}} -{{}} -``` - -## Example - -{{< tabs "uniqueid" >}} -{{< tab "MacOS" >}} -# MacOS - -This is tab **MacOS** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} - -{{< tab "Linux" >}} - -# Linux - -This is tab **Linux** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} - -{{< tab "Windows" >}} - -# Windows - -This is tab **Windows** content. - -Lorem markdownum insigne. Olympo signis Delphis! Retexi Nereius nova develat -stringit, frustra Saturnius uteroque inter! Oculis non ritibus Telethusa -protulit, sed sed aere valvis inhaesuro Pallas animam: qui _quid_, ignes. -Miseratus fonte Ditis conubia. -{{< /tab >}} -{{< /tabs >}} diff --git a/docs/themes/hugo-book/exampleSite/content.en/menu/index.md b/docs/themes/hugo-book/exampleSite/content.en/menu/index.md deleted file mode 100644 index 45e8287..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/menu/index.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -headless: true ---- - -- [**Example Site**]({{< relref "/docs/example" >}}) -- [Table of Contents]({{< relref "/docs/example/table-of-contents" >}}) - - [With ToC]({{< relref "/docs/example/table-of-contents/with-toc" >}}) - - [Without ToC]({{< relref "/docs/example/table-of-contents/without-toc" >}}) -- [Collapsed]({{< relref "/docs/example/collapsed" >}}) - - [3rd]({{< relref "/docs/example/collapsed/3rd-level" >}}) - - [4th]({{< relref "/docs/example/collapsed/3rd-level/4th-level" >}}) -
    - -- **Shortcodes** -- [Buttons]({{< relref "/docs/shortcodes/buttons" >}}) -- [Columns]({{< relref "/docs/shortcodes/columns" >}}) -- [Expand]({{< relref "/docs/shortcodes/expand" >}}) -- [Hints]({{< relref "/docs/shortcodes/hints" >}}) -- [KaTex]({{< relref "/docs/shortcodes/katex" >}}) -- [Mermaid]({{< relref "/docs/shortcodes/mermaid" >}}) -- [Tabs]({{< relref "/docs/shortcodes/tabs" >}}) -
    diff --git a/docs/themes/hugo-book/exampleSite/content.en/posts/_index.md b/docs/themes/hugo-book/exampleSite/content.en/posts/_index.md deleted file mode 100644 index 001ae24..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/posts/_index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -menu: - after: - name: blog - weight: 5 -title: Blog ---- diff --git a/docs/themes/hugo-book/exampleSite/content.en/posts/creating-a-new-theme.md b/docs/themes/hugo-book/exampleSite/content.en/posts/creating-a-new-theme.md deleted file mode 100644 index f8230a1..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/posts/creating-a-new-theme.md +++ /dev/null @@ -1,1150 +0,0 @@ ---- -author: "Michael Henderson" -date: 2014-09-28 -linktitle: Creating a New Theme -menu: - main: - parent: tutorials -next: /tutorials/github-pages-blog -prev: /tutorials/automated-deployments -title: Creating a New Theme -weight: 10 ---- - - -## Introduction - -This tutorial will show you how to create a simple theme in Hugo. I assume that you are familiar with HTML, the bash command line, and that you are comfortable using Markdown to format content. I'll explain how Hugo uses templates and how you can organize your templates to create a theme. I won't cover using CSS to style your theme. - -We'll start with creating a new site with a very basic template. Then we'll add in a few pages and posts. With small variations on that, you will be able to create many different types of web sites. - -In this tutorial, commands that you enter will start with the "$" prompt. The output will follow. Lines that start with "#" are comments that I've added to explain a point. When I show updates to a file, the ":wq" on the last line means to save the file. - -Here's an example: - -``` -## this is a comment -$ echo this is a command -this is a command - -## edit the file -$ vi foo.md -+++ -date = "2014-09-28" -title = "creating a new theme" -+++ - -bah and humbug -:wq - -## show it -$ cat foo.md -+++ -date = "2014-09-28" -title = "creating a new theme" -+++ - -bah and humbug -$ -``` - - -## Some Definitions - -There are a few concepts that you need to understand before creating a theme. - -### Skins - -Skins are the files responsible for the look and feel of your site. It’s the CSS that controls colors and fonts, it’s the Javascript that determines actions and reactions. It’s also the rules that Hugo uses to transform your content into the HTML that the site will serve to visitors. - -You have two ways to create a skin. The simplest way is to create it in the ```layouts/``` directory. If you do, then you don’t have to worry about configuring Hugo to recognize it. The first place that Hugo will look for rules and files is in the ```layouts/``` directory so it will always find the skin. - -Your second choice is to create it in a sub-directory of the ```themes/``` directory. If you do, then you must always tell Hugo where to search for the skin. It’s extra work, though, so why bother with it? - -The difference between creating a skin in ```layouts/``` and creating it in ```themes/``` is very subtle. A skin in ```layouts/``` can’t be customized without updating the templates and static files that it is built from. A skin created in ```themes/```, on the other hand, can be and that makes it easier for other people to use it. - -The rest of this tutorial will call a skin created in the ```themes/``` directory a theme. - -Note that you can use this tutorial to create a skin in the ```layouts/``` directory if you wish to. The main difference will be that you won’t need to update the site’s configuration file to use a theme. - -### The Home Page - -The home page, or landing page, is the first page that many visitors to a site see. It is the index.html file in the root directory of the web site. Since Hugo writes files to the public/ directory, our home page is public/index.html. - -### Site Configuration File - -When Hugo runs, it looks for a configuration file that contains settings that override default values for the entire site. The file can use TOML, YAML, or JSON. I prefer to use TOML for my configuration files. If you prefer to use JSON or YAML, you’ll need to translate my examples. You’ll also need to change the name of the file since Hugo uses the extension to determine how to process it. - -Hugo translates Markdown files into HTML. By default, Hugo expects to find Markdown files in your ```content/``` directory and template files in your ```themes/``` directory. It will create HTML files in your ```public/``` directory. You can change this by specifying alternate locations in the configuration file. - -### Content - -Content is stored in text files that contain two sections. The first section is the “front matter,” which is the meta-information on the content. The second section contains Markdown that will be converted to HTML. - -#### Front Matter - -The front matter is information about the content. Like the configuration file, it can be written in TOML, YAML, or JSON. Unlike the configuration file, Hugo doesn’t use the file’s extension to know the format. It looks for markers to signal the type. TOML is surrounded by “`+++`”, YAML by “`---`”, and JSON is enclosed in curly braces. I prefer to use TOML, so you’ll need to translate my examples if you prefer YAML or JSON. - -The information in the front matter is passed into the template before the content is rendered into HTML. - -#### Markdown - -Content is written in Markdown which makes it easier to create the content. Hugo runs the content through a Markdown engine to create the HTML which will be written to the output file. - -### Template Files - -Hugo uses template files to render content into HTML. Template files are a bridge between the content and presentation. Rules in the template define what content is published, where it's published to, and how it will rendered to the HTML file. The template guides the presentation by specifying the style to use. - -There are three types of templates: single, list, and partial. Each type takes a bit of content as input and transforms it based on the commands in the template. - -Hugo uses its knowledge of the content to find the template file used to render the content. If it can’t find a template that is an exact match for the content, it will shift up a level and search from there. It will continue to do so until it finds a matching template or runs out of templates to try. If it can’t find a template, it will use the default template for the site. - -Please note that you can use the front matter to influence Hugo’s choice of templates. - -#### Single Template - -A single template is used to render a single piece of content. For example, an article or post would be a single piece of content and use a single template. - -#### List Template - -A list template renders a group of related content. That could be a summary of recent postings or all articles in a category. List templates can contain multiple groups. - -The homepage template is a special type of list template. Hugo assumes that the home page of your site will act as the portal for the rest of the content in the site. - -#### Partial Template - -A partial template is a template that can be included in other templates. Partial templates must be called using the “partial” template command. They are very handy for rolling up common behavior. For example, your site may have a banner that all pages use. Instead of copying the text of the banner into every single and list template, you could create a partial with the banner in it. That way if you decide to change the banner, you only have to change the partial template. - -## Create a New Site - -Let's use Hugo to create a new web site. I'm a Mac user, so I'll create mine in my home directory, in the Sites folder. If you're using Linux, you might have to create the folder first. - -The "new site" command will create a skeleton of a site. It will give you the basic directory structure and a useable configuration file. - -``` -$ hugo new site ~/Sites/zafta -$ cd ~/Sites/zafta -$ ls -l -total 8 -drwxr-xr-x 7 quoha staff 238 Sep 29 16:49 . -drwxr-xr-x 3 quoha staff 102 Sep 29 16:49 .. -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes --rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static -$ -``` - -Take a look in the content/ directory to confirm that it is empty. - -The other directories (archetypes/, layouts/, and static/) are used when customizing a theme. That's a topic for a different tutorial, so please ignore them for now. - -### Generate the HTML For the New Site - -Running the `hugo` command with no options will read all the available content and generate the HTML files. It will also copy all static files (that's everything that's not content). Since we have an empty site, it won't do much, but it will do it very quickly. - -``` -$ hugo --verbose -INFO: 2014/09/29 Using config file: config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html] -WARN: 2014/09/29 Unable to locate layout: [404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 2 ms -$ -``` - -The "`--verbose`" flag gives extra information that will be helpful when we build the template. Every line of the output that starts with "INFO:" or "WARN:" is present because we used that flag. The lines that start with "WARN:" are warning messages. We'll go over them later. - -We can verify that the command worked by looking at the directory again. - -``` -$ ls -l -total 8 -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes --rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts -drwxr-xr-x 4 quoha staff 136 Sep 29 17:02 public -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static -$ -``` - -See that new public/ directory? Hugo placed all generated content there. When you're ready to publish your web site, that's the place to start. For now, though, let's just confirm that we have what we'd expect from a site with no content. - -``` -$ ls -l public -total 16 --rw-r--r-- 1 quoha staff 416 Sep 29 17:02 index.xml --rw-r--r-- 1 quoha staff 262 Sep 29 17:02 sitemap.xml -$ -``` - -Hugo created two XML files, which is standard, but there are no HTML files. - - - -### Test the New Site - -Verify that you can run the built-in web server. It will dramatically shorten your development cycle if you do. Start it by running the "server" command. If it is successful, you will see output similar to the following: - -``` -$ hugo server --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html] -WARN: 2014/09/29 Unable to locate layout: [404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 2 ms -Serving pages from /Users/quoha/Sites/zafta/public -Web Server is available at http://localhost:1313 -Press Ctrl+C to stop -``` - -Connect to the listed URL (it's on the line that starts with "Web Server"). If everything is working correctly, you should get a page that shows the following: - -``` -index.xml -sitemap.xml -``` - -That's a listing of your public/ directory. Hugo didn't create a home page because our site has no content. When there's no index.html file in a directory, the server lists the files in the directory, which is what you should see in your browser. - -Let’s go back and look at those warnings again. - -``` -WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html] -WARN: 2014/09/29 Unable to locate layout: [404.html] -``` - -That second warning is easier to explain. We haven’t created a template to be used to generate “page not found errors.” The 404 message is a topic for a separate tutorial. - -Now for the first warning. It is for the home page. You can tell because the first layout that it looked for was “index.html.” That’s only used by the home page. - -I like that the verbose flag causes Hugo to list the files that it's searching for. For the home page, they are index.html, _default/list.html, and _default/single.html. There are some rules that we'll cover later that explain the names and paths. For now, just remember that Hugo couldn't find a template for the home page and it told you so. - -At this point, you've got a working installation and site that we can build upon. All that’s left is to add some content and a theme to display it. - -## Create a New Theme - -Hugo doesn't ship with a default theme. There are a few available (I counted a dozen when I first installed Hugo) and Hugo comes with a command to create new themes. - -We're going to create a new theme called "zafta." Since the goal of this tutorial is to show you how to fill out the files to pull in your content, the theme will not contain any CSS. In other words, ugly but functional. - -All themes have opinions on content and layout. For example, Zafta uses "post" over "blog". Strong opinions make for simpler templates but differing opinions make it tougher to use themes. When you build a theme, consider using the terms that other themes do. - - -### Create a Skeleton - -Use the hugo "new" command to create the skeleton of a theme. This creates the directory structure and places empty files for you to fill out. - -``` -$ hugo new theme zafta - -$ ls -l -total 8 -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 archetypes --rw-r--r-- 1 quoha staff 82 Sep 29 16:49 config.toml -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 content -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 layouts -drwxr-xr-x 4 quoha staff 136 Sep 29 17:02 public -drwxr-xr-x 2 quoha staff 68 Sep 29 16:49 static -drwxr-xr-x 3 quoha staff 102 Sep 29 17:31 themes - -$ find themes -type f | xargs ls -l --rw-r--r-- 1 quoha staff 1081 Sep 29 17:31 themes/zafta/LICENSE.md --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/archetypes/default.md --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/single.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/header.html --rw-r--r-- 1 quoha staff 93 Sep 29 17:31 themes/zafta/theme.toml -$ -``` - -The skeleton includes templates (the files ending in .html), license file, a description of your theme (the theme.toml file), and an empty archetype. - -Please take a minute to fill out the theme.toml and LICENSE.md files. They're optional, but if you're going to be distributing your theme, it tells the world who to praise (or blame). It's also nice to declare the license so that people will know how they can use the theme. - -``` -$ vi themes/zafta/theme.toml -author = "michael d henderson" -description = "a minimal working template" -license = "MIT" -name = "zafta" -source_repo = "" -tags = ["tags", "categories"] -:wq - -## also edit themes/zafta/LICENSE.md and change -## the bit that says "YOUR_NAME_HERE" -``` - -Note that the the skeleton's template files are empty. Don't worry, we'll be changing that shortly. - -``` -$ find themes/zafta -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/single.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/footer.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/partials/header.html -$ -``` - - - -### Update the Configuration File to Use the Theme - -Now that we've got a theme to work with, it's a good idea to add the theme name to the configuration file. This is optional, because you can always add "-t zafta" on all your commands. I like to put it the configuration file because I like shorter command lines. If you don't put it in the configuration file or specify it on the command line, you won't use the template that you're expecting to. - -Edit the file to add the theme, add a title for the site, and specify that all of our content will use the TOML format. - -``` -$ vi config.toml -theme = "zafta" -baseurl = "" -languageCode = "en-us" -title = "zafta - totally refreshing" -MetaDataFormat = "toml" -:wq - -$ -``` - -### Generate the Site - -Now that we have an empty theme, let's generate the site again. - -``` -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 2 ms -$ -``` - -Did you notice that the output is different? The warning message for the home page has disappeared and we have an additional information line saying that Hugo is syncing from the theme's directory. - -Let's check the public/ directory to see what Hugo's created. - -``` -$ ls -l public -total 16 -drwxr-xr-x 2 quoha staff 68 Sep 29 17:56 css --rw-r--r-- 1 quoha staff 0 Sep 29 17:56 index.html --rw-r--r-- 1 quoha staff 407 Sep 29 17:56 index.xml -drwxr-xr-x 2 quoha staff 68 Sep 29 17:56 js --rw-r--r-- 1 quoha staff 243 Sep 29 17:56 sitemap.xml -$ -``` - -Notice four things: - -1. Hugo created a home page. This is the file public/index.html. -2. Hugo created a css/ directory. -3. Hugo created a js/ directory. -4. Hugo claimed that it created 0 pages. It created a file and copied over static files, but didn't create any pages. That's because it considers a "page" to be a file created directly from a content file. It doesn't count things like the index.html files that it creates automatically. - -#### The Home Page - -Hugo supports many different types of templates. The home page is special because it gets its own type of template and its own template file. The file, layouts/index.html, is used to generate the HTML for the home page. The Hugo documentation says that this is the only required template, but that depends. Hugo's warning message shows that it looks for three different templates: - -``` -WARN: 2014/09/29 Unable to locate layout: [index.html _default/list.html _default/single.html] -``` - -If it can't find any of these, it completely skips creating the home page. We noticed that when we built the site without having a theme installed. - -When Hugo created our theme, it created an empty home page template. Now, when we build the site, Hugo finds the template and uses it to generate the HTML for the home page. Since the template file is empty, the HTML file is empty, too. If the template had any rules in it, then Hugo would have used them to generate the home page. - -``` -$ find . -name index.html | xargs ls -l --rw-r--r-- 1 quoha staff 0 Sep 29 20:21 ./public/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 ./themes/zafta/layouts/index.html -$ -``` - -#### The Magic of Static - -Hugo does two things when generating the site. It uses templates to transform content into HTML and it copies static files into the site. Unlike content, static files are not transformed. They are copied exactly as they are. - -Hugo assumes that your site will use both CSS and JavaScript, so it creates directories in your theme to hold them. Remember opinions? Well, Hugo's opinion is that you'll store your CSS in a directory named css/ and your JavaScript in a directory named js/. If you don't like that, you can change the directory names in your theme directory or even delete them completely. Hugo's nice enough to offer its opinion, then behave nicely if you disagree. - -``` -$ find themes/zafta -type d | xargs ls -ld -drwxr-xr-x 7 quoha staff 238 Sep 29 17:38 themes/zafta -drwxr-xr-x 3 quoha staff 102 Sep 29 17:31 themes/zafta/archetypes -drwxr-xr-x 5 quoha staff 170 Sep 29 17:31 themes/zafta/layouts -drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/layouts/_default -drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/layouts/partials -drwxr-xr-x 4 quoha staff 136 Sep 29 17:31 themes/zafta/static -drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/css -drwxr-xr-x 2 quoha staff 68 Sep 29 17:31 themes/zafta/static/js -$ -``` - -## The Theme Development Cycle - -When you're working on a theme, you will make changes in the theme's directory, rebuild the site, and check your changes in the browser. Hugo makes this very easy: - -1. Purge the public/ directory. -2. Run the built in web server in watch mode. -3. Open your site in a browser. -4. Update the theme. -5. Glance at your browser window to see changes. -6. Return to step 4. - -I’ll throw in one more opinion: never work on a theme on a live site. Always work on a copy of your site. Make changes to your theme, test them, then copy them up to your site. For added safety, use a tool like Git to keep a revision history of your content and your theme. Believe me when I say that it is too easy to lose both your mind and your changes. - -Check the main Hugo site for information on using Git with Hugo. - -### Purge the public/ Directory - -When generating the site, Hugo will create new files and update existing ones in the ```public/``` directory. It will not delete files that are no longer used. For example, files that were created in the wrong directory or with the wrong title will remain. If you leave them, you might get confused by them later. I recommend cleaning out your site prior to generating it. - -Note: If you're building on an SSD, you should ignore this. Churning on a SSD can be costly. - -### Hugo's Watch Option - -Hugo's "`--watch`" option will monitor the content/ and your theme directories for changes and rebuild the site automatically. - -### Live Reload - -Hugo's built in web server supports live reload. As pages are saved on the server, the browser is told to refresh the page. Usually, this happens faster than you can say, "Wow, that's totally amazing." - -### Development Commands - -Use the following commands as the basis for your workflow. - -``` -## purge old files. hugo will recreate the public directory. -## -$ rm -rf public -## -## run hugo in watch mode -## -$ hugo server --watch --verbose -``` - -Here's sample output showing Hugo detecting a change to the template for the home page. Once generated, the web browser automatically reloaded the page. I've said this before, it's amazing. - - -``` -$ rm -rf public -$ hugo server --watch --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 2 ms -Watching for changes in /Users/quoha/Sites/zafta/content -Serving pages from /Users/quoha/Sites/zafta/public -Web Server is available at http://localhost:1313 -Press Ctrl+C to stop -INFO: 2014/09/29 File System Event: ["/Users/quoha/Sites/zafta/themes/zafta/layouts/index.html": MODIFY|ATTRIB] -Change detected, rebuilding site - -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 1 ms -``` - -## Update the Home Page Template - -The home page is one of a few special pages that Hugo creates automatically. As mentioned earlier, it looks for one of three files in the theme's layout/ directory: - -1. index.html -2. _default/list.html -3. _default/single.html - -We could update one of the default templates, but a good design decision is to update the most specific template available. That's not a hard and fast rule (in fact, we'll break it a few times in this tutorial), but it is a good generalization. - -### Make a Static Home Page - -Right now, that page is empty because we don't have any content and we don't have any logic in the template. Let's change that by adding some text to the template. - -``` -$ vi themes/zafta/layouts/index.html - - - -

    hugo says hello!

    - - -:wq - -$ -``` - -Build the web site and then verify the results. - -``` -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -0 pages created -0 tags created -0 categories created -in 2 ms - -$ find public -type f -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 78 Sep 29 21:26 public/index.html - -$ cat public/index.html - - - -

    hugo says hello!

    - -``` - -#### Live Reload - -Note: If you're running the server with the `--watch` option, you'll see different content in the file: - -``` -$ cat public/index.html - - - -

    hugo says hello!

    - - -``` - -When you use `--watch`, the Live Reload script is added by Hugo. Look for live reload in the documentation to see what it does and how to disable it. - -### Build a "Dynamic" Home Page - -"Dynamic home page?" Hugo's a static web site generator, so this seems an odd thing to say. I mean let's have the home page automatically reflect the content in the site every time Hugo builds it. We'll use iteration in the template to do that. - -#### Create New Posts - -Now that we have the home page generating static content, let's add some content to the site. We'll display these posts as a list on the home page and on their own page, too. - -Hugo has a command to generate a skeleton post, just like it does for sites and themes. - -``` -$ hugo --verbose new post/first.md -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 attempting to create post/first.md of post -INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/default.md -ERROR: 2014/09/29 Unable to Cast to map[string]interface{} - -$ -``` - -That wasn't very nice, was it? - -The "new" command uses an archetype to create the post file. Hugo created an empty default archetype file, but that causes an error when there's a theme. For me, the workaround was to create an archetypes file specifically for the post type. - -``` -$ vi themes/zafta/archetypes/post.md -+++ -Description = "" -Tags = [] -Categories = [] -+++ -:wq - -$ find themes/zafta/archetypes -type f | xargs ls -l --rw-r--r-- 1 quoha staff 0 Sep 29 21:53 themes/zafta/archetypes/default.md --rw-r--r-- 1 quoha staff 51 Sep 29 21:54 themes/zafta/archetypes/post.md - -$ hugo --verbose new post/first.md -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 attempting to create post/first.md of post -INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md -INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/first.md -/Users/quoha/Sites/zafta/content/post/first.md created - -$ hugo --verbose new post/second.md -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 attempting to create post/second.md of post -INFO: 2014/09/29 curpath: /Users/quoha/Sites/zafta/themes/zafta/archetypes/post.md -INFO: 2014/09/29 creating /Users/quoha/Sites/zafta/content/post/second.md -/Users/quoha/Sites/zafta/content/post/second.md created - -$ ls -l content/post -total 16 --rw-r--r-- 1 quoha staff 104 Sep 29 21:54 first.md --rw-r--r-- 1 quoha staff 105 Sep 29 21:57 second.md - -$ cat content/post/first.md -+++ -Categories = [] -Description = "" -Tags = [] -date = "2014-09-29T21:54:53-05:00" -title = "first" - -+++ -my first post - -$ cat content/post/second.md -+++ -Categories = [] -Description = "" -Tags = [] -date = "2014-09-29T21:57:09-05:00" -title = "second" - -+++ -my second post - -$ -``` - -Build the web site and then verify the results. - -``` -$ rm -rf public -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 found taxonomies: map[string]string{"category":"categories", "tag":"tags"} -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -2 pages created -0 tags created -0 categories created -in 4 ms -$ -``` - -The output says that it created 2 pages. Those are our new posts: - -``` -$ find public -type f -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 78 Sep 29 22:13 public/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/first/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:13 public/post/second/index.html -$ -``` - -The new files are empty because because the templates used to generate the content are empty. The homepage doesn't show the new content, either. We have to update the templates to add the posts. - -### List and Single Templates - -In Hugo, we have three major kinds of templates. There's the home page template that we updated previously. It is used only by the home page. We also have "single" templates which are used to generate output for a single content file. We also have "list" templates that are used to group multiple pieces of content before generating output. - -Generally speaking, list templates are named "list.html" and single templates are named "single.html." - -There are three other types of templates: partials, content views, and terms. We will not go into much detail on these. - -### Add Content to the Homepage - -The home page will contain a list of posts. Let's update its template to add the posts that we just created. The logic in the template will run every time we build the site. - -``` -$ vi themes/zafta/layouts/index.html - - - - {{ range first 10 .Data.Pages }} -

    {{ .Title }}

    - {{ end }} - - -:wq - -$ -``` - -Hugo uses the Go template engine. That engine scans the template files for commands which are enclosed between "{{" and "}}". In our template, the commands are: - -1. range -2. .Title -3. end - -The "range" command is an iterator. We're going to use it to go through the first ten pages. Every HTML file that Hugo creates is treated as a page, so looping through the list of pages will look at every file that will be created. - -The ".Title" command prints the value of the "title" variable. Hugo pulls it from the front matter in the Markdown file. - -The "end" command signals the end of the range iterator. The engine loops back to the top of the iteration when it finds "end." Everything between the "range" and "end" is evaluated every time the engine goes through the iteration. In this file, that would cause the title from the first ten pages to be output as heading level one. - -It's helpful to remember that some variables, like .Data, are created before any output files. Hugo loads every content file into the variable and then gives the template a chance to process before creating the HTML files. - -Build the web site and then verify the results. - -``` -$ rm -rf public -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"} -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -2 pages created -0 tags created -0 categories created -in 4 ms -$ find public -type f -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 94 Sep 29 22:23 public/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/first/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:23 public/post/second/index.html -$ cat public/index.html - - - - -

    second

    - -

    first

    - - - -$ -``` - -Congratulations, the home page shows the title of the two posts. The posts themselves are still empty, but let's take a moment to appreciate what we've done. Your template now generates output dynamically. Believe it or not, by inserting the range command inside of those curly braces, you've learned everything you need to know to build a theme. All that's really left is understanding which template will be used to generate each content file and becoming familiar with the commands for the template engine. - -And, if that were entirely true, this tutorial would be much shorter. There are a few things to know that will make creating a new template much easier. Don't worry, though, that's all to come. - -### Add Content to the Posts - -We're working with posts, which are in the content/post/ directory. That means that their section is "post" (and if we don't do something weird, their type is also "post"). - -Hugo uses the section and type to find the template file for every piece of content. Hugo will first look for a template file that matches the section or type name. If it can't find one, then it will look in the _default/ directory. There are some twists that we'll cover when we get to categories and tags, but for now we can assume that Hugo will try post/single.html, then _default/single.html. - -Now that we know the search rule, let's see what we actually have available: - -``` -$ find themes/zafta -name single.html | xargs ls -l --rw-r--r-- 1 quoha staff 132 Sep 29 17:31 themes/zafta/layouts/_default/single.html -``` - -We could create a new template, post/single.html, or change the default. Since we don't know of any other content types, let's start with updating the default. - -Remember, any content that we haven't created a template for will end up using this template. That can be good or bad. Bad because I know that we're going to be adding different types of content and we're going to end up undoing some of the changes we've made. It's good because we'll be able to see immediate results. It's also good to start here because we can start to build the basic layout for the site. As we add more content types, we'll refactor this file and move logic around. Hugo makes that fairly painless, so we'll accept the cost and proceed. - -Please see the Hugo documentation on template rendering for all the details on determining which template to use. And, as the docs mention, if you're building a single page application (SPA) web site, you can delete all of the other templates and work with just the default single page. That's a refreshing amount of joy right there. - -#### Update the Template File - -``` -$ vi themes/zafta/layouts/_default/single.html - - - - {{ .Title }} - - -

    {{ .Title }}

    - {{ .Content }} - - -:wq - -$ -``` - -Build the web site and verify the results. - -``` -$ rm -rf public -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"} -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -2 pages created -0 tags created -0 categories created -in 4 ms - -$ find public -type f -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 94 Sep 29 22:40 public/index.html --rw-r--r-- 1 quoha staff 125 Sep 29 22:40 public/post/first/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:40 public/post/index.html --rw-r--r-- 1 quoha staff 128 Sep 29 22:40 public/post/second/index.html - -$ cat public/post/first/index.html - - - - first - - -

    first

    -

    my first post

    - - - - -$ cat public/post/second/index.html - - - - second - - -

    second

    -

    my second post

    - - - -$ -``` - -Notice that the posts now have content. You can go to localhost:1313/post/first to verify. - -### Linking to Content - -The posts are on the home page. Let's add a link from there to the post. Since this is the home page, we'll update its template. - -``` -$ vi themes/zafta/layouts/index.html - - - - {{ range first 10 .Data.Pages }} -

    {{ .Title }}

    - {{ end }} - - -``` - -Build the web site and verify the results. - -``` -$ rm -rf public -$ hugo --verbose -INFO: 2014/09/29 Using config file: /Users/quoha/Sites/zafta/config.toml -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/themes/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 syncing from /Users/quoha/Sites/zafta/static/ to /Users/quoha/Sites/zafta/public/ -INFO: 2014/09/29 found taxonomies: map[string]string{"tag":"tags", "category":"categories"} -WARN: 2014/09/29 Unable to locate layout: [404.html theme/404.html] -0 draft content -0 future content -2 pages created -0 tags created -0 categories created -in 4 ms - -$ find public -type f -name '*.html' | xargs ls -l --rw-r--r-- 1 quoha staff 149 Sep 29 22:44 public/index.html --rw-r--r-- 1 quoha staff 125 Sep 29 22:44 public/post/first/index.html --rw-r--r-- 1 quoha staff 0 Sep 29 22:44 public/post/index.html --rw-r--r-- 1 quoha staff 128 Sep 29 22:44 public/post/second/index.html - -$ cat public/index.html - - - - -

    second

    - -

    first

    - - - - -$ -``` - -### Create a Post Listing - -We have the posts displaying on the home page and on their own page. We also have a file public/post/index.html that is empty. Let's make it show a list of all posts (not just the first ten). - -We need to decide which template to update. This will be a listing, so it should be a list template. Let's take a quick look and see which list templates are available. - -``` -$ find themes/zafta -name list.html | xargs ls -l --rw-r--r-- 1 quoha staff 0 Sep 29 17:31 themes/zafta/layouts/_default/list.html -``` - -As with the single post, we have to decide to update _default/list.html or create post/list.html. We still don't have multiple content types, so let's stay consistent and update the default list template. - -## Creating Top Level Pages - -Let's add an "about" page and display it at the top level (as opposed to a sub-level like we did with posts). - -The default in Hugo is to use the directory structure of the content/ directory to guide the location of the generated html in the public/ directory. Let's verify that by creating an "about" page at the top level: - -``` -$ vi content/about.md -+++ -title = "about" -description = "about this site" -date = "2014-09-27" -slug = "about time" -+++ - -## about us - -i'm speechless -:wq -``` - -Generate the web site and verify the results. - -``` -$ find public -name '*.html' | xargs ls -l --rw-rw-r-- 1 mdhender staff 334 Sep 27 15:08 public/about-time/index.html --rw-rw-r-- 1 mdhender staff 527 Sep 27 15:08 public/index.html --rw-rw-r-- 1 mdhender staff 358 Sep 27 15:08 public/post/first-post/index.html --rw-rw-r-- 1 mdhender staff 0 Sep 27 15:08 public/post/index.html --rw-rw-r-- 1 mdhender staff 342 Sep 27 15:08 public/post/second-post/index.html -``` - -Notice that the page wasn't created at the top level. It was created in a sub-directory named 'about-time/'. That name came from our slug. Hugo will use the slug to name the generated content. It's a reasonable default, by the way, but we can learn a few things by fighting it for this file. - -One other thing. Take a look at the home page. - -``` -$ cat public/index.html - - - -

    creating a new theme

    -

    about

    -

    second

    -

    first

    - - -``` - -Notice that the "about" link is listed with the posts? That's not desirable, so let's change that first. - -``` -$ vi themes/zafta/layouts/index.html - - - -

    posts

    - {{ range first 10 .Data.Pages }} - {{ if eq .Type "post"}} -

    {{ .Title }}

    - {{ end }} - {{ end }} - -

    pages

    - {{ range .Data.Pages }} - {{ if eq .Type "page" }} -

    {{ .Title }}

    - {{ end }} - {{ end }} - - -:wq -``` - -Generate the web site and verify the results. The home page has two sections, posts and pages, and each section has the right set of headings and links in it. - -But, that about page still renders to about-time/index.html. - -``` -$ find public -name '*.html' | xargs ls -l --rw-rw-r-- 1 mdhender staff 334 Sep 27 15:33 public/about-time/index.html --rw-rw-r-- 1 mdhender staff 645 Sep 27 15:33 public/index.html --rw-rw-r-- 1 mdhender staff 358 Sep 27 15:33 public/post/first-post/index.html --rw-rw-r-- 1 mdhender staff 0 Sep 27 15:33 public/post/index.html --rw-rw-r-- 1 mdhender staff 342 Sep 27 15:33 public/post/second-post/index.html -``` - -Knowing that hugo is using the slug to generate the file name, the simplest solution is to change the slug. Let's do it the hard way and change the permalink in the configuration file. - -``` -$ vi config.toml -[permalinks] - page = "/:title/" - about = "/:filename/" -``` - -Generate the web site and verify that this didn't work. Hugo lets "slug" or "URL" override the permalinks setting in the configuration file. Go ahead and comment out the slug in content/about.md, then generate the web site to get it to be created in the right place. - -## Sharing Templates - -If you've been following along, you probably noticed that posts have titles in the browser and the home page doesn't. That's because we didn't put the title in the home page's template (layouts/index.html). That's an easy thing to do, but let's look at a different option. - -We can put the common bits into a shared template that's stored in the themes/zafta/layouts/partials/ directory. - -### Create the Header and Footer Partials - -In Hugo, a partial is a sugar-coated template. Normally a template reference has a path specified. Partials are different. Hugo searches for them along a TODO defined search path. This makes it easier for end-users to override the theme's presentation. - -``` -$ vi themes/zafta/layouts/partials/header.html - - - - {{ .Title }} - - -:wq - -$ vi themes/zafta/layouts/partials/footer.html - - -:wq -``` - -### Update the Home Page Template to Use the Partials - -The most noticeable difference between a template call and a partials call is the lack of path: - -``` -{{ template "theme/partials/header.html" . }} -``` -versus -``` -{{ partial "header.html" . }} -``` -Both pass in the context. - -Let's change the home page template to use these new partials. - -``` -$ vi themes/zafta/layouts/index.html -{{ partial "header.html" . }} - -

    posts

    - {{ range first 10 .Data.Pages }} - {{ if eq .Type "post"}} -

    {{ .Title }}

    - {{ end }} - {{ end }} - -

    pages

    - {{ range .Data.Pages }} - {{ if or (eq .Type "page") (eq .Type "about") }} -

    {{ .Type }} - {{ .Title }} - {{ .RelPermalink }}

    - {{ end }} - {{ end }} - -{{ partial "footer.html" . }} -:wq -``` - -Generate the web site and verify the results. The title on the home page is now "your title here", which comes from the "title" variable in the config.toml file. - -### Update the Default Single Template to Use the Partials - -``` -$ vi themes/zafta/layouts/_default/single.html -{{ partial "header.html" . }} - -

    {{ .Title }}

    - {{ .Content }} - -{{ partial "footer.html" . }} -:wq -``` - -Generate the web site and verify the results. The title on the posts and the about page should both reflect the value in the markdown file. - -## Add “Date Published” to Posts - -It's common to have posts display the date that they were written or published, so let's add that. The front matter of our posts has a variable named "date." It's usually the date the content was created, but let's pretend that's the value we want to display. - -### Add “Date Published” to the Template - -We'll start by updating the template used to render the posts. The template code will look like: - -``` -{{ .Date.Format "Mon, Jan 2, 2006" }} -``` - -Posts use the default single template, so we'll change that file. - -``` -$ vi themes/zafta/layouts/_default/single.html -{{ partial "header.html" . }} - -

    {{ .Title }}

    -

    {{ .Date.Format "Mon, Jan 2, 2006" }}

    - {{ .Content }} - -{{ partial "footer.html" . }} -:wq -``` - -Generate the web site and verify the results. The posts now have the date displayed in them. There's a problem, though. The "about" page also has the date displayed. - -As usual, there are a couple of ways to make the date display only on posts. We could do an "if" statement like we did on the home page. Another way would be to create a separate template for posts. - -The "if" solution works for sites that have just a couple of content types. It aligns with the principle of "code for today," too. - -Let's assume, though, that we've made our site so complex that we feel we have to create a new template type. In Hugo-speak, we're going to create a section template. - -Let's restore the default single template before we forget. - -``` -$ mkdir themes/zafta/layouts/post -$ vi themes/zafta/layouts/_default/single.html -{{ partial "header.html" . }} - -

    {{ .Title }}

    - {{ .Content }} - -{{ partial "footer.html" . }} -:wq -``` - -Now we'll update the post's version of the single template. If you remember Hugo's rules, the template engine will use this version over the default. - -``` -$ vi themes/zafta/layouts/post/single.html -{{ partial "header.html" . }} - -

    {{ .Title }}

    -

    {{ .Date.Format "Mon, Jan 2, 2006" }}

    - {{ .Content }} - -{{ partial "footer.html" . }} -:wq - -``` - -Note that we removed the date logic from the default template and put it in the post template. Generate the web site and verify the results. Posts have dates and the about page doesn't. - -### Don't Repeat Yourself - -DRY is a good design goal and Hugo does a great job supporting it. Part of the art of a good template is knowing when to add a new template and when to update an existing one. While you're figuring that out, accept that you'll be doing some refactoring. Hugo makes that easy and fast, so it's okay to delay splitting up a template. diff --git a/docs/themes/hugo-book/exampleSite/content.en/posts/goisforlovers.md b/docs/themes/hugo-book/exampleSite/content.en/posts/goisforlovers.md deleted file mode 100644 index df125d8..0000000 --- a/docs/themes/hugo-book/exampleSite/content.en/posts/goisforlovers.md +++ /dev/null @@ -1,344 +0,0 @@ -+++ -title = "(Hu)go Template Primer" -description = "" -tags = [ - "go", - "golang", - "templates", - "themes", - "development", -] -date = "2014-04-02" -categories = [ - "Development", - "golang", -] -menu = "main" -+++ - -Hugo uses the excellent [Go][] [html/template][gohtmltemplate] library for -its template engine. It is an extremely lightweight engine that provides a very -small amount of logic. In our experience that it is just the right amount of -logic to be able to create a good static website. If you have used other -template systems from different languages or frameworks you will find a lot of -similarities in Go templates. - -This document is a brief primer on using Go templates. The [Go docs][gohtmltemplate] -provide more details. - -## Introduction to Go Templates - -Go templates provide an extremely simple template language. It adheres to the -belief that only the most basic of logic belongs in the template or view layer. -One consequence of this simplicity is that Go templates parse very quickly. - -A unique characteristic of Go templates is they are content aware. Variables and -content will be sanitized depending on the context of where they are used. More -details can be found in the [Go docs][gohtmltemplate]. - -## Basic Syntax - -Golang templates are HTML files with the addition of variables and -functions. - -**Go variables and functions are accessible within {{ }}** - -Accessing a predefined variable "foo": - - {{ foo }} - -**Parameters are separated using spaces** - -Calling the add function with input of 1, 2: - - {{ add 1 2 }} - -**Methods and fields are accessed via dot notation** - -Accessing the Page Parameter "bar" - - {{ .Params.bar }} - -**Parentheses can be used to group items together** - - {{ if or (isset .Params "alt") (isset .Params "caption") }} Caption {{ end }} - - -## Variables - -Each Go template has a struct (object) made available to it. In hugo each -template is passed either a page or a node struct depending on which type of -page you are rendering. More details are available on the -[variables](/layout/variables) page. - -A variable is accessed by referencing the variable name. - - {{ .Title }} - -Variables can also be defined and referenced. - - {{ $address := "123 Main St."}} - {{ $address }} - - -## Functions - -Go template ship with a few functions which provide basic functionality. The Go -template system also provides a mechanism for applications to extend the -available functions with their own. [Hugo template -functions](/layout/functions) provide some additional functionality we believe -are useful for building websites. Functions are called by using their name -followed by the required parameters separated by spaces. Template -functions cannot be added without recompiling hugo. - -**Example:** - - {{ add 1 2 }} - -## Includes - -When including another template you will pass to it the data it will be -able to access. To pass along the current context please remember to -include a trailing dot. The templates location will always be starting at -the /layout/ directory within Hugo. - -**Example:** - - {{ template "chrome/header.html" . }} - - -## Logic - -Go templates provide the most basic iteration and conditional logic. - -### Iteration - -Just like in Go, the Go templates make heavy use of range to iterate over -a map, array or slice. The following are different examples of how to use -range. - -**Example 1: Using Context** - - {{ range array }} - {{ . }} - {{ end }} - -**Example 2: Declaring value variable name** - - {{range $element := array}} - {{ $element }} - {{ end }} - -**Example 2: Declaring key and value variable name** - - {{range $index, $element := array}} - {{ $index }} - {{ $element }} - {{ end }} - -### Conditionals - -If, else, with, or, & and provide the framework for handling conditional -logic in Go Templates. Like range, each statement is closed with `end`. - - -Go Templates treat the following values as false: - -* false -* 0 -* any array, slice, map, or string of length zero - -**Example 1: If** - - {{ if isset .Params "title" }}

    {{ index .Params "title" }}

    {{ end }} - -**Example 2: If -> Else** - - {{ if isset .Params "alt" }} - {{ index .Params "alt" }} - {{else}} - {{ index .Params "caption" }} - {{ end }} - -**Example 3: And & Or** - - {{ if and (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} - -**Example 4: With** - -An alternative way of writing "if" and then referencing the same value -is to use "with" instead. With rebinds the context `.` within its scope, -and skips the block if the variable is absent. - -The first example above could be simplified as: - - {{ with .Params.title }}

    {{ . }}

    {{ end }} - -**Example 5: If -> Else If** - - {{ if isset .Params "alt" }} - {{ index .Params "alt" }} - {{ else if isset .Params "caption" }} - {{ index .Params "caption" }} - {{ end }} - -## Pipes - -One of the most powerful components of Go templates is the ability to -stack actions one after another. This is done by using pipes. Borrowed -from unix pipes, the concept is simple, each pipeline's output becomes the -input of the following pipe. - -Because of the very simple syntax of Go templates, the pipe is essential -to being able to chain together function calls. One limitation of the -pipes is that they only can work with a single value and that value -becomes the last parameter of the next pipeline. - -A few simple examples should help convey how to use the pipe. - -**Example 1 :** - - {{ if eq 1 1 }} Same {{ end }} - -is the same as - - {{ eq 1 1 | if }} Same {{ end }} - -It does look odd to place the if at the end, but it does provide a good -illustration of how to use the pipes. - -**Example 2 :** - - {{ index .Params "disqus_url" | html }} - -Access the page parameter called "disqus_url" and escape the HTML. - -**Example 3 :** - - {{ if or (or (isset .Params "title") (isset .Params "caption")) (isset .Params "attr")}} - Stuff Here - {{ end }} - -Could be rewritten as - - {{ isset .Params "caption" | or isset .Params "title" | or isset .Params "attr" | if }} - Stuff Here - {{ end }} - - -## Context (aka. the dot) - -The most easily overlooked concept to understand about Go templates is that {{ . }} -always refers to the current context. In the top level of your template this -will be the data set made available to it. Inside of a iteration it will have -the value of the current item. When inside of a loop the context has changed. . -will no longer refer to the data available to the entire page. If you need to -access this from within the loop you will likely want to set it to a variable -instead of depending on the context. - -**Example:** - - {{ $title := .Site.Title }} - {{ range .Params.tags }} -
  • {{ . }} - {{ $title }}
    • - {{ end }} - -Notice how once we have entered the loop the value of {{ . }} has changed. We -have defined a variable outside of the loop so we have access to it from within -the loop. - -# Hugo Parameters - -Hugo provides the option of passing values to the template language -through the site configuration (for sitewide values), or through the meta -data of each specific piece of content. You can define any values of any -type (supported by your front matter/config format) and use them however -you want to inside of your templates. - - -## Using Content (page) Parameters - -In each piece of content you can provide variables to be used by the -templates. This happens in the [front matter](/content/front-matter). - -An example of this is used in this documentation site. Most of the pages -benefit from having the table of contents provided. Sometimes the TOC just -doesn't make a lot of sense. We've defined a variable in our front matter -of some pages to turn off the TOC from being displayed. - -Here is the example front matter: - -``` ---- -title: "Permalinks" -date: "2013-11-18" -aliases: - - "/doc/permalinks/" -groups: ["extras"] -groups_weight: 30 -notoc: true ---- -``` - -Here is the corresponding code inside of the template: - - {{ if not .Params.notoc }} -
    - {{ .TableOfContents }} -
    - {{ end }} - - - -## Using Site (config) Parameters -In your top-level configuration file (eg, `config.yaml`) you can define site -parameters, which are values which will be available to you in chrome. - -For instance, you might declare: - -```yaml -params: - CopyrightHTML: "Copyright © 2013 John Doe. All Rights Reserved." - TwitterUser: "spf13" - SidebarRecentLimit: 5 -``` - -Within a footer layout, you might then declare a `