基于ASP.NET MVC和Bootstrap搭建响应式个人博客站

1.0 为什么要做这个博客站? www.zynblog.com

 
 
在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了。而且下次再点击这个书签时,可能
就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效。这样一来,也就不方便自己查阅了。如果转载、收藏到自己的博客园账号中、CSDN账号
中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅。

  因此,我下决心开发一个个人技术博客站。主要原因是:可以整合各种宝贵资源,将知识变为宝库;可以借此巩固加强一下自己的"全栈"基础;记录工作生活中遇到的问题及其解决方案;可以帮助遇到同样问题的网友。

2.0 简单介绍下此个人博客用到的技术点

可以先点击进去看看。地址是http://www.zynblog.com该博客站基于ASP.NET MVC +
EF6.0,采用Bootstrap响应式布局搭建,因此使用IE8以下的浏览器访问时可能会出现错位等一系列问题。站点虽小,但五脏俱全:采用
ASP.NET
MVC架构、并使用了Spring依赖注入、云存储、响应式布局(几乎适应各种屏幕尺寸的设备)、一些繁杂的css、NUnit单元测试、Log4Net
日志记录、Lucene站内检索、各式各样的jquery插件、评论插件、点赞插件、分页插件,自定义Ueditor
编辑器,也制作了还算能看的logo和icon。

3.0 博客站效果展示 www.zynblog.com

3.1 网站架构

其实一个博客站没必要搞这么复杂,但为了学习嘛,也就搭了个简单的架构。其中包括Model、Repository、Service、和UI。SiteSearch是站内搜索模块,Inject是Spring.net依赖注入模块,Common中包含了IP获取、截取字符串、发送邮件、MD5、过滤字符串的工具。

3.2 博客站首页展示

3.3 文章详情页展示

3.4 侧边栏展示

3.5 联想搜索模块


结语

  先暂时介绍到这儿,之后会陆续详细介绍一下站点中使用的关键技术点。

如果您有什么好的建议和意见,可以通过我的站点留言http://www.zynblog.com/LeaveMsg或者 博客园和我交流,谢谢支持。

时间: 2024-10-24 21:56:28

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站的相关文章

基于ASP.NET MVC和Bootstrap搭建响应式个人博客站(一)

1.0 为什么要做这个博客站? www.zynblog.com   在工作学习中,经常要搜索查找各种各样的资料,每次找到相关资料后都会顺手添加到浏览器书签中,时间一长,书签也就满了.而且下次再点击这个书签时,可能 就会忘记当时为什么要添加这个书签了,更有可能书签连接已经无效.这样一来,也就不方便自己查阅了.如果转载.收藏到自己的博客园账号中.CSDN账号 中,脚本之家中,知乎中等等,依然是很凌乱,不方便下次查阅. 因此,我下决心开发一个个人技术博客站.主要原因是:可以整合各种宝贵资源,将知识变为

ASP.NET MVC使用Bootstrap系列(3)——使用Bootstrap 组件

Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉菜单.导航.警告框.弹出框.输入框组等.在你的Web Application中使用这些组件,将为用户提供一致和简单易用的用户体验. Bootstrap组件本质上是结合了各种现有Bootstrap元素以及添加了一些独特Class来实现.Bootstrap元素我在上一篇文章中涉及到,具体可以参考<ASP.NET MVC使用Bootstrap系列(2)——使用Bootstrap CSS和HTML元素>. 在这篇博客中,我将继续探索B

ASP.NET MVC使用Bootstrap系统(2)——使用Bootstrap CSS和HTML元素

Bootstrap提供了一套丰富CSS设置.HTML元素以及高级的栅格系统来帮助开发人员快速布局网页.所有的CSS样式和HTML元素与移动设备优先的流式栅格系统结合,能让开发人员快速轻松的构建直观的界面并且不用担心在较小的设备上响应的具体细节. Bootstrap 栅格(Grid)系统 在移动互联网的今天,越来越多的网站被手机设备访问,移动流量在近几年猛增.Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.

[备用]权限设计方案、如何使用session、MVC如何使用模板、DropdownList、怎么添加Bootstrape框架、使用ASP.NET MVC 4 Bootstrap Layout Template(VS2012)

1.权限设计方案: http://jingyan.baidu.com/article/9f63fb91ae22bac8410f0e70.html 2.如何使用session: 控制器中使用session namespace me.Controllers { public class LoginController : Controller { // // GET: /Login/ public ActionResult Index() { //设置session this.HttpContext

基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站

电影网站 ?? GitHub: https://github.com/bxm0927/movie-website 此项目是基于 Node.js + Express + mongoDB + Bootstrap 搭建的电影网站. 主要功能模块: 一期:前台电影展示页.电影详情页.后台电影管理中心(电影录入.电影修改) 二期:用户登录注册注销功能.用户识别和持久化.后台用户管理中心(用户录入.用户修改).电影评论 <!-- more --> 图片预览 技术栈 [前端] HTML/CSS/JS:亘古不

Orchard 基于 ASP.NET MVC 技术的免费开源内容管理系统

Orchard 是由微软公司创建,基于 ASP.NET MVC 技术的免费开源内容管理系统: 可用于建设博客.新闻门户.企业门户.行业网站门户等各种网站 简单易用的后台界面 性能稳定,功能齐全 热拔插模块化架构提供超强可扩展性 BSD 协议授权,可用于商业闭源项目 下载地址:https://orchard.codeplex.com/releases/view/119931 相关博客:http://www.orchardch.com/Blog 一个基于Orchard的开源CRM --coevery

[ASP.NET MVC] 使用Bootstrap套件

[ASP.NET MVC] 使用Bootstrap套件 前言 在开发Web项目的时候,除了一些天赋异禀的开发人员之外,大多数的开发人员应该都跟我一样,对于如何建构出「美观」的用户接口而感到困扰.这时除了,加入美术人员这个选项之外,开发人员也可以自立自强,为Web项目内加入Bootstrap套件.透过使用Bootstrap套件中各种设计精美的样式.组件,来让Web项目的用户接口更加的美观大气,增加客户对于项目产出的好感度.本篇文章介绍如何在Web项目里使用Bootstrap套件,为自己留个纪录也希

基于ASP.NET MVC的快速开发平台,给你的开发一个加速度!

基于ASP.NET MVC的快速开发平台,给你的开发一个加速度! bingo炸了 2017/4/6 11:07:21 阅读(37) 评论(0) 现在的人做事情都讲究效率,最好能达到事半功倍那种效果,软件行业也不例外.但是需求的一再变动,架构和业务功能的一改再改,往往使得软件的开发事倍功半.软件行业急需突破现现状,所以快速开发框架就这么应运而生了.但是市面上快速开发框架种类繁多,今天我给大家带来的是一套界面风格简洁大方.多业务功能.基于ASP.NET+MVC的快速开发框架. 体验地址我会在下文附上

Bootstrap禁用响应式布局

在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev