명언을 랜덤으로 표시해주는 위젯을 추가해 보자.
먼저 레이아웃에서 오른쪽 사이드바에 가젯을 추가한다.


자바스크립트 소스 코드는 아래와 같다. 

<script defer type="text/javascript">
var str = "삶이 있는 한 희망은 있다. [키케로], 산다는 것 그것은 치열한 전투이다. [로망로랑], 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. [사무엘 존슨]";
var arr = str.split(",");
var i = Math.floor(Math.random()*arr.length);
var result = arr[i];
var result2 = result.split("[");
document.write("<i class='fa fa-quote-left' aria-hidden='true'></i> " + result2[0] + " <i class='fa fa-quote-right' aria-hidden='true'></i><p id='author'>" + "[" + result2[1] + "</p>");
</script>

변수 str에 문자열을 추가할 수 있다.
각 문장은 콤마로 구분한다. 
<i class='fa fa-quote-left' aria-hidden='true'></i> 태그는 폰트어썸에서 따옴표를 불러온다. 
<p id='author'></p> 태그는 [작가] 부분을 꾸미기 위해 id 값을 준 것이고 CSS에서 원하는 속성을 지정하면 된다. 

모님캄7에 적용된 CSS 스타일 
#author {font-size: 12px; color: #6d84b4; text-align: right; padding-right: 25px; margin: 0;}

실행결과



문장 중간에 콤마(쉼표)를 써야 한다면 콤마 대신 특수문자 &#44;를 사용한다.