内容管理系统做网站,在哪个网站可以一对一做汉教,中国科技成就新闻,如何用自家电脑做网站服务器GitHub Pages是GitHub提供的静态页面托管服务#xff0c;可以用来托管个人博客、项目文档等静态页面。GitHub Pages支持Jekyll#xff0c;可以使用Jekyll构建博客#xff0c;也可以使用其他静态页面生成器。现在GitHub Pages也在公测通过工作流部署静态页面#xff0c;可以…GitHub Pages是GitHub提供的静态页面托管服务可以用来托管个人博客、项目文档等静态页面。GitHub Pages支持Jekyll可以使用Jekyll构建博客也可以使用其他静态页面生成器。现在GitHub Pages也在公测通过工作流部署静态页面可以通过GitHub Actions自动部署静态页面这样页面构建工具就不再受约束可以使用任何静态页面生成器。GitHub Pages还支持自定义域名可以绑定自己的域名。我的个人博客目前是托管在腾讯云COS上使用GitHub Actions自动部署主要考虑是加快国内访问速度现在都是在公众号上发布文章了后期考虑把博客迁到GitHub Pages上。
今天先把被动收入组合的盈亏情况搞个页面出来部署到GitHub Pages上方便查看。 警告GitHub Pages 站点可以在 Internet 上公开即使该站点的存储库是私有的。 如果站点的存储库中有敏感数据要在发布前删除数据。 如果不需要对站点的生成过程进行任何控制则建议在将更改推送到特定分支时发布站点。 可以指定要用作发布源的分支和文件夹。 源分支可以是存储库中的任何分支源文件夹可以是源分支上的存储库根目录 (/)也可以是源分支上的 /docs 文件夹。 将更改推送到源分支时源文件夹中的更改将发布到 GitHub Pages 站点。
如果想使用 Jekyll 以外的生成过程或者不想使用专用分支来保存已编译的静态文件则建议编写 GitHub Actions 工作流来发布站点。 GitHub 为常见的发布方案提供入门工作流以帮助编写工作流。
本文的静态页面比较简单就选择特定分支部署的方式其实直接使用main分支也可以但为了跟代码有所区分还有实践习惯就新建一个gh-pages分支。
创建分支
在GitHub上创建一个分支分支名是gh-pages然后将分支切换到gh-pages。创建gh-pages后GitHub会自动创建一个页面部署工作流我们需要在仓库设置中选择是使用仓库根目录还是使用/docs目录。我使用了根目录来进行部署。 部署静态页面
每次向gh-pages分支推送更改时GitHub Pages都会构建站点并发布站点。使用仓库根目录作为站点源文件夹时GitHub Pages会使用index.html作为站点的主页。如果没有index.htmlGitHub Pages会使用README文件。
我在gh-pages分支上新建了一个index.html文件内容如下
!DOCTYPE html
htmlheadtitlePortfolio Profit Curve/titlemeta charsetutf-8script srchttps://cdn.jsdelivr.net/npm/echarts5/dist/echarts.min.js/script
/headbodydiv idprofitCurve stylewidth: 100%;height:600px;/divscriptfetch(my-investment/data/portfolio-1_change_records.json).then(response response.json()).then(data {var chartDom document.getElementById(profitCurve);var myChart echarts.init(chartDom);var option {tooltip: {trigger: axis,formatter: function (params) {var date params[0].axisValue;var funds data.find(record record.date date).fund_detail;var tooltipItems params.map(param {var fund funds.find(fund fund.fund_code param.seriesName);if (!fund) {return ${param.seriesName}: ${parseFloat(param.value).toFixed(2)};}var cumulativePL (parseFloat(param.value) - fund.cost).toFixed(2);var color cumulativePL 0 ? red : green;return ${param.seriesName}: ${parseFloat(param.value).toFixed(2)} (Cost: ${fund.cost}, Cumulative PL: span stylecolor: ${color};${cumulativePL}/span);});return ${date}br/${tooltipItems.join(br/)};}},legend: {data: [Total Value].concat(data[0].fund_detail.map(fund fund.fund_code))},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},toolbox: {feature: {saveAsImage: {},dataZoom: {},restore: {}}},xAxis: {type: category,boundaryGap: false,data: data.map(record record.date)},yAxis: {type: value},series: [{name: Total Value,type: line,data: data.map(record (record.balance record.fund_value_total).toFixed(2)),smooth: true},...data[0].fund_detail.map((fund, index) ({name: fund.fund_code,type: line,data: data.map(record record.fund_detail[index].value.toFixed(2)),smooth: true}))]};myChart.setOption(option);});/script
/body/html这个HTML使用ECharts JavaScript库显示投资组合利润曲线。文档结构是标准的包括一个head部分其中包含页面的标题和链接到ECharts库的链接以及包含页面主要内容的body部分。
body包含一个id为profitCurve的div这是图表将被渲染的地方。div的样式设置为占据其父元素宽度的100%并且高度为600px。
JavaScript代码从位于my-investment/data/portfolio-1_change_records.json的JSON文件中获取数据。然后使用这些数据初始化一个ECharts实例并配置图表。
option对象包含图表的配置。tooltip属性配置用户将鼠标悬停在图表上的数据点时将显示的信息。legend属性指定将在图表图例中显示的数据系列的名称。gridtoolboxxAxis和yAxis属性配置图表的外观和功能。
series属性是一个数组指定将在图表上显示的数据系列。第一个系列代表投资组合的总价值其余的系列代表投资组合中各个基金的价值。每个系列的数据都是从获取的JSON数据中提取的。
最后调用ECharts实例上的setOption方法来应用配置并渲染图表。
部署后效果如下 提示框显示的是对应日期的组合净值、各个基金的净值、成本和累计盈亏。
点击原文链接可以访问到这个页面
