写文章页面

最新推荐文章于 2024-03-26 21:54:07 发布
最新推荐文章于 2024-03-26 21:54:07 发布
阅读量529 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 大作业 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43397693/article/details/123068519
本文介绍了一种利用Vue组件和Markdown编辑器开发博客写文章页面的方法。通过Element UI工具构建页面布局，集成Markdown编辑器，使得用户在撰写文章时能够方便地输入标题和正文。Markdown的简洁语法使得内容创作更为专注，同时也保证了发布的纯文本格式友好。对于博客作者而言，这种组合极大地提升了写作体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

写文章页面主要是使用vue组件结合Markdown编辑器进行开发，通过element工具进行页面的大体编写，同时将Markdown相关工具嵌入到网站页面中，当用户点击写文章时，便可以直接进入vue的一个新页面，对文章进行编写，输入标题等，使用Markdown编辑器有许多的优点。Markdown 的理念是，能让文档更容易读、写和随意改，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。只需要学习几个简单的符号，然后专注于码字，文字的排版只是多打几个符号而已。一份使用 Markdown 格式撰写的文件可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。对写博客的用户来说必然是锦上添花。
具体页面如下

具体代码如下

写文章
如何把公众号里的文章页面，重写成html独立宣传页
inuoen的博客
01-04 2007
今天在知乎上看到大家有这方面的需求，我这里专门写一篇文章说下。由于自己空闲时也接到很多这类单子，对我来说轻车熟路。 要完美的把公众号文章页面扒下来，根据我的经验，要满足以下几个点： 1、代码要简洁、易读：div、css代码规范，js代码通俗易懂，并且没有多余的代码； 2、页面要完美还原：标题、文字、图片、样式要做到1:1还原； 3、要能支持双端：手机端、电脑端都可以正常打开，样式不影响； 4、后期可扩充性要强：能够方便做功能增加。 大多数人最常用的方法，是直接转存为html。这样的话，200
Hexo写文章基本操作
Jack·Kwok的博客
09-26 5457
用hexo写文章 步骤1 打开hexo的根目录，也就是里面有_config.yml, source, themes等等的那个，对于我个人我把他叫做myblog 步骤2 在该目录下打开git bash，执行该代码，可在浏览器打开http://localhost:4000/进行实时查看自己的网站。（注意：此时外网还不能访问本地的修改，只有提交之后才能访问。） hexo server 步骤3（此时还是在根目录下执行以下操作） 新建发布文章（post page） 执行以下命令后会自动在\myblog\source
HTML实例1 _网页文章
Twilight's Blog
01-01 5395
写这个网页需要用到的东西很少，简单的文字格式和一些对齐方式即可完成。还有就是一些格式例如首行缩进需要用到转移字符。段
文章汇总页面
TomRen
01-05 1361
本页面是目前的文章汇总页，按照时间顺序列出，会持续更新。 v0.120190105 TODO：分类整理 【MarkDown】转义字符 【今日CS 视觉论文速览】4 Jan 2019 【今日CS 视觉论文速览】3 Jan 2019 【今日CS 视觉论文速览】1 Jan 2019 【机器学习】混淆矩阵及其绘制 【Vim】批量插入注释符号 【今日CS 视觉论文速览】31 Dec 2018 【深度学习...
html好看的写文章页面,这是使用HTML写的文章——各种样式自己看啦
weixin_42197841的博客
06-10 897
IteratorIterator 是 ES6 引入的一种新的遍历机制，迭代器有两个核心概念：迭代器是一个统一的接口，它的作用是使各种数据结构可被便捷的访问，它是通过一个键为Symbol.iterator 的方法来实现。迭代器是用于遍历数据结构元素的指针(如数据库中的游标)。迭代过程迭代的过程如下：通过 Symbol.iterator 创建一个迭代器，指向当前数据结构的起始位置随后通过 next 方...
怎样得到一个清爽干净简洁的优快云文章页面？开源一个小插件，可自由定制用于其他网站。【含视频教程】
胡凯旋的个人技术博客
12-12 1539
忍不住吐槽一下优快云： 1. 这是一个技术网站，我是来学习的，你搞那么多花哨的东西干什么？ 2. 我已经大学毕业十几年了，你就不能智能判断一下吗？为什么每次都要弹出“认证学生身份”的窗口？而且我都点了多少次“否”了，你就不能保存到我的用户信息里面吗？非要每次都弹。 3. 我的浏览器处于缩放状态，是我年纪大了特意调的，用得着你天天提醒我年纪大吗？ ......
vue制定文章内容模板，文章的每一段对应数组的每一项，支持存放多张图片
qq_45838886的博客
04-27 1581
制定文章内容模板，文章的每一段对应数组的每一项，支持存放多张图片 demo: 这样的一行，就是文章的一段 用户输入内容时，这一段的内容就会同步到数组中，即第一段的内容会同步到数组的第一项，以此类推（图片会转成base64的格式）。 可以点击“增加一行”来插入段落，相应的，数组也会增加相应的项。 代码： <template> <div> <div class="edit" v-for="(item, index) in myFiles"
实现写邮箱html页面,HTML写的第一个邮箱登陆界面
weixin_36476826的博客
06-03 3152
自己动手去写才会有收获，宁可模仿也不要全部复制粘贴不说了，直接上代码。CSS有注释，适合新手。LoginWinner记住密码忘记密码HTML界面的代码，只负责对数据进行封装。未链接CSS的界面效果如下：CSS部份自己百度的属性都加上注释了，适合新手。@charset "utf-8";/* CSS Document */html, body, div, span, applet, object, i...
AI编程案例003/ ChatGPT写爬虫程序-通过搜狗搜索抓取微信公众号文章
qbit2coding的博客
03-26 1967
整体效果还算满意，基本不用费太大劲就能实现我的需求。提示词很重要，除了网上收集的模板，大家也可以用我的思路。先去问ChatGPT怎么向他提问它才能理解你的需求。然后按它的调调给它提示词。比较触动的是ChatGPT能发现自己的bug并自主修改。目前看对一点编程经验的小白来说还不能那么容易的自己用ChatGPT写代码，需要一些编程的通识。回答一下我为什么把之前写的代码直接贴给它去修改？有人或许说他不是能记住上下文吗。看下图，当我让它重写时它又换了一个写法去写代码。
教你写出漂亮优快云文章样式
夏末初临
07-31 3420
写在前面 大家好，我是夏末初临。优快云上有很多排版漂亮的文章，很多小伙伴会困惑怎么写出漂亮样式的文章。其实给文章添加想要的html标签就可以啦。 接下来，我举例几个样式例子，大家可以直接拿去修改使用哦~ 常见样式 01.字体样式 代码如下： <font color="#0f95b0" size="2">字体颜色大小</font> 显示结果如下： 字体颜色大小 在这里呢，我给大家推荐一个配色网站，传送地址： 中国色 选择想要的颜色，比如蓝色，然后鼠标移动到页面上，就会出来颜色代码。
基于.NetCore开发博客项目 StarBlog - (7) 页面开发之文章详情页面
dotNET跨平台
05-22 368
系列文章基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客？基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目基于.NetCore开发博客项目 StarBlog - (3) 模型设计基于.NetCore开发博客项目 StarBlog - (4) markdown博客批量导入基于.NetCore开发博客项...
Spring Boot + vue-element 开发个人博客项目实战教程（二十二、文章管理页面开发（1））
码上言
10-17 2394
时隔三四个月了没更新了，差一点烂尾了，对不住各位小伙伴了现在才更新，这也是我们这个教程的最后一篇了，接下来可能还会更新一下项目的上线功能，大概会用一到两篇的文章写完，可能需要服务器，大家如果有条件的话还是要去搞一台自己的服务器，模拟真实的线上环境才能更好的学习，可以去拼夕夕买或者百度云也可以都挺便宜，四五十块钱就可以了，还是希望大家用真实的环境来学习。最近我打算写redis的学习，各位小伙伴有需要的话可以去我的Redis从入门到实战专栏查看，有什么好的意见可以评论区告诉我或者加我好友沟通，
Spring Boot + vue-element 开发个人博客项目实战教程（二十三、文章管理页面开发（2））
码上言
10-18 3173
我们接着上一篇的来写，现在就剩下文章发布的功能了，但这个是最重要的部分，大家有什么问题欢迎随时留言或者私信我，或加我好友都可以。目录的话我就接着上一篇的来写了，不再重新写目录了，大家可以两篇合起来一起来看。文章摘要也就是对文章的大体描述功能，这个就是个表单，没有难点。
vue使用markdown
西洲
01-06 8813
前言： 项目开发需要用到富文本编辑器，最终确定使用vue框架 vue-meditor 。 1、vue-meditor简介 一款使用marked和highlight.js开发的一款markdown编辑器，除常见markdown语法外，支持快捷输入、图片粘贴、代码复制、全屏编辑、预览等功能 1.1、优点： 使用简单，安装npm包或者引入js包就行 方便扩展，定制型比较强 功能强大，总...
【小程序开发之文章详情页面的设计】文章详情页面如何布局
m0_61088839的博客
05-31 3263
本篇博客是小程序开发系列的第四篇，在上一篇博客中介绍的是首页的制作，除了展示轮播图图片，食谱的封面、名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面。 除了在首页的js里面编写跳转函数之外（函数用来获取轮播图/食谱/文章的id，并携带id进行页面跳转）我们还需要创建page，制作详情页面。 页面效果 在我的小程序中，文章详情页顶部的图片是一张固定的图片（也就是每篇文章的详情页顶部都使用同一张图片作为装饰）大家可以根据需要自行修改图片。 然后顶部图片下面展示的是文
Spring Boot + vue-element 开发个人博客项目实战教程（二十四、文章管理页面开发（3））
码上言
10-21 2162
后端代码gitee地址：https://gitee.com/xyhwh/personal_blog前端代码gitee地址：https://gitee.com/xyhwh/personal_vue还是接着上边的来写，下面就剩下文章的展示一块了，马上这个系统就完结了，我看了一下即将写了一年，断断续续的。感谢大家的支持！这个列表相信大家已经写了很多遍了，现在可以说大概的思路应该掌握在手，这里我对后端又进行了处理，以前的bug也修复了一些，我这里先把后端改的代码来说一下。1、首先修改了根据分类id查找分类信息这里的
vue 路由传参 小案例 点击文章列表 进入当下文章页面
小羽向前跑
02-16 1443
最终功能： index.js路由页面，给单独文章页面配置路由： 用id区分当下用户点击哪条文章 { path: '/blog/:id', name: 'singleblogs', component: singleblogs }, showblogs.vue列表页面路由配置代码： 在所有列表页面，点击标题，跳转页面： v-bind:to...
博客网站（8）-博客的撰写页面
nic's blog
03-19 1886
添加修改文章，表单数据的传递，对数据库的操作
hexo博客怎么写文章
最新发布
03-17
### 如何在 Hexo 博客中撰写文章 #### 创建新文章 要创建一篇新文章，可以使用 `hexo new` 命令。例如，如果想创建一篇文章名为 "my-first-post" 的文件，则可以通过以下命令实现[^2]： ```bash hexo new my-first-post ``` 此命令会在 `_posts` 文件夹下生成一个新的 `.md` 文件（Markdown 格式的文档），默认命名为 `my-first-post.md`。 --- #### 编辑文章内容 生成的文章会自动放置在站点目录下的 `_posts` 文件夹中。打开该文件即可编辑文章内容。每篇文章通常由两部分组成：头部元信息（Front-matter）和正文内容。 ##### 头部元信息 (Front-matter) 头部元信息位于文章顶部，用于定义一些属性，如标题、日期、分类、标签等。以下是常见的 Front-matter 结构示例: ```yaml --- title: 我的第一篇博文 date: 2023-10-07 14:00:00 categories: - 技术 tags: - 学习笔记 - 工具 --- ``` 其中： - **title**: 文章标题。 - **date**: 文章发布的时间戳。 - **categories**: 文章所属的大类。 - **tags**: 关键词或标签，便于检索。 ##### 正文内容 正文部分支持 Markdown 语法编写。例如，一段简单的文字描述如下所示： ```markdown 这是我的第一篇博客文章！ 我们可以在这里添加图片： ![示意图](https://example.com/image.jpg) 或者链接到其他网站：[点击这里访问官网](https://hexo.io/) ``` --- #### 启动本地预览服务 完成文章编辑后，可通过启动本地服务器查看效果。执行以下命令以启动服务[^3]： ```bash hexo server ``` 此时，浏览器访问地址 http://localhost:4000/ 可实时预览您的博客页面。 --- #### 清除缓存并重新生成静态文件 当修改了主题或其他配置时，可能需要清除旧的数据缓存，并重新生成静态文件。这一步骤非常重要，尤其是更换主题或调整全局设置时。具体命令如下： ```bash hexo clean && hexo generate ``` 上述命令的作用分别是清理缓存 (`clean`) 和生成新的静态文件 (`generate`)。 --- #### 部署至远程仓库 为了让他人能够通过互联网访问您的博客，还需要将生成的静态文件部署到 GitHub Pages 或其他托管平台。执行以下命令完成部署操作： ```bash hexo deploy ``` 注意，在首次部署之前，请确保已在项目的根目录下正确配置 `_config.yml` 中的相关参数，例如 `deploy` 节点中的目标存储库 URL 和分支名称。 --- #### 添加额外功能 除了基本的文章创作流程之外，还可以借助插件进一步增强用户体验。例如，集成评论系统 Disqus 或 Valine，以及启用全文搜索等功能[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值