快速搭建个人博客网站(无代码,超美观,二十分钟搭建,小白友好,超详细)

前言

近期由于写文章,想做个自己的个人博客,于是通过云服务器和博客框架搭建了一个自己的个人博客网站,网上的教程不是很全,于是自己来写一份教学,本教学更加适用于不太懂计算机敲代码的小白,不过懂代码的朋友如果想学习网站搭建也可以使用该方法,然后在此基础上修改源码和自定义,网站搭建完能实现个人页面,文章发布,美观好看,使用最新的halo建站工具,便捷简单,全程干货,包你现学现会,以下图片是效果图

操作流程

搭建一个他人可以访问的个人博客,首先我们要明白网站是搭建在云服务器上的,所以首先需要一台云服务器,,然后需要使用像“www.baidu.com”的域名去访问我们的网站,我们需要去购买一个域名,这是我们需要的资源;

然后需要去部署我们的网站,为了快速部署,需要用到1panel面板这个软件,然后再1panel面板里面去部署我们的反向代理(OpenResty)、网站模板(我这里使用的是halo这个网站模板)、数据库(Mysql),最后在halo里面去选择我们需要的网站主题,最后就能够去发布文章了

申请云服务器

服务器种类

简单的介绍下服务器的种类,主要以品牌、位置、配置来分类

1、国内的云服务器IDC跟普通的机房服务器IDC提供商,包括:百度云、阿里云、腾讯云、华为云、雨云、又拍云等;

2、在每个服务器厂商里又有地区的选择,比如中国服务器(除香港地区),香港服务器,美国服务器,日本服务器等等;

3、每个服务器又有自己的配置,比如1h1g、2h2g,指的是1核心1g内存和2核心2g内存

主要区别

以品牌来划分:阿里腾讯等大厂的服务器作为行业标杆服务器,在高服务高企业需求的情况下,有着专业的三方服务以及完善的体系,当然,他们的价格也是比较高的,特别是在后续付费的时候,价格可能是之前的几倍,雨云和又拍云作为新一代服务器的话主打性价比,比较适合小白以及没有过多资金的个人开发者,而且服务器的品质也很不错

以地区来划分:就在网站开发这个方面来讲,主要就是速度和备案需求,中国内陆服务器的速度当然是比国外快的,但是购买内陆的服务器开发网站需要去公安进行网站备案,购买香港或者国外服务器就无需备案

申请

由于阿里等大厂服务器操作有点门槛,我们这里就使用最便捷,性价比最高的雨云服务器了,链接请点击雨云 - 新一代云服务提供商进去后注册登录,绑定微信注册完成之后就可以点击云服务器,可以选择自己需要的云服务器

我这里使用一个香港的2核心2G内存的作为演示了,建议大家使用香港服务器,因为香港的服务器不用备案,比较方便,而且速度也不差,2核2G50M也能有不错的吞吐量,平时大几十人吞吐量网站来说够用了,如果需要更多的配置可以自行选择

系统选择以及面板预装

我们这里使用Centos7.9系统以及1panel面板和docker环境,使用centos8的原因是占用内存小,不过可能命令行的形式不太友好,但是我们有安装1panel面板,不用命令来运行大量的代码以及软件安装,下面的公网ip最好使用独享公网,否则无法使用域名,然后就可以购买使用了

然后在服务器面板里找到自己的云服务器

点击管理,就能看到我们服务器的状态,这里有我们的服务器ip,用户名,密码

向下滑动可以看到1panel面板成功安装,里面的是访问1panel面板的网址链接以及面板用户密码,公网ip需要换成自己服务器的ip地址,在上面的图片中可以看到

我们将ip替换后,在浏览器的地址栏里输入,然后访问,就能进入我们的1panel面板了

进来后是这个页面,然后将面板的用户名和密码输入后登录

登录成功就进来我们的1panel面板了,可以看到我们服务器的信息

接下来我们要安装halo建站工具以及openresty和mysql,在安装之前,我们要去修改一下docker的镜像配置,点击左边的容器,点击上方配置,点击镜像加速右边的设置,然后将镜像网站修改为:

https://docker.1panel.live,点击确认,然后输入重新启动,再启动docker,如图

doker显示已启动,就可以去安装halo建站工具了

接下来点击左边应用商店,我们要安装三个,分别是Openresty,Mysql,Halo,按顺序安装,点击安装后,确认即可,安装halo和mysql时,把端口外部访问勾选,如果有疑问,可以参考halo的官方文档,安装过程可能比较久,请耐心等待使用 1Panel 部署 | Halo 文档使用 1Panel 部署https://docs.halo.run/getting-started/install/1panel

安装halo和mysql时,把端口外部访问勾选

安装完成后,我们在已安装处可以看到三个已启动的应用

至此,我们的三个应用安装完成

完成 Halo 应用的安装后,此时并不会自动创建一个网站,我们需要手动创建一个网站,然后将 Halo 应用绑定到这个网站上才能使用域名访问。

点击 1Panel 菜单的 网站,进入网站列表页,点击 创建网站 按钮

然后在已装应用中选择我们刚刚新建的 Halo 应用。

正确填写主域名,需要注意的是需要提前解析好域名到服务器 IP

最后,点击确认按钮,等待网站创建完成即可访问网站进行 初始化

域名申请

如果没有域名,可以去雨云的域名服务里进行域名注册:

 域名就是你的网站的名字,方便他人记忆你的网站,xyz一般比较便宜。注册完后填写到halo的主域名里即可。

域名解析就是将你的域名绑定到你的服务器,在雨云购买的域名就在雨云的域名管理里解析即可。

类似如图将自己网站的ip输入后确定

解析完成后,我们就能通过我们的域名来访问我们的网站主机了

地址栏上面输入我们的域名,访问成功!这个是默认的halo初始化页面,定义我们的站点标题,管理员用户名,以及管理员密码

注册成功,地址栏输入:域名 /console 即可进入 Halo 管理端。此处我输入的是http://mcfish.top/console

点击旁边的主题,点击主题管理,可以选自我们网站的样式

关于Halo的具体使用方法,可以查看Halo官方文档:Halo 文档

这里就不过多描述了

然后是然后是安全访问SSL,我们可以去雨云里申请一个免费的SSL证书

申请后然后在1panel面板中的证书中将公钥私钥传输即可

然后就能通过https安全访问,最后我们通过域名直接访问即可,不要在后面加/console

给大家看一下博主的网站:

这个主题还是很好看的,背景也可以自定义,更多功能我之后会出新文章,有问题大家也可以进qq群交流,或者评论区留言,我看到会回复。

博主邮箱:1271440782@qq.com

博主雨云UID:115483

<think>好的,我现在要解决用户关于Element UI的el-table表头宽度自动调整的问题。首先,我需要理解用户的具体需求。用户提到“el-table表头宽度自动”,可能是指表头宽度根据内容自适应,或者希望列宽自动调整以适应内容或容器。接下来,我需要回忆Element UI的文档和相关经验,看看有哪些方法可以实现这一点。 首先,Element UI的表格组件默认情况下,列宽是自适应的,但有时候如果内容过长,可能会导致布局问题,比如内容被截断或者列宽不一致。用户可能遇到了这样的问题,希望找到自动调整宽度的解决方案。 接下来,我需要考虑不同的方法。通常,设置列宽为auto或者不设置宽度属性,可以让列根据内容自动调整。但有时候可能需要更精细的控制,比如动态计算宽度,或者使用Flex布局。此外,使用JavaScript动态计算内容宽度也是一种方法,但需要考虑性能问题。 然后,我需要考虑用户可能的场景。例如,表格数据可能是动态加载的,或者内容长度变化较大,用户希望无论内容如何变化,列宽都能自动适应。同时,用户可能不希望手动设置每一列的宽度,而是全局设置。 另外,需要注意Element UI版本的影响。不同版本可能有不同的默认行为和API,需要确认当前使用版本的特性。例如,在某些版本中,设置fit属性为true可以让表格宽度自适应容器,但可能影响列宽的自适应。 还需要考虑可能的兼容性和副作用。例如,使用Flex布局可能会影响其他样式,动态计算宽度可能增加渲染时间,尤其是在数据量大的情况下。此外,全局设置可能会影响其他表格,需要确保只作用于特定的表格实例。 然后,我需要组织这些思路,分步骤给出解决方案。可能的方法包括使用auto宽度、动态计算、Flex布局、监听窗口变化等。每种方法的优缺点需要明确,比如动态计算虽然精确但可能影响性能,Flex布局简单但需要浏览器支持。 最后,要给出示例代码和注意事项,帮助用户正确实施解决方案。同时,提醒用户根据具体需求选择合适的方法,比如数据量小的情况下可以使用动态计算,而大数据量则推荐使用Flex或自动宽度。</think>--- ### **Element UI 表格自动列宽配置方案** --- #### **▎ 核心解决方案** 通过 **不设置列宽** 或 **设置 `width="auto"`** 实现自动列宽: ```vue <el-table :data="tableData" style="width: 100%"> <!-- 方案1:不设置 width --> <el-table-column prop="name" label="姓名"></el-table-column> <!-- 方案2:显式声明 auto --> <el-table-column prop="address" label="地址" width="auto"></el-table-column> </el-table> ``` ✅ **效果特点**: 1. 根据表头标题文字长度自动分配初始宽度 2. 内容换行时会自动扩展高度 3. 拖动调整列宽后自动记忆新宽度 --- #### **▎ 动态内容自适应 (推荐)** 通过 **计算最长内容宽度** 动态设置列宽: ```vue <script> export default { methods: { calcColWidth(prop) { const maxWidth = Math.max( ...this.tableData.map(item => String(item[prop]).length * 14 // 14px/字符估算 ), this.$refs.table.$el.querySelector(`.${prop}-header`).offsetWidth ) return Math.min(maxWidth + 30, 600) + 'px' // 限制最大宽度 } } } </script> <template> <el-table ref="table" :data="tableData"> <el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label" :width="calcColWidth(col.prop)" /> </el-table> </template> ``` ![动态列宽效果](https://i.imgur.com/3WvD8gE.gif) ⚠️ **注意事项**: - 需在数据加载完成后计算 - 中文字符建议按 `18px/字` 计算 - 大数据量时考虑性能优化 --- #### **▎ 响应式布局方案** 使用 **Flex 布局** 实现容器自适应: ```css /* 父容器设置 */ .table-container { display: flex; width: 100%; } /* 表格配置 */ .el-table { flex: 1; overflow-x: auto; } .el-table__body-wrapper { display: flex !important; } ``` ✅ **优势**: - 自动填满父容器 - 支持水平滚动 - 列宽按内容比例分配 --- #### **▎ 特殊场景处理** | 场景 | 解决方案 | |----------------------|------------------------------------------| | 混合固定列 | 至少保留一列不设宽度 | | 长文本 | 添加 `show-overflow-tooltip` 属性 | | 图片内容 | 设置 `min-width: 150px` | | 表头换行 | 使用 `render-header` 自定义表头 | | 服务端分页 | 在 `current-page` 变化时重新计算宽度 | --- #### **▎ 性能优化建议** 1. **防抖处理**: ```js import _ from 'lodash'; this.calcWidth = _.debounce(this.calcColWidth, 300); ``` 2. **缓存计算结果**: ```js const widthCache = new Map(); if(widthCache.has(prop)) return widthCache.get(prop); ``` 3. **虚拟滚动** (大数据量场景): ```vue <el-table v-infinite-scroll="loadMore" :height="400" :row-height="40" > ``` --- #### **▎ 调试技巧** 1. 在浏览器控制台查看表格 DOM 结构: ```js document.querySelector('.el-table__
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值