Refine and add new features to my web site
This site disappeared on Internet from the early of this year because of the server problem. Since then it's running on my thinkpad locally for 1 year. Now it's more like my personal blog. I have to have some refine work on my blog since I decided to publish it again. Also I added some new features.
Here's a work log.
upgrade MT to version 3.3
- Refer to MT Upgrade from 3.2 to 3.33
changed to plugined tinymce
changed title appearance
There are 3 level Titles.
- site title
- category and monthly title
- entry title
Each pages have this title structure for search engine friendly, but only display the related title. Others are hided.
In the 2nd level pages, the site title is hided. Also in the 3rd level pages, both 1st level and 2nd level titles are hided.
Using style:
.subindex-container .index-logo,
.individual-container .index-logo,
.individual-container .subindex-logo {
display: none;
}
gave tags to each entry
Give one or more meaningful tags to each entry. The old keywords field is abandoned.
neater monthly archive list
- Refer to Change monthly archive style
added keywords.js
I used keyword.js to hilight keywords which visitor used in search engine for linking in this page in my old site. I did some simple configure and add it into my blog.
I had following settings.
// Configuration:
Keyword = {
hilite: true,
index: false,
refill1: true,
refill2: false,
element1: 'search',
element2: 'w',
style_name: 'hilite',
style_name_suffix: true,
debug_referrer: '',
debug_meta: ''
};
added edit link to individual archive
Simply to add an edit link to individual entry view, that makes editing entries quicker without going to MT management first.
Add following code to individual template:
<a href="<$MTCGIPath$>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID$>&blog_id=<$MTBlogID$>" title="edit this entry, only for admin">Edit</a>
changed download files location
I organized all download files by date instead of by categories. That reduces the length of the file list in a same directory.
Current directory structure rule is /ref/year/month/files, exam:
/ref/2006/12/simple.zip
fixed new line problem for entries
recheck the broken links
I have been using Xenu to check broken site links. It's still a good solution up to now. Recently, I got another solution that could play part of role of Xenu, CheckLinks. It's a plugin for MT that only check the links they are within entries. The reason I picked it up is that It's easier to have the edit link in the bad links report by CheckLinks. Here's a report from my site. For having this feature, I use below Template. This template is used for checking all entries(maximum 9999 here) in your blog and printing only the entries with bad links. But rebuilding this template is as slow as when you check through your blog links with other tool. So better to uncheck the "Rebuild this template automatically when rebuilding index templates" at template setting if you are using it in Indexes Template.
<MTEntries lastn="9999">
<MTCheckLinks include_local="1">
<MTCheckLinksHere>
<$MTEntryBody$>
<$MTEntryExtended$>
</MTCheckLinksHere>
<MTIfBadLinks>
<dl class="badlinks">
<dt><a href="<$MTEntryLink$>"><$MTEntryTitle$></a> (<a href="<$MTCGIPath$>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID$>&blog_id=<$MTBlogID$>" title="in <$MTCatetoryTitle$>">edit</a>) Have bad links:</dt>
<MTBadLinks load_entries="1">
<dd><$MTBadLinkStatus trim_to="3"$>: <$MTBadLinkURL$> [<a href="<$MTBadLinkURL$>"><$MTBadLinkText$></a>]</dd>
</MTBadLinks>
</dl>
</MTIfBadLinks>
</MTCheckLinks>
</MTEntries>
A note: If you are refering any Entries Tag like "MTEntryTitle" within CheckLinks Tag <MTBadLinks>, you must specify load_entries="1" otherwise there's error raising during rebuilding this template.
set up category rss feeds and links
managed external links by blogroll
I downloaded a new plugin Blogroll for managing my links.
Use Blogroll I could manage and group my links, and publish them in template.
Using following code in template:
<MTBlogrollCategories> <h3><$MTBlogrollCategoryLabel$></h3> <ul><MTBlogrollLinks> <li><a href="<$MTBlogrollLinkURI$>" title="<MTBlogrollLinkDesc>"<MTIfNonEmpty tag="BlogrollLinkRel"> rel="<MTBlogrollLinkRel>"</MTIfNonEmpty> <MTIfNonEmpty tag="BlogrollLinkTarget">target="<MTBlogrollLinkTarget>"</MTIfNonEmpty>><$MTBlogrollLinkName$></a></li> </MTBlogrollLinks></ul> </MTBlogrollCategories>
related tags on tag search
I downloaded a new plugin TagSupplymentals that brings much features on tags. I use MTRelatedEntries and MTRelatedTags.
Using following code in template:
<ul> <h3>Related Entries</h3> <MTRelatedEntries lastn="5"> <li><$MTInclude module="Entry Link"$></li> </MTRelatedEntries> </ul>
<ul> <h3>Related Tags</h3> <MTEntryTags> <MTRelatedTags> <li><a xhref="<$MTTagSearchLink$>"><$MTTagName$></a> (<$MTTagCount$>)</li> </MTRelatedTags> </MTEntryTags> </ul>
related entries by tags
See above.
more clear search result
On the search result list, as default only show the entry title and entry summary. So the searcher could have an overview on all search result. If he wants more info about the entry there's a link to expand the entry area to show entry body.
Template:
<MTEntriesHeader> <!--start #top-alpha--> <div id="top-alpha"> <label id="hidebodybar" class="hidbodybar"></label> <!--end #top-alpha--> </div> </MTEntriesHeader> <!--start #entry~--> <div class="entry" id="entry<$MTEntryID pad="1"$>"> <a name="a<$MTEntryID pad="1"$>" /> <!--start #top-entry~--> <div class="top-entry" id="top-entry<$MTEntryID pad="1"$>"> <label class="hidebodybar" id="hidebodybar<$MTEntryID pad="1"$>"></label> <!--end #top-entry~--> </div> <h3 class="entryheader" id="a<$MTEntryID pad="1"$>"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3> <!--start #entryinfo~--> <div class="entryinfo" id="entryinfo<$MTEntryID pad="1"$>"> <MTIfOne name="Category Archive"> <p class="subtitle"><$MTEntryDate format="%x"$></p> <MTElse> <p class="subtitle">In <a href="<$MTEntryLink archive_type="Category"$>"><$MTEntryCategory$></a>, <$MTEntryDate format="%x"$></p> </MTElse> </MTIfOne> <!--end #entryinfo~--> </div> <!--start #entrysummary~--> <div class="entrysummary" id="entrysummary<$MTEntryID pad="1"$>"> <$MTEntryBody convert_breaks="0" words="16"$>... <!--end #entrysummary~--> </div> <!--start #entrybody~--> <div class="entrybody" id="entrybody<$MTEntryID pad="1"$>"> <$MTEntryBody convert_breaks="0"$> <MTEntryIfExtended><p>继续阅读 "<a href="<$MTEntryPermalink$>#more"><$MTEntryTitle$></a>" 的剩余内容</p></MTEntryIfExtended> <!--end #entrybody~--> </div> <!--start #entryfooter~--> <div class="entryfooter" id="entryfooter<$MTEntryID pad="1"$>"> <MTEntryIfTagged><p>标签 Tags: 其它与<MTEntryTags glue=", "><a href="<$MTTagSearchLink$>"><$MTTagName$></a> (<$MTTagCount$>)</MTEntryTags> 相关的话题</p></MTEntryIfTagged> <p class="posted"> Posted by <$MTEntryAuthorUsername$> at <$MTEntryDate format="%X"$> <MTEntryIfAllowComments> | <a href="<$MTEntryPermalink archive_type="Individual"$>#comments">Comments (<$MTEntryCommentCount$>)</a></MTEntryIfAllowComments> <MTEntryIfAllowPings> | <a href="<$MTEntryPermalink archive_type="Individual"$>#trackbacks">TrackBack (<$MTEntryTrackbackCount$>)</a></MTEntryIfAllowPings> | <a href="<$MTCGIPath$>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID$>&blog_id=<$MTBlogID$>" title="edit this entry, only for admin">Edit</a> </p> <!--end #entryfooter~--> </div> <!--end #entry--> </div>
Javascript: hide-body.js
flexible style sheet
I had this new bar on the top of page.
It makes possible to switch different style sheet on current page by one click.
For doing this, needs switch-css.js, and the defination in the head.
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/screen.css" media="screen" title="BlockStyle" /> <link rel="alternate stylesheet" type="text/css" href="<$MTBlogURL$>css/screen-clearstyle.css" media="screen" title="ClearStyle" /> <script type="text/javascript" language="javascript" src="<$MTBlogURL$>switch-css.js"></script>And the label tag with ID definition in the page. The css links would be generated by the .js above dynamically.
<label id="switchcssbar"></label>
The code refer to:
tested none-css appearance
To see what my blog is like without style sheet, click below link. If you want to change it back, choose the block Style links on the top of any page. I'm ready to change this site as None Style
tested printable view
To see how it works, select "File - Print Preview" in your Internet Browser.
The format is defined in print.css .
made the old site work
Made some neccesary changes on my old site for showing it in sub folder well.
change to mysql database
- Refer to: Convert MT from Berkeley DB to MySQL
power editing basename
I think this would be helpful, lots of people want to have this feature.
- Refer to: Power editing basename
add style to preformatted tag <pre>
I used <pre> tag for several cases:
- programming code (exam: javascripts)
- command (exam: unix shell commands)
- output (exam: screen output of a command)
- refererence (exam: a short paragraph from other blog)
But they do have different requirements for showing up. So I add several class styles for the tag.
- .code
- .cmd
- .output
- .refer (with word wrap)
For the .refer class style, I referred to pre标签自动换行方案.
Update: Read an article What are semantics?, learned that I should use <blockquote> tag to wrap the resource that I refer to. So I need to use <blockquote> tag instead of class style .refer.
upgrade to TinyMCE 2.09
- Refer to upgrade to TinyMCE 2.09
Refined Page structure
- Refer to Refine web page structure
Refinced CSS
I split my css file as multi-level and use import keyword to link them up. I have following structure. The base.css and extend.css is used by each style sheet. The difference is that the extend.css is also refered by TinyMCE in MT. About TinyMCE please read this article .
base.css extend.css
\ /
\ /
screen.css
screen-linestyle.css
screen-clearstyle.css
I reset padding and margin as 0 in my base.css that makes crossing browsers development easier. Here's a style list about Firefox 1.5 default style sheet for HTML elements for reference.
I tried to have more comfortable color for pages. Here are some links would be helpful on this. The safe 216 web colors, a list of online colour tool.
Disable listing directory
Create a file ".htaccess" at the root path of web site and have following line:
Options All -Indexes
Rewrite url for old site
Add below lines to /.htaccess.
RewriteEngine On RewriteRule ^archives/([0-9]+/[0-9]+) $1 RewriteRule ^archives/(jeet_kune_do|outdoors) $1 RewriteRule ^archives/study_notes/(web|linux) $1 RewriteRule ^hobbies/(outdoors) $1 RewriteRule ^hobbies/ham/ amateur_radio RewriteRule ^hobbies/sbenefit/ society_benefit RewriteRule ^notes/*(db2|linux)* $1 RewriteRule ^notes/[a-z0-9\_\-]+.htm$ db2 RewriteRule ^archives/study_notes/[a-z0-9\_\-]+.html$ db2
A little help on expression I used.
- ^ is maching the begin of aline.
- $ is mathing the end of a line.
- $n is a reference for the expression within (), also could have $1, $2..., as I know, $0 should be the entire of $n.
- | is the OR relationship.
- + match at least one time.
Had this article for reference.
